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"
    }
  }