Webpack发布策略

前言

前一篇文章 Webapck基础搭建 咱们了解了一下 Webpack 的基本配置,已经可使用它简单的搭建一个打包环境。可是，Webpack 的功能不只仅就这么简单，否则也不会成为前端最流行的模块化打包工具

那么，它还有哪些咱们须要了解的功能呢，下面，咱们一点点去了解一下吧

若是文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过

好了，废话很少说，如下 ↓

准备工做

既然咱们要使用 Webpack 进行项目打包，那么首先咱们确定须要有一个这样的项目。

了解了 Webpack 的基本配置，咱们就能够试着搭建一个简单的 vue-cli 了，根据官网须要的 loader 还有一些简单的插件，以及对 .babelrc 文件的修改，仍是比较容易的

这里踩到的坑：

• babel-loader 升级到 8.x 版本以后可能须要简单的配合，为了便捷，因此 demo 中直接使用的7.x版本
• vue-loader 在升级到 5.x 以后 必须引入 vue-loader/lib/plugin 插件，不然会报错

具体 DOME 请 点击这里，查看配置

分离第三方包

项目基本配置完成，接下来咱们先打包一次看看效果：

若是先前配置没有问题，基本就是上图的样子

从打包好的文件中咱们能够看到有 html 页面，字体文件以及 bundle.js 文件( Webapck4 以后，会有默认分包策略，因此会出现好几个 bundle.js 文件)

不难看出，其中 bundle.js 文件的体积仍是比较大的，如今，咱们首先将以前项目引入的第三方包分离出来

分离第三方包在 Webapck4.x 版本以前，咱们都是使用 CommonsChunkPlugin 去作分离，进入 webpack4.x 版本，这种方式被移除，至于二者之间有怎样的区别，小伙伴们能够在官网查看详细信息

如今进行第三方包的分离工做：

在 webpack4.x 以前的时代，咱们须要指定须要分离的第三方包、指定出口、添加插件这三个步骤

如今咱们须要作的：

• 指定出口

output: {
    path: path.resolve(__dirname, './dist'),
    // 指定分离出来包的名称
    filename: 'js/[name].js'
},

• 引入配置

optimization:{   
    splitChunks:{
        cacheGroups:{//缓存组，一个对象。它的做用在于，能够对不一样的文件作不一样的处理
            commonjs:{
                name:'vender',        //输出的名字（提出来的第三方库）
                test: /\.js/,        //经过条件找到要提取的文件
                chunks:'initial'    //只对入口文件进行处理
            }
        }
    }
}

至于 optimization 这个对象的配置，小伙伴们能够 点击这里 查看完整配置说明

至此，咱们在打包一次看看效果：

很明显，已经成功分离出了第三方代码

图片字体的处理

如今，咱们已经成功分离出了 js 文件，再来看咱们打包出来的 dist 目录。能够看到，咱们所打包出来的文件中还有不少字体文件，图片是看不到的

因为咱们使用 url-loader 对图片进行了处理，因此在默认状况下，全部的图片都会转化为 base64 的格式保存在咱们的 bundle.js 文件当中

url-loader 与 file-loader 所实现的功能基本是相同的，能够说 url-loader 是 file-loader 的一个拓展，咱们能够在 url-loader 的配置选项当中设置文件大小，从而使图片按照大小转换成 base64 的格式或者直接以路径引用

因此，咱们能够在 url-laoder 中添加一个这样的限制

{ test: /\.(jpg|png|gif|jpeg|bmp)$/, use: [{
    loader: 'url-loader',
    options: {
        // 限制图片大小 10240 表示10kb
        limit: 10240
        }
    }]
},

这样设置以后，全部小于 10kb 的图片仍是会以 base64 的格式添加，大于 10kb 的则会以路径的形式引用

再来看咱们的 dist 文件夹里面的内容，里面的内容分布不是很明显。因此接下来，咱们将它们分类到不一样的文件夹当中去

