## 生产坏境构建
> 开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。
>
文档看[这里](https://doc.webpack-china.org/guides/production)
首先先创建一个生产环境的配置文件：
`touch webpack.config.js`
在`webpack.dev.config.js`的基础上先做以下几个修改~
1. 先删除`webpack-dev-server`相关的东西~
2. `devtool`的值改成`cheap-module-source-map`
3. 刚才说的`hash`改成`chunkhash`
~~~
'use strict'
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
entry: {
app: [
path.join(__dirname, 'src/index.js')
],
// 把react等库生成打包到vendor.hash.js里面去。
vendor: ['react', 'react-router-dom', 'redux', 'react-dom', 'react-redux']
},
// 输出到dist文件夹，输出文件名bundle.js
output: {
path: path.join(__dirname, './dist'),
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].js'
},
// 开发工具
devtool: 'cheap-module-source-map',
// 路径别名配置
resolve: {
alias: {
'@': resolve('src'),
pages: resolve('src/pages'),
components: resolve('src/components'),
router: resolve('src/router'),
actions: resolve('src/redux/actions'),
reducers: resolve('src/redux/reducers'),
}
},
/*src文件夹下面的以.js结尾的文件，要使用babel解析*/
/*cacheDirectory是用来缓存编译结果，下次编译加速*/
module: {
rules: [{
test: /\.js$/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, 'src')
}, {
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 8192
}
}]
}]
},
// 定义webpack插件
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, 'src/index.html')
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
})
]
}
~~~
然后在`package.json`增加打包脚本
~~~
"build": "webpack --config webpack.config.js"
~~~
然后执行`npm run build` ，看看`dist`文件夹是不是生成了我们发布要用的所有文件？
简单的正式环境部署脚本就是这样，接下来优化正式环境的配置文件。
