webpackを用いたフロントエンド開発環境の構築その3

〜webpackの設定ファイルを分割する(共通・開発・本番)〜

↓YOUTUBEでも解説しています↓

webpack-mergeが必要なので、インストール

npm install --save-dev webpack-merge@5.0.9

webpackの設定ファイルを本番用、共通、開発用の３つに分ける

// webpack.common.js
const path = require("path");

module.exports = {
  entry: "./src/js/app.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "js/bundle.js",
  },
};

//  webpack.dev.js
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

module.exports = merge(commonConfig, {
  mode: 'development',
  watch: true, 
});

//  webpack.prod.js
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.js');

module.exports = merge(commonConfig, {
  mode: 'production',
});

それぞれの設定ファイル(開発用・本番用)に応じたnpm scriptsを用意する(5〜8行目)

webpack コマンドはデフォルトでは webpack.config.js があるとその設定を使用しますが、–config オプションを指定して別の設定ファイルを利用することが可能です

//package.json

{
  "name": "webpack-practice",
  "scripts": {
    "dev": "webpack --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-merge": "^5.0.9"
  },
  "dependencies": {
    "jquery": "^3.5.1",
  }
}

それぞれ以下で実行することが可能

npm run dev

watchモードで修正を監視

bundle.jsは圧縮されない

npm run build

bundle.jsが圧縮される

※mode(productionとdev)に関する詳細