## 生產壞境構建
> 開發環境(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`文件夾是不是生成了我們發布要用的所有文件？
簡單的正式環境部署腳本就是這樣，接下來優化正式環境的配置文件。
