0
点赞
收藏
分享

微信扫一扫

(七)产品阶段的构建

 

本文以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​​看下结果

 

(七)产品阶段的构建_html_02

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​

 

(七)产品阶段的构建_css_03

image.png

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


举报

相关推荐

0 条评论