本文以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的详细使用可参考这里
网友评论