Webpack의 필요성

• 다운로드 할 파일들이 많이지면 네트워크 커넥션이 많아진다. 네트워크에 부하가 많아지면서 느려질 수 밖에 없다.
• 웹에서도 모듈을 사용하고 싶다는 생각과(모듈은 최신 브라우저에서는 지원이 안 됨) 여러개의 파일을 하나로 묶어서 제공하고 싶다는 생각을 해서 만든 것이 bundler다

Webpack의 사용 방법

기본설정

1. npm init
2. webpack 설치하기

npm install -D webpack webpack-cli

개발을 하기 위한 기능이라 -D 옵션을 이용하여 설치

npm install react react-dom

react를 위한 설치 (CRA안쓸경우)

1. CLI방법

1. entry파일 설정하고 파일 위치 설정하기

• entry파일이 사용하고 있는 파일들을 번들링 한다.
• 설치한 webpack을 실행할 때에는 npx라 쓴다.

npx webpack --entry ./source/index.js --output ./public/index_bundle.js

entry파일은 ./source에 있는 index.js이고 이 파일들이 사용하고 있는 모든 파일들을 하나로 만들어서 ./public에 index_bundle.js라는 이름으로 저장한다.

2.config파일 방법

1. webpack.config.js 파일 생성

2. 아래와 같이 entry와 output을 설정해준다.

const path = require('path');
module.exports = {
    name: 'wordrelay-setting', //설정이름
    devtool:'eval', //개발자모드일때 (hidden-source-map -> production일때)
    
resolve {
 	extensions : ['.js','.jsx']
  }
  
//resolve를 설정해주면 entry, output 파일 확장자는 생략해도 된다.

    entry: {
        signUp: './js/signUp.js',
        login: './js/login.js'
    },
    output: {
        path:path.resolve(__dirname, 'public'),
        filename: 'index_bundle.js'
    }
}

위에서 cli로 설정했던 것을 config파일로 대신 해주는 것

3. 아래 명령어를 cli에 입력

npx webpack --config webpack.config.js

만약 webpack config파일 이름을 webpack.config.js로 했다면 위 명령어는 아래와 같이 줄일 수 있음

npx webpack

Mode

• mode는 크게 production과 debelopment로 나뉜다.

• 기본값은 production이다.

• production모드는 최대한 압축하여 변수 이름 등을 읽기 어렵게 축약해 놓은 것

• 두개의 webpack.config.js을 만들어서 개발을 할 때는 webpack.config.js파일을 사용하고 배포를 할 때는 webpack.config.prod.js로 배포하곤 한다.

  1. 개발모드

  npx webpack

  2.배포모드

  npx webpack --config webpack.config.js

  로 바꿔서 배포

mode를 development로 설정 방법

mode:'development'

config파일에 추가한다.

LOADER

css loader

Asset : image,css,js등을 모두 asset이라고 한다.(자산)

1. 아래 명령어로 style-loader와 css-loader를 설치해준다. (--save-dev는 -D와 같다)

npm install --save-dev style-loader css-loader

2. config파일에 아래와 같이 추가한다.(css파일에 css loader를 적용하겠다는 의미)

module: {
	rules: [
    	{
        	test:/\.css$/,  
            use: [
            	'css-loader'
                ]
              }
            ]
          }
        }

3. entry파일에 아래와 같이 추가한다. (같은 폴더에 style.css가 있어야 한다.)

import css from './style.css'

css파일을 발견하면 css-loader를 사용해서 css파일을 js형식으로 변환시켜 css라는 변수 안에 셋팅해준다.

4. 변환된 js형식의 css를 웹페이지에 넣어준다. => style-loader를 통해서 가능

     use: [
        'style-loader'
     	'css-loader',
         ]

즉 css-loader는 css파일을 읽어와서 그것을 webpack으로 가져오는 것
style.css는 가져온 css코더를 웹페이지안에 스타일태그로 주입해주는 것

• 한가지 주의 할 점은 아래 loader가 먼저 실행된다. css-loader가 먼저 실행되고 style-loader가 실행되는데 체인이 걸려 있는 것 처럼 동작한다 해서 이를 체이닝이라고 한다.

5. npx webpack으로 실행

자세한 내용은 아래 링크에서 확인 가능하다.

loader

babel loader

module: {
	rules: [
    	{
          test:/\.jsx?$/,
            // -> js와 jsx에 룰을 적용시키겠다
            
            loader: babel-loader,
             options: {
            presets: [
            ["@babel/preset-env",
            {
              targets: {
                browsers: ["last 2 chrome versions"],
              //크롬 최신버전과 하나 하위 버전까지 호환되도록 설정
            }
          }
          , "@babel/preset-react"],
          plugins: ["@babel/plugin-proposal-class-properties"],
          //babel loder 플러그인 (아래 플러그인과 다르다)
        },
                ]
              }
            ]
          }
        }

babel install

plugin

자동으로 bundle파일을 불러와서 html을 생성해주는 플러그인을 설치해보자

1. 아래 명령어로 플러그인을 설치

npm install --save-dev html-webpack-plugin

2. 플러그인을 require한다

const HtmlWebpackPlugin = require("html-webpack-plugin");

3. config파일에 아래와 같이 추가한다

  plugins:[
    new HtmlWebpackPlugin({ template: "./src/index.html" }))
  ]

• module이 끝난 시점에 추가. (위 babel플러그인과는 다르다)

4. npx webpack으로 실행

[참고] 몇가지 작성 예시

1. react 웹팩 설정

const path = require("path");

module.exports = {
  name: "wordrelay-setting",
  mode: "development",
  devtool: "eval",
  resolve: {
    extensions: [".js", ".jsx"],
  },

  entry: {
    app: ["./client"],
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        options: {
            presets: [
            ["@babel/preset-env",
            {
              targets: {
                browsers: ["last 2 chrome versions"],
              },
            },
            "@babel/preset-react",
          ],
          plugins: ["@babel/plugin-proposal-class-properties"],
        },
      },
    ],
  },

  output: {
    path: path.join(__dirname, "dist"),
    filename: "app.js",
  },
};

2. css로더 추가시

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: ["./src/js/index.js"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index_bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.js$/,
        include: path.resolve(__dirname, "src"),
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              [
                "@babel/preset-env",
                {
                  targets: {
                    browsers: ["last 2 versions", ">= 5% in KR"],
                  },
                },
              ],
            ],
          },
        },
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
};