5#拆分webpack.config.js,区分开发环境和生产环境

我们将生产环境和开发环境做了略微区分，但是，请注意，我们还是会遵循不重复原则(Don't repeat yourself - DRY)，保留一个“通用”配置。为了将这些配置合并在一起，我们将使用一个名为 webpack-merge 的工具。通过“通用”配置，我们不必在环境特定(environment-specific)的配置中重复代码。

我们先从安装 webpack-merge 开始，并将之前指南中已经成型的那些代码再次进行分离：

npm install --save-dev webpack-merge

#product.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: {
    // output的name变量值就是main
    main: './src/entry.js'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: __dirname + "/src/index.html"
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader', 'css-loader'
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use:[{
          loader:'file-loader',
          options:{ // 这里的options选项参数可以定义多大的图片转换为base64
              limit:50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
              name: "[hash:8].[name].[ext]",
              publicPath:'./images',
              outputPath: "images/"
          }
        }]
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use:[{
          loader:'file-loader',
          options:{
              name: "[name].[ext]",
              publicPath:'../fonts',
              outputPath: "fonts/"
          }
        }]
      },
      {
        test: /\.(csv|tsv)$/,
        use: [
          'csv-loader'
        ]
      },
      {
        test: /\.xml$/,
        use: [
          'xml-loader'
        ]
      }
    ]
  }
};

#webpack.prod.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  devtool: 'source-map',
  plugins: [
    new UglifyJSPlugin({
      sourceMap: true
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
});

#webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './',
    port: '9999'
  }
});

#package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server  --config webpack.dev.js",
    "server": "node server.js",
    "dev": "npm start",
    "build": "webpack --config webpack.prod.js"
  }

npm run dev执行开发环境；
npm run build执行生产环境，发现报错：

ERROR in main.bundle.js from UglifyJs Unexpected token: name «ele», expected: punc «;»

很明显时let ele = document.createElement('div');这句出错了，怎么会出错了，原来是因为es6的原因，要用babel进行转换。
另外，为了证明我们的猜测，把let换成var，执行npm run build，没报错，说明是这个问题，没错了。