3편

2편을 읽었더라면 대부분 벽에 막혔을거라 생각한다.

정리를 하는 나역시 webpack을 전부 이해하지 못했다.

공부를 하는 입장에서 다른 개발자들을 보며 나보다 잘하겠지라며 너무 주늑들지말자

뭐든 노력보단 재능이라고 생각한다. 하지만 필자는 노력으로 따라갈 수 있다는 주의다.

이 개념들을 처음 접하는 사람들보다 내가 코딩을 잘한다고 생각하지 않는다.

내가 그들보다 먼저 이 개념을 접했을뿐이다.

나는 처음 webpack.config.js 를 보면서 외계어 같다고 느꼈다.

정규표현식 조차 어지러웠고 이해하려해도 루시안처럼 벽을 못넘었다.

그래도 발버둥치면 어떻게든 이해할 수 있다.

그래서 3편에서는 webpack에 대하여 간략하게 설명하려고한다.

Webpack

앞선 게시물들은 Webpack의 개념, 환경설정파일 작성에 대해 글을 써봤는데

이번엔 환경설정파일에 들어가는 컨셉들에 대하여 정리를 해보자고한다.

크게 다섯가지의 컨셉이있다.

Entry / Output / Loader / Plugins / mode

[Entry]

종속성 그래프의 시작점을 Entry라고 한다.

Webpack은 config 파일을 통해 여러 설정을 할 수 있다.

entry 역시 config 파일에 파일 위치를 설정할 수 있으며, 여러개의 entry를 지정하는 것도 가능하다.

config 파일에 entry가 설정 되어 있지 않으면, 기본값은 ./src/idnex.js 이다.

module.export = {
  entry: './path/to/my/entry/file.js'
  /* 여러개의 entry 선언이 가능.
  entry: {
    index: './path/to/my/entry/index.js',
    file: './path/to/my/entry/file.js'
  } 
  */
}

webpack.config.js는 entry를 ./path/to/my/entry/file.js로 설정한 코드.

[Output]

output 설정으로 생성한 번들을 저장할 위치를 지정할 수 있다.

config 파일에 output이 설정되어 있지 않다면 기본 값은

./dist/main.js 임. 생성된 번들 파일들이 ./dist 디렉토리 밑으로 들어가게 된다.

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
  /* 여러개의 entry가 정의 되었을 때, 아래와 같이 설정이 필요합니다.
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  } 
  */  
};

output.path : 번들된 파일을 내보낼 디렉토리 위치를 지정한다. 
output.filename : 번들된 파일 이름을 지정한다.

[Loader]

webpack은 모든 파일을 모듈로 관리한다. 

하지만 webpack은 자바스크립트 파일만 읽어 올 수 있기 때문에, 스타일시트나

이미지등을 webpack이 읽을 수 있는 자바스크립트로 변경되야 한다. 

webpack이 이해 할 수 있는 모듈로 변경해 주는 역할을 Loader가 한다.

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

test : 변환 할 파일을 지정한다.
use : 변환 할 파일에 지정할 로더를 설정한다.

[Plugins]

plugin 종류

Loader은 모듈을 처리하지만, Plugin은 번들된 파일을 처리한다.

Plugin은 번들된 파일을 난독화 하거나, 압축하는데 사용

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

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

plugin을 사용하기 위해서는 require을  사용하여 plugins에 추가할 plugin을 가져와야 한다.

또한 new로 사용할 plugin의 인스턴스를 생성하여 plugins에 추가해 준다. 위의 예제 코드에서 사용한 HtmlWebpackPlugin은

생성된 번들 파일을 자동으로 로드( <script/>로 )한 HTML파일을 생성해 주는 plugin이다.

[Mode]

mode는 production, development, none 3가지 옵션이 존재.

----------------CODE----------------[production]
module.exports = {
  mode: 'production'
};

mode의 기본값은 production이다. 설정마다 내장된 최적화 옵션을 자동으로 설정하여 줌.

----------------CODE----------------[development]
// webpack.development.config.js
module.exports = {
  devtool: 'eval',
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.NamedChunksPlugin(),
    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
  ]
}
mode를 development로 설정했을 때, 설정되는 옵션은 위의 코드와 같다.

----------------CODE----------------[production]
// webpack.production.config.js
module.exports = {
  plugins: [
    new UglifyJsPlugin(/* ... */),
    new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
}
mode를 production로 설정했을 때, 설정되는 옵션은 위의 코드와 같다.

----------------CODE----------------[none]
// webpack.custom.config.js
module.exports = {
  plugins: [
  ]
}

mode를 none로 설정했을 때는 어떠한 옵션도 설정되지 않는다.