webpack打包-----plugin
Posted michael_yqs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack打包-----plugin相关的知识，希望对你有一定的参考价值。
为什么要用插件？
loader 和plugin的区别
loader
loader：主要用于对模块源码的转换，因为webpack本身只支持js处理，loader描述了webpack如何处理非javascript模块，并且在build中引入这些依赖。loader可以将文件从不同css预处理转换为css,将ts转换为JavaScript，或者将内联图像转换为data URL。比如说：sass-loader、css-Loader，style-Loader、file-loader等。loader本质就是一个间件管道。
plugin
plugin作用在于解决loader无法实现的其他事，从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。
常见的plugin
clean-webpack-plugin
清除资源文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin();
]
}
html-webpack-plugin
自动生成使用打包结果bundle.js的 HTML
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');//可以多次调用，一个htmlWebpackPlugin 实例生成一个页面
module.exports = {
module: {
rules: [
{
test: /.js$/,
exclude: [/node_modules/], // 排除转化第三方插件的 js
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin(),//不传参数，生成的html默认为打包目录下的index.html
new HtmlWebpackPlugin({
title: 'webpack plugin sample',//可以在模版中获取这个title
meta: {
viewport: 'width=device-width, initial-scale=1.0',
},
template: './src/index.html' // 指定模板文件
}),
new HtmlWebpackPlugin({
filename: 'about.html'//生成about.html
})
]
}
./src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
copy-webpack-plugin
静态资源拷贝
const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
new CopyWebpackPlugin(['public'])
]
自定义plugin开发-----
插件功能：清除打包结果中多余的注释信息
Plugin 是通过钩子机制实现的。webpack 要求 插件plugin 必须是一个函数或者是一个 包含 apply 方法的对象；通常将 plugin 定义为一个 class，然后在 class 中定义一个 apply 方法。plugin被要求必须是一个函数或者是包含apply方法的对象。入参是一个compiler对象，其包含构建所需信息，开发时可以通过compiler中hooks属性访问到emit钩子，并通过其tap方法注册一个钩子函数，定制钩子名称和挂载函数。该函数入参为compilation打包上下文，通过遍历compilation下assets的所有键得到所有文件名称。然后根据 键 的source（）方法拿到对应的content内容，然后对content进行一些处理，并返回给souce函数，以达到插件的目的。
class MyPlugin {
// apply 方法，在 webpack 启动的时候会自动调用该方法
// 接收一个 compiler 对象参数
// webpack 工作过程中最核心的一个对象，包含了此次构建所有的配置信息，
// 通过这个对象去注册钩子函数
apply(compiler) {
// compilation: 此次打包过程中的上下文，
// 所有打包过程产生的结果都会放在这个对象中
compiler.hooks.emit.tap('MyPlugin', compilation => {
// compilation.assets 获取即将写入目录的资源文件信息
// compilation.assets是一个对象，键是每一个文件的名称 bundle.js, index.html, favicon.ico 。。。
// 文件内容需要通过 值的 source 方法获取 compilation[name].source();
for (const name in compilation.assets) {
if (name.endsWith('.js')) {
// 获取文件内容
const contents = compilation.assets[name].source();
const withoutComments = contents.replace(/\\/\\*\\*+\\*\\//g, '');
// 替换原内容
compilation.assets[name] = {
// source 返回替换后的内容
source: () => withoutComments,
// 返回内容的大小， webpack 规定要这么做的
size: () => withoutComments.length;
}
}
}
})
}
}
//webpack.config.js中引入Myplugin
const Myplugin = require('./Myplugin')
plugins: [
new MyPlugin()
]
以上是关于webpack打包-----plugin的主要内容，如果未能解决你的问题，请参考以下文章