7.生产环境构建

配置

• 我们通常建议为每个环境(开发/生产)编写彼此独立的 webpack 配置
• npm install --save-dev webpack-merge
• webpack.common.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //HTML打包
const ExtractTextPlugin = require("extract-text-webpack-plugin"); //分离文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //

module.exports = {
	entry: {
		app: './src/index.js'
	},
	module: {
		rules: [{
			test: /\.css$/,
			use: ExtractTextPlugin.extract({
				fallback: "style-loader",
				use: "css-loader"
			})
		}]
	},
	plugins: [
		new CleanWebpackPlugin(['dist']),
		new HtmlWebpackPlugin({
			title: 'Production'
		}),
		new ExtractTextPlugin("styles.css"),
	],
	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 webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');  //压缩JS
const OptimizeCssplugin = require('optimize-css-assets-webpack-plugin'); // 压缩css
const common = require('./webpack.common.js');

module.exports = merge(common, {
  plugins: [
    new UglifyJsPlugin({
		sourceMap: true
    }),
	new OptimizeCssplugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
});

NPM Scripts

• package.json

{
  "name": "hello-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js "
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.17",
    "css-loader": "^0.28.4",
    "csv-loader": "^2.1.1",
    "express": "^4.15.3",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.29.0",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "style-loader": "^0.18.2",
    "uglifyjs-webpack-plugin": "^1.0.0",
    "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"
  }
}

Minification

• 虽然 UglifyJSPlugin 是代码压缩方面比较好的选择，但是还有一些其他可选择项。以下有几个同样很受欢迎的插件
  • cnpm i -D uglifyjs-webpack-plugin@1.0.0
  • BabelMinifyWebpackPlugin
  • ClosureCompilerPlugin

source map

• 在生产环境中启用 source map，因为它们对调试源码(debug)和运行基准测试(benchmark tests)很有帮助
• 虽然有如此强大的功能，然而还是应该针对生成环境用途，选择一个构建快速的推荐配置（具体细节请查看 devtool）
• 避免在生产中使用 inline-*** 和 eval-***，因为它们可以增加 bundle 大小，并降低整体性能。

new UglifyJSPlugin({
  sourceMap: true
})

指定环境

• 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, {
    devtool: 'source-map',
    plugins: [
      new UglifyJSPlugin({
        sourceMap: true
-     })
+     }),
+     new webpack.DefinePlugin({
+       'process.env.NODE_ENV': JSON.stringify('production')
+     })
    ]
  });

• src/index.js

+ if (process.env.NODE_ENV !== 'production') {
+   console.log('Looks like we are in development mode!');
+ }

Split CSS

• ExtractTextPlugin

CLI 替代选项

• --optimize-minimize 标记将在后台引用 UglifyJSPlugin