webpackメモ：開発モードの設定

Webpack には次の 2 つの開発モードがある development, production

開発モードの設定

mode プロパティに 'development', 'production', 'none' を設定する
これを設定すると process.env.NODE_ENV で値を取得できる様になる
それぞれの違いは mode-development にあるが、試してみた感じ production は出力が最適化され、console 系が消えるものと思われる
none を設定すると minify とかがされてない生のコードが出てくる

webpack.config.js

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

module.exports = {
+  mode: 'development', 
  entry: {
    index: './src/index.js',
    print: './src/print.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
  },
  plugins: [
     new HtmlWebpackPlugin({
       title: 'Webpack',
       template: 'index.html'
     })
  ]
};

開発モードの設定

webpack.config.js

関連記事