webpack-merge的使用教程

npm install --save-dev webpack-merge

 webpack-demo
  |- package.JSON
  |- package-lock.json
 - |- webpack.config.js // 删除全局webpack配置
 + |- webpack.common.js // 新建公共配置
 + |- webpack.dev.js	// 新建开发环境配置
 + |- webpack.prod.js	// 新建生产环境配置
  |- /dist
  |- /src
    |- index.js
    |- math.js
  |- /node_modules

const path = require('path');
// 该插件将为你生成一个 HTML5 文件， 
// 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
 const htmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: {
     app: './src/index.js',
   },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Production',
     }),
   ],
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
     clean: true,
   },
 };

// 引入webpack-merge
const { merge } = require('webpack-merge');
// 引入公共配置
 const common = require('./webpack.common.js');
// 第一个参数是公共配置 第二个参数是环境里的配置
 module.exports = merge(common, {
   mode: 'development',
   devtool: 'inline-source-map',
   devServer: {
     static: './dist',
   },
 });

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

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