{ test: /\.(jpg|png|gif|jpeg|bmp)$/, use: [{
    loader: 'url-loader',
    options: {
        // 限制图片大小 10240 表示10kb
        limit: 10240,
        name: 'images/img-[hash:5].[ext]'
    }
}]},
{ test: /\.(svg|eot|ttf|woff|woff2)$/, use: [{
    loader: 'file-loader',
    options: {
        name: 'font/[hash:7].[ext]'
    }
}]}

添加到文件夹中的方式都是同样，仍是在 options 选项中添加 name 属性，其中 ext 表示以文件以前的格式后缀命名

接下来，咱们从新打包一次：

是否是美观了不少

分离样式文件

在 Webpack4.x 以前，咱们都是使用 extract-text-webpack-plugin 这个插件来分离样式文件

自从 webpack4 以后，官方推荐的分离插件就是 mini-css-extract-plugin

首先，咱们须要下载这个插件

npm install --save-dev mini-css-extract-plugin

在webpack的配置文件中是这样的

// 第一步：引入插件，在plugins中使用

new MiniCssExtractPlugin({
    filename: 'css/[name].css', // 打包文件名称
    ignoreOrder: false // 移除警告
})

// 第二步：修改style-loader 为 MiniCssExtractPlugin.loader

{ test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader'] },
{ test: /\.(sass|scss)$/, use: [MiniCssExtractPlugin.loader,'css-loader', 'sass-loader'] },

这样，咱们就已经成功分离出了样式文件

按需加载

咱们都知道，利用 webpack 的模块化功能，就能够实现模块的按需加载，那么，咱们该怎么在项目中作一些配置呢

webpack4.x 以上版本实现了默认分包策略，也就是说在默认状况下，webpack 会智能区分咱们的模块，实现按需加载的功能

默认分包策略具备如下规则：

• 新的 chunk 是否被共享或者是来自 node_modules 的模块
• 新的 chunk 体积在压缩以前是否大于 30kb
• 按需加载 chunk 的并发请求数量小于等于 5 个
• 页面初始加载时的并发请求数量小于等于 3 个

因为这样的一些内置规则，也就是为何咱们在前面的项目打包过程当中会出现 2.js、3.js 这样的文件

拿咱们如今这个 Demo 来讲，对于这样的文件名称，很明显不是那么友好。因此，咱们能够自定义一下这些文件名称，最简单的方式：

在 router 定义文件中：

使用 webpackChunkName 关键字直接定义名称就能够了,这样，当咱们从新打包就能够看到定义的名称已经显示在 dist 文件夹当中了

其余

如今咱们已经完成了 webapck 打包发布的基本功能，但是咱们可能会发现这样一个问题：就是咱们每次在打包以前都要手动删除掉 dist 文件夹。很明显，不友好

咱们可使用 clean-webpack-plugin 来删除它

插件的使用方式也是很简单：

• 下载 clean-webpack-plugin 插件
• 在配置文件中引入

const {CleanWebpackPlugin} = require('clean-webpack-plugin')

这里有一个小小的坑，插件版本的不一样，在3.0 版本咱们须要这样引入 这个插件

• 在插件中直接使用

new cleanWebpackPlugin()

这样在咱们每次打包以前，它都会先去删除 dist 文件，而后再打包，不再用咱们手动去操做它了

后记

到这里，这篇文章也就基本结束了

完整 Demo，请 点击这里 查看

固然，关于 webpack 咱们须要深刻研究的还有不少不少，好比 mode 模式、resolve 解析、按需加载自定义模式、各类优化等等东西。webpack 里面的配置很复杂，可是当咱们熟悉了里面的各类配置，再来构建一个项目就很简单了

我一直认为，模仿也是一种颇有效的进步方式，有兴趣的小伙伴能够看一看 vue 或者 react 中的 webpack 配置，相信必定会对你有所启发

想要了解更多前端内容，有兴趣的小伙伴能够 点击这里 欢迎关注 star

参考

Webpack 官网