コンテンツにスキップ

3. 開発モードの設定

最終更新日: 2021-11-08

この記事は2. バンドル内容を HTML に注入するの続き

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

開発モードの設定

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

webpack.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
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'
     })
  ]
};