nodejs

nodejs-webpack

webpack

모듈 번들러

install

1
$ npm install -g webpack

set env

1
$ npm install babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 --save-dev
2
$ npm install react react-dom --save

set config

index.js가 있는 프로젝트의 루트 폴더에 이 파일을 만들어야 한다.
example

1
# webpack.config.js
2
const path = require('path')
3
module.exports = {
4
    // mode: development, production, none
5
    mode: 'none',
6
    // 클라이언트의 시작파일을 지정 모든 의존관계 트리를 자동으로 빌드해준다.
7
    entry: "./src/index.js", 
8
    // dist/assets/bundle.js라는 자바스크립트 파일에 출력하라고 지정
9
    output: { 
10
        path: path.join(__dirname, "dist/assets"),
11
        filename: "bundle.js"
12
    },
13
    module: {
14
        // 모듈에 따라 실행히야 하는 로더의 룰을 구성
15
        rules: [
16
            {
17
                // 처리해야할 파일의 정규식
18
                test: /\.js$/,
19
                // 제외할 정규식
20
                exclude: /(node_modules)/,
21
                loader: 'babel-loader',
22
                query: {
23
                    presets: ['env', 'stage-0', 'react']
24
                }
25
            }
26
        ]
27
    }
28
}

run

웹팩은 정적으로 실행된다.
보통 앱을 서버에 배포하기 전에 번들을 만든다.

1
$ webpack

mode

mode: development, production, none

  • in config
    1
    module.exports = {
    2
      mode: 'production'
    3
    };
  • pass by CLI
    1
    webpack --mode=production

    source map

1
const path = require('path')
2
3
module.exports = {
4
    mode: 'production',
5
    entry: "./src/index.js",
6
    output: {
7
        path: path.join(__dirname, "dist/assets"),
8
        filename: "bundle.js",
9
        // 소스 맵 이릅
10
        sourceMapFilename: 'bundle.map'
11
    },
12
    //소스 맵 사용
13
    devtool: '#source-map',
14
    module: {
15
        rules: [
16
            {
17
                test: /\.js$/,
18
                exclude: /(node_modules)/,
19
                loader: 'babel-loader',
20
                query: {
21
                    presets: ['env', 'stage-0', 'react']
22
                }
23
            }
24
        ]
25
    }
26
}
Share