什么是插件? webpack编译过程中专注于处理特定任务的功能模块可以称为插件。
插件是一个丰富webpack本身的扩展器。 它针对的是loader完成后webpack打包的整个流程。 它不直接操作文件,而是基于storm机制进行工作。 它会窃听 webpack 打包过程中的各个实例并执行各种任务。
插件功能
这里介绍 18 个常用的 webpack 插件。
1.HotModuleReplacement插件
热更新依赖于webpack-dev-server。 另外,当打包文件被修改时,会更新打包文件或者重新加载刷新整个页面。 HRM仅更新更改的部分。
HotModuleReplacementPlugin 是 webpack 自带的模块,所以 webpack 后可以直接在插件配置项中使用。
<section class="code-snippet__fix code-snippet__js">
const webpack = require('webpack')
plugins: [
new webpack.HotModuleReplacementPlugin(), // 热更新插件
]
2. html-webpack-插件
生成 html 文件。 将webpack中入口配置的相关入口块和extract-text-webpack-plugin的css样式插入到插件提供的模板或模板内容配置项指定的内容中,生成html文件。 具体插入方法是将样式链接插入到head元素中,脚本插入到head或body中。
const htmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
newhtmlWebpackPlugin({
filename: 'index.html',
template: path.join(__dirname, '/index.html'),
minify: {
// 压缩html文件
removeComments: true, // 移除html中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifycss: true, // 压缩内联css
},
inject: true,
}),
]
注入有四个选项值
多页面应用程序打包
有时候,我们的应用不一定是单页面应用或多页面应用,那么如何使用webpack进行打包。
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
index: './src/index.js',
login: './src/login.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[hash:6].js',
},
//...
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html', //打包后的文件名
}),
new HtmlWebpackPlugin({
template: './public/login.html',
filename: 'login.html', //打包后的文件名
}),
],
}
如果需要配置多个HtmlWebpackPlugin,则不能修改文件名webpack全部插件,否则会生成全部index.html。
但有一个问题。 index.html和login.html会发现它们同时约会了index.f7d21a。 js 和登录.f7d21a。 js,通常这不是我们想要的,我们想要的是index.html的过期日期index.f7d21a。 js中,login.html只保留login.f7d21a。 js.
HtmlWebpackPlugin 提供了一个可以接受字段的块参数。 配置该参数,将字段中指定的js日期唯一插入到html文件中。
module.exports = {
//...
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html', //打包后的文件名
chunks: ['index'],
}),
new HtmlWebpackPlugin({
template: './public/login.html',
filename: 'login.html', //打包后的文件名
chunks: ['login'],
}),
],
}
这样执行npmrun build,可以看到index.html中只有分配给index的js文件,而login.html中也只有分配给login的js文件。
3. 干净的webpack插件
clean-webpack-plugin 用于在打包前清除上一个项目生成的bundle文件。 它会根据output.path手动清除文件夹; 这个插件在生产环境中使用得非常频繁,因为生产环境往往是通过hash来生成的。 有很多捆绑文件。 如果不清除,每次都会生成新的,导致文件夹非常大。
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, '/index.html'),
}),
new CleanWebpackPlugin(), // 所要清理的文件夹名称
]
4.提取文本Webpack插件
生成CSS文件而不是内联。该插件的主要目的是提取CSS样式,防止JS中打包样式导致的页面样式加载混乱。
const ExtractTextPlugin = require('extract-text-webpack-plugin')
plugins: [
// 将css分离到/dist文件夹下的css文件夹中的index.css
new ExtractTextPlugin('css/index.css'),
]
5.迷你CSS提取插件
一个将CSS提取为独立文件的插件,为每个包含css的js文件创建一个CSS文件,支持按需加载css和sourceMap。 只能在webpack4中使用。 与另一个插件extract-text-webpack-plugin相比,它具有以下特点:
该插件仅应在生产环境配置中使用,加载器链中不应使用style-loader,且该插件暂时不支持HMR。
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
module: {
rules: [
{
test: /.(le|c)ss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '../',
},
},
'css-loader',
'postcss-loader',
'less-loader',
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[id].[contenthash:8].css',
}),
],
}
6. purifycss-webpack
有时我们会编写更多的CSS或重复它,这会导致冗余代码,我们希望在生产环境中将其删除。
const path = require('path')
const PurifyCssWebpack = require('purifycss-webpack') // 引入PurifyCssWebpack插件
const glob = require('glob') // 引入glob模块,用于扫描全部html文件中所引用的css
module.exports = merge(common, {
plugins: [
new PurifyCssWebpack({
paths: glob.sync(path.join(__dirname, 'src/*.html')),
}),
],
})
7.优化CSS资源Webpack插件
如果我们想串联css打包卷,我们可以使用Optimiz-css-assets-webpack-plugin。
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin") // 压缩css代码
optimization: {
minimizer: [
// 压缩css
new OptimizeCSSAssetsPlugin({})
]
}
8.UglifyJs插件
uglifyJsPlugin是vue-cli默认使用的压缩代码形式。 用于压缩js文件,从而插入js文件的大小webpack全部插件,加快加载速度。
它使用单线程压缩代码,打包时间较慢,因此可以在开发环境中关闭它,在生产环境部署时打开它。
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: true, //是否启用文件缓存
parallel: true //使用多进程并行运行来提高构建速度
})
9.ParallelUglify插件
启动多个子进程,将多个文件的压缩工作分配给多个子进程。 虽然各个子进程仍然通过UglifyJS压缩代码,但是是并行执行的。
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
plugins: [
new ParallelUglifyPlugin({
//cacheDir 用于配置缓存存放的目录路径。
cacheDir: '.cache/',
sourceMap: true,
uglifyJS: {
output: {
comments: false,
},
compress: {
warnings: false,
},
},
}),
]
10.terser-webpack-插件
Webpack 4.0 默认使用 terser-webpack-plugin 压缩插件。 在此之前,它使用uglifyjs-webpack-plugin。 它们之间的区别在于 ES6 的压缩不是很好。 同时,我们可以开启并行参数,使用更多进行压缩。 加快压缩速度。
const TerserPlugin = require('terser-webpack-plugin') // 压缩js代码
optimization: {
minimizer: [
new TerserPlugin({
parallel: 4, // 开启几个进程来处理压缩,默认是 os.cpus().length - 1
cache: true, // 是否缓存
sourceMap: false,
}),
]
}
11.无错误插件
报错但不退出webpack进程。 当编译错误发生时,使用NoEmitOnErrorsPlugin跳过输出阶段。 这可确保输出资源不包含错误。
plugins: [new webpack.NoEmitOnErrorsPlugin()]
12.压缩webpack插件
所有现代浏览器都支持 gzip 压缩。 启用gzip压缩可以扩展和扩大传输资源的大小,从而延长资源下载时间,减少首次崩溃时间,提高用户体验。
gzip 在压缩基于文本格式(例如 CSS、JavaScript 和 HTML)的文件方面最有效。 在压缩压缩文件时,往往可以达到高达70-90%的压缩率。 它还可以压缩已经压缩的资源(例如图像)。 gzip压缩处理,效果很差。
const CompressionPlugin = require('compression-webpack-plugin')
plugins: [
new CompressionPlugin({
// gzip压缩配置
test: /.js$|.html$|.css/, // 匹配文件名
threshold: 10240, // 对超过10kb的数据进行压缩
deleteOriginalAssets: false, // 是否删除原文件
}),
]
当然,这种方法也需要预先配置的支持。
13.定义插件
我们可以通过DefinePlugin来定义一些类别的变量。 我们可以直接在模块之间使用这些变量,而无需进行任何声明。 DefinePlugin是webpack自带的插件。
plugins: [
new webpack.DefinePlugin({
DESCRIPTION: 'This Is The Test Text.',
}),
]
// 直接引用
console.log(DESCRIPTION)
14. 提供插件
每当标识符被视为非参数化变量时,都会手动加载模块,并通过模块的输出对标识符进行参数化。 这是webpack自带的一个插件。
module.exports = {
resolve: {
alias: {
jquery: './lib/jquery',
},
},
plugins: [
//提供全局的变量,在模块中使用无需用require引入
new webpack.ProvidePlugin({
$: 'jquery',
react: 'react',
}),
],
}
15.DLL插件
这会在额外的单独 webpack 设置中创建一个仅 dll 的捆绑包。 该插件会生成一个manifest.json文件,用于将DLLReferencePlugin映射到相关依赖项。
使用步骤如下:
1、build下创建webpack.dll.config.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: {
vendor: [
'vue-router',
'vuex',
'vue/dist/vue.common.js',
'vue/dist/vue.js',
'vue-loader/lib/component-normalizer.js',
'vue',
'axios',
'echarts',
],
},
output: {
path: path.resolve('./dist'),
filename: '[name].dll.js',
library: '[name]_library',
},
plugins: [
new webpack.DllPlugin({
path: path.resolve('./dist', '[name]-manifest.json'),
name: '[name]_library',
}),
// 建议加上代码压缩插件,否则dll包会比较大。
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
}),
],
}
2.在webpack.prod.conf.js的插件前面添加配置
new webpack.DllReferencePlugin({
manifest: require('../dist/vendor-manifest.json'),
})
3.在package.json文件中添加快捷命令(build:dll)
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js",
"build:dll": "webpack --config build/webpack.dll.conf.js"
}
生产环境打包时,首先运行npm build:dll命令,在打包目录下生成vendor-manifest.json文件和vendor.dll.js文件。 然后 npm 运行 build 来生成其他文件。
4.添加对根目录下的条目index.html的引用
16. 快乐套餐
对文件加载器和URL加载器不太友好,所以不建议使用该加载器。
1.HappyPack插件安装
npm i -D happypack
2、webpack.base.conf.js文件配置module.rules
module: {
rules: [
{
test: /.js$/,
use: ['happypack/loader?id=babel'],
include: [resolve('src'), resolve('test')],
exclude: path.resolve(__dirname, 'node_modules'),
},
{
test: /.vue$/,
use: ['happypack/loader?id=vue'],
},
]
}
3、生产环境配置webpack.prod.conf.js文件
const HappyPack = require('happypack')
// 构造出共享进程池,在进程池中包含5个子进程
const HappyPackThreadPool = HappyPack.ThreadPool({ size: 5 })
plugins: [
new HappyPack({
// 用唯一的标识符id,来代表当前的HappyPack是用来处理一类特定的文件
id: 'babel',
// 如何处理.js文件,用法和Loader配置中一样
loaders: ['babel-loader?cacheDirectory'],
threadPool: HappyPackThreadPool,
}),
new HappyPack({
id: 'vue', // 用唯一的标识符id,来代表当前的HappyPack是用来处理一类特定的文件
loaders: [
{
loader: 'vue-loader',
options: vueLoaderConfig,
},
],
threadPool: HappyPackThreadPool,
}),
]
注意,当项目较小时,多线程捆绑实际上会减慢捆绑速度。
17.复制webpack插件
我们在 public/index.html 中有静态资源,但是 webpack 在打包时不会帮我们将它们复制到 dist 目录中,所以 copy-webpack-plugin 可以帮我完成复制工作。
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
plugins: [
new CopyWebpackPlugin({
patterns: [
{
from: 'public/js/*.js',
to: path.resolve(__dirname, 'dist', 'js'),
flatten: true,
},
],
}),
],
}
18.忽略插件
这是一个 webpack 外部插件。 它的作用是忽略第三方包指定的目录,并阻止那些指定的目录被打包。
比如我们需要用到这个第三方依赖库,它主要是进行时间的低格式化,支持多种国家语言。 虽然我把语言设置为英文,但是打包的时候,所有语言都被替换打包了。 这导致包装非常大并且包装速度很慢。 接下来,我们可以使用 IgnorePlugin 来忽略指定的目录,从而使打包速度更快、文件更小。
const Webpack = require('webpack')
plugins: [
//moment这个库中,如果引用了./locale/目录的内容,就忽略掉,不会打包进去
new Webpack.IgnorePlugin(/./locale/, /moment/),
]
我们在之前的方法的基础上其实忽略了包含变量路径‘./locale/’的文件目录,但是我们也利用了我们使用时无法显示英文的情况,所以可以自动发布英文的目录这次。
import moment from 'moment'
//手动引入所需要的语言包
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
let r = moment().endOf('day').fromNow()
console.log(r)
文章结束~