(七)产品阶段的构建

本文以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")这种方式了)

OccurenceOrderUglifyJS 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的详细使用可参考这里