开发react.js或者vue.js的时候，webpack常常作为他们的打包工具。当我们在本地开发完成之后，却发现webpack打包发布生产的时候总会遇到了一些问题。本文主要总结了一些webpack的生产环境所需要注意的一些地方。

what-is-webpack

修改package.json里面的配置

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --progress --inline --compress",
"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"
},

当你的电脑为windows系统时，就如上代码。
当你的电脑为unix系统时，"build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"。
dev是针对开发环境的配置，运行的时候只需npm run dev就行。
build是针对生产环境的配置，运行的时候输入npm run build

以下为webpack.production.config.js里面的配置

首先引入webpack生产环境所需依赖的包

'use strict';
var webpack = require("webpack");
var ExtractTextPlugin = require("extract-text-webpack-plugin"); //css单独打包
var HtmlWebpackPlugin = require('html-webpack-plugin');

html-webpack-plugin 的功劳就是它会自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)。

想具体了解html-webpack-plugin的童鞋可以去https://segmentfault.com/a/1190000007294861看看。

配置入口文件

entry: __dirname + '/src/entry.js', //唯一入口文件

这个entry这个参数也可以是一个数组，

entry:{
app:path.resolve(__dirname,'./src/app.js'),
vendor:['d3','react']
},

这个vendor的作用就是可以将一些第三方的js单独打包在vendor.js。像 react 这个库的核心代码就有 627 KB，这样和我们的源代码放在一起打包，体积肯定会很大。所以可以在 webpack 中设置，这样打包之后就会多出一个 vendor.js文件，之后在引入我们自己的代码之前，都要先引入这个文件，也算是一种解决webpack打包体积过大的一种方式。

配置输出文件的哈希值

带哈希值的文件名，可以帮助实现静态资源的长期缓存，在生产环境中非常有用。实现方式如下：

output: {
path: __dirname + '/build', //打包后的文件存放的地方
filename: '[name]-[hash].js', //打包后输出文件的文件名
},

module中的loaders的配置如开发环境即可

接下来就是重要的plugins的配置了

先贡献一下我的配置

plugins: [
new ExtractTextPlugin('main.css'),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify("production"),
},
}),
new HtmlWebpackPlugin({
template: "test.html",
showErrors:true,
inject: 'body',
}),
new webpack.HotModuleReplacementPlugin(),//热加载插件
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("[name]-[hash].css")
]

HtmlWebpackPlugin：根据template中的模板，并且自动引用webpack生成的js、css文件。
OccurenceOrderPlugin：通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
UglifyJsPlugin：压缩js代码
ExtractTextPlugin：css单独打包
[name]-[hash]到输出名前可以实现将哈希值添加到webpack打包的文件名中。
webpack.DefinePlugin：通过配置了DefinePlugin，那么这里面的标识就相当于全局变量，你的业务代码可以直接使用配置的标识。因此可以发现NODE_ENV是与package.json的NODE_ENV是一一对应的。

这篇文章可能有点长，很感谢各位童鞋阅读到这底下，文末福利在此献上。react,react,react牛逼~~

javaweb技术分享

欢迎萌妹子、糙汉子点赞订阅

好帅！

玖叶教程网

前端编程开发入门

干货:如何搭建webpack的生产环境（webpack构建）