(七)产品阶段的构建

 

本文以webpack文章的demo为例，如果未阅读上文，并且想了解完整过程请点击回到上文
目前为止，我们已经使用webpack构建了一个完整的开发环境。但是在产品阶段，可能还需要对打包的文件进行额外的处理，比如说优化，压缩，缓存以及分离CSS和JS。
对于复杂的项目来说，需要复杂的配置，这时候分解配置文件为多个小的文件可以使得事情井井有条，以上面的例子来说，我们创建一个webpack.production.config.js的文件，它的配置在原始的webpack.config.js中修改了如下配置项。
因为development是开发环境，production是生产环境，开发环境的一些配置在生产环境中不需要，所以需要将以下配置项删除

devtool: 'eval-source-map',
devServer: {
    contentBase: "./common", // 本地服务器所加载的页面所在的目录
    historyApiFallback: true, // 不跳转
    inline: true, // 实时刷新
    hot: true // 在这里配置hot
},
plugins: [
    ...
    new webpack.HotModuleReplacementPlugin() // 热加载插件
]

修改后的配置如下

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

module.exports = {
    mode: "production", // 4.0版本需要配置这项，并且产品阶段需要把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('版权所有，翻版必究'),
        new HtmlWebpackPlugin({
            //new 一个这个插件的实例，并传入相关的参数
            template: __dirname + "/app/index.tmpl.html"
        })
    ]
}

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

{
  ...
  "scripts": {
    ...
    // 这里配置，注意此注释在运行项目是删除
    "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"。

优化插件

webpack提供了一些在发布阶段非常有用的优化插件，它们大多来自于webpack社区，可以通过npm安装，通过以下插件可以完成产品发布阶段所需的功能

• OccurenceOrderPlugin :为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
• UglifyJsPlugin：压缩JS代码（注意：webpack4已经不支持使用webpack.optimize.UglifyJsPlugin压缩配置了, 推荐使用 optimization.minimize ）
• ExtractTextPlugin：分离CSS和JS文件（注意：webpack4已经不支持使用new ExtractTextPlugin("style.css")这种方式了）

OccurenceOrder和UglifyJS plugins都是内置插件，你需要做的只是安装其它非内置插件
以下的配置只适用于webpack2，webpack4的配置请点击这里

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") 
    ]
}

在说最后一遍注意：需要导入
此时执行npm run build可以看见被压缩后的代码如下：

 

image.png

 

缓存

缓存无处不在，使用缓存的最好方法是保证你的文件名和文件内容是匹配的（内容改变，名称相应改变）

webpack可以把一个哈希值添加到打包的文件名中，使用方法如下,添加特殊的字符串混合体（[name], [id] and [hash]）到输出文件名前
我们来修改webpack.production.config.js文件

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

下面我们来运行下npm run build看下结果

 

image.png

 

clean-webpack-plugin

添加了hash之后，会导致改变文件内容后重新打包时，文件名不同而内容越来越多，因此我们可以用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时可能会报clean-webpack-plugin only accepts an options object错，意思是新版clean-webpack-plugin只接受options一个对象，解决办法是将参数全部删除掉，不传参数。

new CleanWebpackPlugin()

然后去除common文件中的残余文件，并运行 npm run build

 

image.png

每次打包都会清除之前的打包文件然后重新去生成打包文件
关于clean-webpack-plugin的详细使用可参考这里