webpack生產環境和開發環境的配置

最近在做公司遊戲預約頁面的時候，在配置webpack的時候，忽略了生產模式切換，導致開發過程中有些痛苦，當改動樣式或者某個插件配置時，本地server要等待編譯很久才生效。用了很久的webpack做開發，之前一直沒太在意，現在特地整理下，也爲以後做項目更加規範吧。

在配置前，還是先了解下生產環境和開發環境有哪些區別，知道這些後，才知道我們到底要做些什麼

開發環境(development)和生產環境(production)的構建目標差異很大。在開發環境中，我們需要具有強大的、具有實時重新加載(live reloading)或熱模塊替換(hot module replacement)能力的 source map 和 localhost server。而在生產環境中，我們的目標則轉向於關注更小的 bundle，更輕量的 source map，以及更優化的資源，以改善加載時間。由於要遵循邏輯分離，我們通常建議爲每個環境編寫彼此獨立的 webpack 配置

雖然，以上我們將生產環境和開發環境做了略微區分，但是，請注意，我們還是會遵循不重複原則(Don't repeat yourself - DRY)，保留一個“通用”配置。爲了將這些配置合併在一起，我們將使用一個名爲 webpack-merge 的工具。通過“通用”配置，我們不必在環境特定(environment-specific)的配置中重複代碼

那麼，開始配置文件的編寫。這裏，我們把公共的配置，放到webpack.common.js中，生產環境配置放到webpack.prod.js中，開發環境配置放到webpack.dev.js中。

公共配置（webpack.common.js）中，我們常用的插件，入口、輸出文件、模塊配置

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
    entry: {
        app: './src/index.js'
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Production'
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

生產配置（webpack.prod.js）中配置"source-map"，生產環境下的插件，然後合併

const merge = require('webpack-merge');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common');
 
module.exports = merge(common, {
    devtool: 'source-map',
    plugins: [
        new UglifyJSPlugin({
            sourceMap: true
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ]
})

注意這裏使用了webpack.DefinePlugin()插件，來指定環境。這是因爲，許多 library 將通過與 process.env.NODE_ENV 環境變量關聯，以決定 library 中應該引用哪些內容。例如，當不處於生產環境中時，某些 library 爲了使調試變得容易，可能會添加額外的日誌記錄(log)和測試(test)。其實，當使用 process.env.NODE_ENV === 'production' 時，一些 library 可能針對具體用戶的環境進行代碼優化，從而刪除或添加一些重要代碼

開發環境（webpack.dev.js）中配置"inline-source-map"、本地服務器，然後合併公共配置

const merge = require('webpack-merge');
const common = require('./webpack.common.js');
 
module.exports = merge(common, {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    }
})

現在，我們可以在package.json中爲生產和開發模式配置單獨的運行腳本，