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的主要内容,如果未能解决你的问题,请参考以下文章