不同模式不同配置 - [: 'Webpack核心 - 表严肃讲Webpack' |cut:tmp.cut_limit :]

文件结构

.
├── index.js
├── package.json
├── tpl.html
├── webpack.config.js
└── ...

webpack.common.js

const Html = require('html-webpack-plugin');

module.exports = {
  entry  : './index.js',
  output : {
    filename : 'bundle.js',
    path     : __dirname + '/dist',
  },
};

webpack.dev.js

const Html  = require('html-webpack-plugin');
const merge = require('webpack-merge');

module.exports = merge(require('./webpack.common'), {
  mode    : 'development',
  devtool : 'inline-source-map',
  plugins : [
    new Html({
      template : './tpl.html',
    }),
  ],
});

webpack.prod.js

const Clean = require('clean-webpack-plugin');
const Html  = require('html-webpack-plugin');
const merge = require('webpack-merge');

module.exports = merge(require('./webpack.common'),
  {
    mode    : 'production',
    plugins : [
      new Clean([ './dist' ]),
      new Html({
        template : './tpl.html',
        minify   : {
          collapseWhitespace : true,
          removeComments     : true,
        },
      }),
    ],
  });

package.json

{
  "scripts": {
    "start": "npx webpack-dev-server --open --config webpack.dev.js",
    "build": "npx webpack --config webpack.prod.js"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.28.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14",
    "webpack-merge": "^4.1.5"
  }
  ...
}

tpl.html

<meta charset="UTF-8">
<h1>Yo</h1>