## 配置
*開發環境(development)* 和 *生產環境(production)* 的構建目標差異很大。在*開發環境*中，我們需要具有強大的、具有實時重新加載(live reloading)或熱模塊替換(hot module replacement)能力的 source map 和 localhost server。而在*生產環境*中，我們的目標則轉向于關注更小的 bundle，更輕量的 source map，以及更優化的資源，以改善加載時間。由于要遵循邏輯分離，我們通常建議為每個環境編寫**彼此獨立的 webpack 配置**。
雖然，以上我們將*生產環境*和*開發環境*做了略微區分，但是，請注意，我們還是會遵循不重復原則(Don't repeat yourself - DRY)，保留一個“通用”配置。為了將這些配置合并在一起，我們將使用一個名為 [`webpack-merge`](https://github.com/survivejs/webpack-merge) 的工具。通過“通用”配置，我們不必在環境特定(environment-specific)的配置中重復代碼。
我們先從安裝 `webpack-merge` 開始，并將之前指南中已經成型的那些代碼再次進行分離：
```
yarn add webpack-merge -D
```
新建 `conf/webpack.prod.js`
```js
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const webpackBaseConf = require('./webpack.base.js');
module.exports = merge(webpackBaseConf, {
plugins: [
new UglifyJSPlugin({
sourceMap: true
})
]
});
```
新建 `conf/webpack.dev.js`
```js
const path = require('path');
const merge = require('webpack-merge');
const webpackBaseConf = require('./webpack.base.js');
module.exports = merge(webpackBaseConf, {
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, "..", "dist"), // 服務器根目錄
compress: true, // 壓縮
port: 9000, // 監聽端口
open: true, // 直接使用瀏覽器打開
hot: true
}
});
```
修改 `conf/webpack.base.js`
```js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const config = {
entry: {
main: './src/main.js',
vendor: [
'lodash'
]
},
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: '[name].[hash].js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'url-loader'
]
}
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '..'),
exclude: ['manifest.json'],
verbose: true,
dry: false
}),
new HtmlWebpackPlugin({
title: 'Output Management',
filename: 'index.html',
template: 'index.html'
}),
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'static/test.html', //
template: 'src/static/test.html'
}),
new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest'
}),
new ManifestPlugin()
]
};
module.exports = config;
```
修改 `package.json`
```json
"scripts": {
"start": "webpack-dev-server --config conf/webpack.dev.js",
"build": "webpack --config conf/webpack.prod.js",
"watch": "webpack --watch --config conf/webpack.dev.js",
"server": "node conf/server.js",
"push": "npm run build && git add * && git commit -am 0 && git push origin master"
}
```
