13、webpack构建--开发生产构建配置文件分离

1）配置的逻辑分离

由于开发环境和生产环境对于构建的结果差异，如生产需要热加载、source-map和localhost server；而生产环境则需要更小bundle、更轻量的source map、更优化的资源以及改善加载时间。由于遵循逻辑分离，建议不同环境使用不同的配置文件。

但是共同的代码没必要在不同的配置里重复去书写，这里遵循不重复原则，编写一个通用配置，通过插件webpack-merge去合并到一起。

2）安装webpack-merge

npm install webpack-merge --save-dev

3）工程目录结构如下

 webpack-demo
  |- package.json
  |- webpack.common.js
  |- webpack.dev.js
  |- webpack.prod.js
  |- /dist
  |- /src
    |- index.js
    |- math.js
  |- /node_modules

4）通用配置文件webpack.common.js

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

moudle.exports = {
    entry:{
        app:'./src/index.js';
    },
    plugins:{
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title:'production'7
        })
    },
    output:{
        filename:'[name].bundle.js',
        path:path.resolve('__dirname', 'dist')
    }
}

5）开发配置文件webpack.dev.js

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
   devtool: 'inline-source-map',
   devServer: {
     contentBase: './dist'
   }
});

6）开发配置文件webpack.prod.js

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

module.exports = merge(common, {
  plugins: [
     new UglifyJSPlugin()
   ]
});

7）更改package.json，分别加入生产和开发的构建方式

{
    "name": "webpack-demao",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
     "start": "webpack-dev-server --open --config webpack.dev.js",
     "build": "webpack --config webpack.prod.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^0.1.17",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "express": "^4.15.3",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^3.0.0",
      "webpack-dev-middleware": "^1.12.0",
      "webpack-dev-server": "^2.9.1",
      "webpack-merge": "^4.1.0",
      "xml-loader": "^1.2.1"
    }
  }