在之前的（一），（二）中我们介绍了命令行工具的搭建，以及开发环境的搭建，包括模块热更新，集成react开发环境，webpack-dev-server的集成，等等，但是项目开发完了，总是要上线的，那么怎么将我们开发好的项目部署上线呢?没错，还是得需要使用webpack
为什么将webpack配置拆分？
在（二）中，我们特意将webpack.config.js拆分成了webpack.base.config.js，webpack.prod.config.js和webpack.dev.config.js，原因就是我们使用webpack工具在我们开发，部署上线这两个阶段要达到的目的是不同的。
- 开发阶段：我们在开发阶段需要开启sourceMap来调试我们的代码，并且使用热更新插件来省去修改后的刷新操作，而且在前后端分离的项目，我们需要使用webpack-dev-server插件来帮我们做本地代理，来解决跨域问题，调通后台接口
- 部署上线阶段：我们不需要开启sourceMap，我们希望我们的代码越少越好（压缩的越厉害越好），并尽可能做到css和js分离，能提取公共的模块，减少main.js的体积，跨域问题可能需要使用nginx做反向代理或者其他办法来解决。
webpack.prod.config.js
修改我们的webpack.prod.config.js，其实我们之前已经指定了文件的入口，出口，和一些loaders，已经具备了打包的基本功能，我们修改webpack.prod.config.js，先试一试没有做任何操作之前的效果
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.config.js');
module.exports = merge(baseWebpackConfig, {});
修改pakage.json文件，指定打包命令为 npm run build
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config build/webpack.prod.config.js --mode=production",
"dev": "webpack-dev-server --open --config build/webpack.dev.config.js --mode=development"
},
可以看到，现在dist文件夹中有两个文件index.html，和main.js，其中js为128kb
打包优化
引入webpack-bundle-analyzer插件分析体积
安装插件
npm install webpack-bundle-analyzer --save-dev
使用插件
const merge = require('webpack-merge');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const baseWebpackConfig = require('./webpack.base.config.js');
// 使用merge将原来webpack.base.config.js中的配置读取到
module.exports = merge(baseWebpackConfig, {
mode: 'production',
plugins: [
new BundleAnalyzerPlugin(),
],
});
运行npm run build之后，这个插件会生成一个可视化页面，来分析文件的主要模块有那些
使用uglifyjs来压缩js代码
在webpack4中，只要指定了mode为production，就会自动压缩代码了，可以看到main.xxx.js都是压缩过的代码，问题不大。这一步可以省略…
npm install uglifyjs-webpack-plugin --save-dev
使用mini-css-extract-plugin来将css单独提取出来
不知道大家有没有发现，我们现在的css和js是打包到一起的，打开main.js，你会发现会有css的内容。这样做会导致 JavaScript 文件变大并导致加载网页时间变长，所以我们需要使css实现单独打包
npm install mini-css-extract-plugin --save
由于mini-css-extract-plugin使用的时候需要，需要将style-loader改成插件的loader，所以这个插件使用起来毕竟麻烦，需要在webapck.base.config.js中判断环境，更具不同的环境替换loader，完成代码如下
webpack.base.config.js
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.argv.indexOf('--mode=production') === -1;
const baseConfig = {
entry: './src/index.js',
output: {
filename: '[name]-[hash:8].js',
path: path.resolve(__dirname, '../dist'),
},
mode: 'development',
plugins: [
new HTMLWebpackPlugin({
// 用于生成的HTML文档的标题
title: 'Webpack 开发环境配置',
// webpack 生成模板的路径
template: './src/index.html',
}),
new CleanWebpackPlugin(),
],
module: {
rules: [
{
test: /\.js/,
include: path.resolve(__dirname, '../src'),
use: ['babel-loader', 'eslint-loader'],
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader',
],
},
],
},
};
if (devMode) {
baseConfig.module.rules.push({
test: /\.css$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
// 开启 sourceMop
sourceMap: true,
},
},
],
});
baseConfig.module.rules.push({
test: /\.less$/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader', // translates CSS into CommonJS
},
{
loader: 'less-loader', // compiles Less to CSS
},
],
});
} else {
baseConfig.module.rules.push({
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
// 开启 sourceMop
sourceMap: true,
},
},
],
});
baseConfig.module.rules.push({
test: /\.less$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader', // translates CSS into CommonJS
},
{
loader: 'less-loader', // compiles Less to CSS
},
],
});
}
module.exports = baseConfig;
执行 npm run build,会发现，css已经被单独一个文件打包出来了
使用optimize-css-assets-webpack-plugin来压缩css文件
安装 optimize-css-assets-webpack-plugin
npm install optimize-css-assets-webpack-plugin --save-dev
使用：optimization和plugins同级（这里的文件内容毕竟少，所以优化的效果很不明显）
optimization: {
// 将分离出来的css文件压缩
minimizer: [
new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
discardComments: { removeAll: true }, // 移除注释
},
}),
],
},
使用splitChunks属性来提取公共模块
在项目中，比如我们的AntD在很多模块中都使用了，那么将这个AntD模块单独抽出来，打包成一个js，可以减少main.js的体积（类似于我们把复用性高的模块做成组件）
minimizer: ...
splitChunks: {
chunks: 'all', // 代码块类型 必须三选一： "initial"（初始化） | "all"(默认就是all) | "async"（动态加载）
minSize: 0, // 最小尺寸，默认0
minChunks: 1, // 最小 chunk ，默认1
maxAsyncRequests: 1, // 最大异步请求数， 默认1
maxInitialRequests: 1, // 最大初始化请求书，默认1
name: () => {}, // 名称，此选项课接收 function
cacheGroups: { // 缓存组会继承splitChunks的配置，但是test、priorty和reuseExistingChunk只能用于配置缓存组。
priority: '0', // 缓存组优先级,即权重 false | object |
vendor: { // key 为entry中定义的 入口名称
chunks: 'initial', // 必须三选一： "initial"(初始化) | "all" | "async"(默认就是异步)
test: /react|lodash/, // 正则规则验证，如果符合就提取 chunk
name: 'vendor', // 要缓存的 分隔出来的 chunk 名称
minSize: 0,
minChunks: 1,
enforce: true,
reuseExistingChunk: true, // 可设置是否重用已用chunk 不再创建新的chunk
},
},
},
下面，附一张真实项目，分chunks后的结果，分离出165KB的公共内容
使用compression-webpack-plugin插件压缩成gzip格式
看了网上的优化方案，将自己要部署的代码优化后还有3MB的大小，已无计可施！我们可以点击可视化界面的Gizpped，发现我们使用gzip格式的部署代码只有不到800KB（虽然还是有点大）
安装compression-webpack-plugin插件
npm install compression-webpack-plugin --save-dev
webpack.prod.config.js
plugins: [
...
new CompressionWebpackPlugin({
test: new RegExp('\\.(js|css)$'), // 压缩 js 与 css
filename: '[path].gz[query]',
cache: true,
algorithm: 'gzip',
deleteOriginalAssets: false,
compressionOptions: {
level: 6,
},
}),
]
执行npm run build,可以看到我们已经将js文件压缩成.gzip格式了，体积大大减小…
最后，有同学就会问了，那么这样格式的文件，我浏览器怎么访问呢？不要着急，我们先来看一张图
我们可以看到，服务器返回的js文件类型实际上是gzip格式的，这说明我们浏览器是支持接受gzip格式的文件，并且帮助我们自动解压的。在服务器端，我们以nginx为例，设置gzip on就可以正常返回gzip格式的文件
总结
在（一）文章中主要讲了命令行工具的搭建，并且将命令行工具上传到npm官网
在（二）文章中主要讲了dev环境的搭建，以及一些插件的集成，热更新，eslint等来帮助我们提高开发效率
在（三）文章中主要讲了prod环境的搭建，优化
完整配置文件参考 https://github.com/zaoren/shuju-zaoren-cli/tree/Tag1.0.0/config
扫一扫
891
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
