TIL_201002(webpack)

 

 

Plugins

Loader는 특정 유형의 모듈을 변환하는데 사용되지만 Plugin을 활용하여 번들 최적화, 에셋 관리 및 환경 변수 주입과 같은 광범위한 작업을 수행할 수 있습니다.

Plugin을 사용하려면 require() 해야하고 Plugins 배열에 추가해야 합니다. 대부분의 플러그인은 옵션을 변경하여 사용자 정의할 수 있습니다. 

const HtmlWebpackPlugin = require('html-webpack-plugin'); // npm을 통한 설치
const webpack = require('webpack'); // 내장 플러그인에 접근

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

위의 예를 보면 html-webpack-plugin으로 애플리케이션에 대한 HTML 파일을 생성되며 번들에 자동적으로 삽입됩니다.

 

 

Mode

mode 매개 변수를 development, production 또는 none으로 설정하여 webpack에 내장된 최적화를 활성화할 수 있습니다. 기본값은 production입니다.

module.exports = {
  mode: 'production'
};