本文以webpack文章的demo為例，如果未閱讀上文，并且想了解完整過程請(qǐng)點(diǎn)擊回到上文
目前為止，我們已經(jīng)使用webpack構(gòu)建了一個(gè)完整的開發(fā)環(huán)境。但是在產(chǎn)品階段，可能還需要對(duì)打包的文件進(jìn)行額外的處理，比如說優(yōu)化，壓縮，緩存以及分離CSS和JS。
對(duì)于復(fù)雜的項(xiàng)目來說，需要復(fù)雜的配置，這時(shí)候分解配置文件為多個(gè)小的文件可以使得事情井井有條，以上面的例子來說，我們創(chuàng)建一個(gè)webpack.production.config.js的文件，它的配置在原始的webpack.config.js中修改了如下配置項(xiàng)。
因?yàn)閐evelopment是開發(fā)環(huán)境，production是生產(chǎn)環(huán)境，開發(fā)環(huán)境的一些配置在生產(chǎn)環(huán)境中不需要，所以需要將以下配置項(xiàng)刪除

devtool: 'eval-source-map',
devServer: {
    contentBase: "./common", // 本地服務(wù)器所加載的頁面所在的目錄
    historyApiFallback: true, // 不跳轉(zhuǎn)
    inline: true, // 實(shí)時(shí)刷新
    hot: true // 在這里配置hot
},
plugins: [
    ...
    new webpack.HotModuleReplacementPlugin() // 熱加載插件
]

修改后的配置如下

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: "production", // 4.0版本需要配置這項(xiàng)，并且產(chǎn)品階段需要把development改為production
    entry:  __dirname + "/app/main.js", // 之前提到的唯一入口文件
    output: {
        path: __dirname + "/common", // 打包后的文件存放的地方
        filename: "index.js" // 打包后輸出文件的文件名
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                },
                exclude: /node_modules/
            }, {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader",
                        options: {
                            modules: true, // 指定啟用css modules
                            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的類名格式
                        }
                    }, {
                        loader: "postcss-loader"
                    }
                ],
                exclude: /node_modules/
            }
        ]
    },

    plugins: [
        new webpack.BannerPlugin('版權(quán)所有，翻版必究'),
        new HtmlWebpackPlugin({
            //new 一個(gè)這個(gè)插件的實(shí)例，并傳入相關(guān)的參數(shù)
            template: __dirname + "/app/index.tmpl.html"
        })
    ]
}

在package.json中的scripts字段下配置build

{
  ...
  "scripts": {
    ...
    // 這里配置，注意此注釋在運(yùn)行項(xiàng)目是刪除
    "build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"
  },
  ...
}

注意:

• 如果是window電腦，build需要配置為"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"。
• 如果是Mac電腦，build可以直接配置為"build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"。

優(yōu)化插件

webpack提供了一些在發(fā)布階段非常有用的優(yōu)化插件，它們大多來自于webpack社區(qū)，可以通過npm安裝，通過以下插件可以完成產(chǎn)品發(fā)布階段所需的功能

• OccurenceOrderPlugin :為組件分配ID，通過這個(gè)插件webpack可以分析和優(yōu)先考慮使用最多的模塊，并為它們分配最小的ID
• UglifyJsPlugin：壓縮JS代碼（注意：webpack4已經(jīng)不支持使用webpack.optimize.UglifyJsPlugin壓縮配置了, 推薦使用 optimization.minimize ）
• ExtractTextPlugin：分離CSS和JS文件（注意：webpack4已經(jīng)不支持使用new ExtractTextPlugin("style.css")這種方式了）

OccurenceOrder和UglifyJS plugins都是內(nèi)置插件，你需要做的只是安裝其它非內(nèi)置插件
以下的配置只適用于webpack2，webpack4的配置請(qǐng)點(diǎn)擊這里

npm install --save-dev extract-text-webpack-plugin

在配置文件webpack.production.config.js中的plugins字段下配置如下：

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    ...
    plugins: [
        ...
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(), 
        new ExtractTextPlugin("style.css") 
    ]
}

在說最后一遍注意：需要導(dǎo)入
此時(shí)執(zhí)行npm run build可以看見被壓縮后的代碼如下：

image.png

緩存

緩存無處不在，使用緩存的最好方法是保證你的文件名和文件內(nèi)容是匹配的（內(nèi)容改變，名稱相應(yīng)改變）

webpack可以把一個(gè)哈希值添加到打包的文件名中，使用方法如下,添加特殊的字符串混合體（[name], [id] and [hash]）到輸出文件名前
我們來修改webpack.production.config.js文件

...
module.exports = {
    ...
    entry:  __dirname + "/app/main.js", // 之前提到的唯一入口文件
    output: {
        path: __dirname + "/common", // 打包后的文件存放的地方
        filename: "index-[hash].js" // 打包后輸出文件的文件名
    },
    ...
}

下面我們來運(yùn)行下npm run build看下結(jié)果

image.png

clean-webpack-plugin

添加了hash之后，會(huì)導(dǎo)致改變文件內(nèi)容后重新打包時(shí)，文件名不同而內(nèi)容越來越多，因此我們可以用clean-webpack-plugin。
安裝

npm install --save-dev clean-webpack-plugin

同樣需要在webpack.production.config.js文件中的plugins字段下配置

...
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = {
    ...
    plugins: [
        ...
        new CleanWebpackPlugin('common/*.*', {
            root: __dirname,
            verbose: true,
            dry: false
        })
    ]
}

注意：上面的clean-webpack-plugin配置在npm run build時(shí)可能會(huì)報(bào)clean-webpack-plugin only accepts an options object錯(cuò)，意思是新版clean-webpack-plugin只接受options一個(gè)對(duì)象，解決辦法是將參數(shù)全部刪除掉，不傳參數(shù)。

new CleanWebpackPlugin()

然后去除common文件中的殘余文件，并運(yùn)行 npm run build

image.png