16 Webpack 开发与生产配置分离

如下，我们将开发与生产的 webpack 配置分离

 

配置

我们先从安装 webpack-merge 开始：

npm install --save-dev webpack-merge

project

  webpack-demo

  |- package.json

- |- webpack.config.js

+ |- webpack.common.js

+ |- webpack.dev.js

+ |- webpack.prod.js

  |- /dist

  |- /src

    |- index.js

    |- math.js

  |- /node_modules

 

webpack.common.js

+ const path = require('path');

+ const CleanWebpackPlugin = require('clean-webpack-plugin');

+ const HtmlWebpackPlugin = require('html-webpack-plugin');

+

+ module.exports = {

+   entry: {

+     app: './src/index.js'+   },

+   plugins: [

+     new CleanWebpackPlugin(['dist']),

+     new HtmlWebpackPlugin({

+       title: 'Production'

+     })

+   ],

+   output: {

+     filename: '[name].bundle.js',

+     path: path.resolve(__dirname, 'dist')

+   }

+ };

 

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'

+   }

+ });

 

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()

+   ]

+ });

 

NPM Scripts

现在，我们把 scripts 重新指向到新配置。我们将 npm start 定义为开发环境脚本，并在其中使用 webpack-dev-server，将 npm run build 定义为生产环境脚本：

package.json

  {

    "name": "development",

    "version": "1.0.0",

    "description": "",

    "main": "webpack.config.js",

    "scripts": {

-     "start": "webpack-dev-server --open",

+     "start": "webpack-dev-server --open --config webpack.dev.js",

-     "build": "webpack"

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

    }

  }

随意运行这些脚本，然后查看输出结果的变化