【webpack】webpack 설정을 처음부터 정리해 본다②

webpack 학습 비망록.
【webpack】webpack 설정을 처음부터 정리해 본다 ① 계속.
상기에서는 기본 설정에 대해 썼기 때문에, 본 기사에서는 좀 더 실천적인 사용법에 대해 정리하고 싶다.

· 개발과 프로덕션으로 설정 파일을 분리
· 파일 최적화

개발 및 프로덕션으로 구성 파일 분리

개발용이라면, 빨리 빌드할 수 있도록 고려하거나,
프로덕션용이면 압축이나 출력 파일의 최적화를 우선하거나 등이 필요하게 됩니다.
그래서, 사용하는 플러그인등도 달라 오므로, 스스로 파일을 나누어 두면 관리가 쉬워진다.

기본은 공통 설정 파일, 개발용, 프로덕션용으로 각각 준비하는 형태.

우선, 공통 설정 파일을 읽어들이기 위한 플러그인을 인스톨한다.

npm add webpack-merge --dev

개발 파일

webpack.dev.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpackMerge = require('webpack-merge'); // これでwebpackの設定をマージする
const commonConf = require('./webpack.common'); // 共通設定ファイルを読み込む
const outputFile = '[name]'; // 出力ファイルを変数化 
const assetFile = '[name]'; //　上に同じく

// マージの第一引数に読み込む共通設定ファイル
module.exports = () => webpackMerge.merge(commonConf({outputFile, assetFile}), {
  mode: 'development', 
  devtool: 'source-map',
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: 'body' 
    }),
  ],
});

디버깅이 쉽도록 devtool: 'source-map' 로 소스 맵을 출력하도록 해 둡니다.

프로덕션 파일

webpack.prod.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpackMerge = require('webpack-merge'); 
const commonConf = require('./webpack.common'); 
const outputFile = '[name].[chunkhash]'; // 本番ではファイルにハッシュをつける
const assetFile = '[contenthash]'; // 上に同じく

module.exports = () => webpackMerge.merge(commonConf({outputFile, assetFile}), {
  mode: 'production', 
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: 'body'
    }),
  ],
});

공통 설정 파일

webpack.common.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 

// 変数化した部分をパラメーターとして渡す
module.exports = ({outputFile, assetFile}) => ({
  entry: {app: './src/app.js', sub: './src/sub.js'}, 
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: `${outputFile}.js` // 開発と本番で出力結果を変えたい部分を変数化
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: `${outputFile}.css`,
    }),
  ],

// 以下略

그리고는 이 기사 와 같이 package.json 로 scriptsコマンド 를 정의해 두면 실행할 때 편해진다.

파일 최적화하기

소위, 압축, 경량화를 한다 minify 를 할 수 있도록 한다.
css의 minify에는 optimize-css-assets-webpack-plugin를 새롭게 도입하고, html은 이미 도입이 끝난 html-webpack-plugin에 설정을 추가하는 것으로 실현이 가능해지고 있다.

javascript의 minify에는 TerserPlugin라는 플러그인을 사용하지만 productionモード에서 실행할 때는 기본적으로 사용되는 플러그인입니다. 그러나, css의 minify로 새롭게 도입하는 플러그인을 설정을 쓰기 위해(때문에).

그렇다면 필요한 플러그인을 설치하십시오.

npm add optimize-css-assets-webpack-plugin terser-webpack-plugin --dev

프로덕션 파일에 플러그인 로드 및 설정 추가

webpack.prod.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin'); // javascriptのminifyで使う
const OptimizeCssPlugin = require('optimize-css-assets-webpack-plugin'); // cssのminifyで使う
const webpackMerge = require('webpack-merge'); 
const commonConf = require('./webpack.common'); 
const outputFile = '[name].[chunkhash]';
const assetFile = '[contenthash]';

module.exports = () => webpackMerge.merge(commonConf({outputFile, assetFile}), {
  mode: 'production', 
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: 'body', 
      // htmlのminify設定を記述（デフォルトを上書き）
      minify: {
          collapseWhitespace: true, // 空白を取り除く
          removeComments: true, // コメントを取り除く
          removeRedundantAttributes: true, // 不要なAttributesを取り除く
          removeScriptTypeAttributes: true,
          removeStyleLinkTypeAttributes: true,
          useShortDoctype: true
      }
      // chunkFilename: '[name].[hash].css'
    }),
  ],
  // 各プラグイン読み込み
  optimization: {
    minimizer: [
      new TerserPlugin(), 
      new OptimizeCssPlugin() 
    ]
  }
});

이것으로 빌드시에 출력되는 파일을 mknify 할 수 있게 된다.
상기에서도 언급했지만, 개발 모드, 프로덕션 모드의 디폴트 설정에 대해서는 이하 공식을 참조.
모드 | webpack