We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Plugin（Plug-in）是一种计算机应用程序，它和主应用程序互相交互，以提供特定的功能
Plugin
是一种遵循一定规范的应用程序接口编写出来的程序，只能运行在程序规定的系统下，因为其需要调用原纯净系统提供的函数库或者数据
webpack中的plugin也是如此，plugin赋予其各种灵活的功能，例如打包优化、资源管理、环境变量注入等，它们会运行在 webpack 的不同阶段（钩子 / 生命周期），贯穿了webpack整个编译周期
webpack
plugin
目的在于解决loader 无法实现的其他事
loader
这里讲述文件的配置方式，一般情况，通过配置文件导出对象中plugins属性传入new实例对象。如下所示：
plugins
new
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装 const webpack = require('webpack'); // 访问内置的插件 module.exports = { ... plugins: [ new webpack.ProgressPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }), ], };
其本质是一个具有apply方法javascript对象
apply
javascript
apply 方法会被 webpack compiler 调用，并且在整个编译生命周期都可以访问 compiler 对象
webpack compiler
compiler
const pluginName = 'ConsoleLogOnBuildWebpackPlugin'; class ConsoleLogOnBuildWebpackPlugin { apply(compiler) { compiler.hooks.run.tap(pluginName, (compilation) => { console.log('webpack 构建过程开始！'); }); } } module.exports = ConsoleLogOnBuildWebpackPlugin;
compiler hook 的 tap 方法的第一个参数，应是驼峰式命名的插件名称
compiler hook
tap
关于整个编译生命周期钩子，有如下：
常见的plugin有如图所示：
下面介绍几个常用的插件用法：
在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的 js 模块引⼊到该 html 中
html
js
npm install --save-dev html-webpack-plugin
// webpack.config.js const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { ... plugins: [ new HtmlWebpackPlugin({ title: "My App", filename: "app.html", template: "./src/html/index.html" }) ] };
<!--./src/html/index.html--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><%=htmlWebpackPlugin.options.title%></title> </head> <body> <h1>html-webpack-plugin</h1> </body> </html>
在 html 模板中，可以通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置的值
<%=htmlWebpackPlugin.options.XXX%>
更多的配置可以自寻查找
删除（清理）构建目录
npm install --save-dev clean-webpack-plugin
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); module.exports = { ... plugins: [ ..., new CleanWebpackPlugin(), ... ] }
提取 CSS 到一个单独的文件中
CSS
npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { ..., module: { rules: [ { test: /\.s[ac]ss$/, use: [ { loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader' ] } ] }, plugins: [ ..., new MiniCssExtractPlugin({ filename: '[name].css' }), ... ]}
允许在编译时创建配置的全局对象，是一个webpack内置的插件，不需要安装
const { DefinePlugun } = require('webpack')module.exports = { ... plugins:[ new DefinePlugin({ BASE_URL:'"./"' }) ]}
这时候编译template模块的时候，就能通过下述形式获取全局对象
template
<link rel="icon" href="<%= BASE_URL%>favicon.ico>"
复制文件或目录到执行区域，如vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中
vue
public
dist
npm install copy-webpack-plugin -D
new CopyWebpackPlugin({ parrerns:[ { from:"public", globOptions:{ ignore:[ '**/index.html' ] } } ]})
复制的规则在patterns属性中设置：
patterns
from：设置从哪一个源中开始复制
to：复制到的位置，可以省略，会默认复制到打包的目录下
globOptions：设置一些额外的选项，其中可以编写需要忽略的文件
The text was updated successfully, but these errors were encountered:
No branches or pull requests
一、是什么
Plugin（Plug-in）是一种计算机应用程序，它和主应用程序互相交互，以提供特定的功能是一种遵循一定规范的应用程序接口编写出来的程序，只能运行在程序规定的系统下，因为其需要调用原纯净系统提供的函数库或者数据
webpack中的plugin也是如此，plugin赋予其各种灵活的功能，例如打包优化、资源管理、环境变量注入等，它们会运行在webpack的不同阶段（钩子 / 生命周期），贯穿了webpack整个编译周期目的在于解决
loader无法实现的其他事配置方式
这里讲述文件的配置方式，一般情况，通过配置文件导出对象中
plugins属性传入new实例对象。如下所示：二、特性
其本质是一个具有
apply方法javascript对象apply方法会被webpack compiler调用，并且在整个编译生命周期都可以访问compiler对象compiler hook的tap方法的第一个参数，应是驼峰式命名的插件名称关于整个编译生命周期钩子，有如下：
三、常见的Plugin
常见的
plugin有如图所示：下面介绍几个常用的插件用法：
HtmlWebpackPlugin
在打包结束后，⾃动生成⼀个
html⽂文件，并把打包生成的js模块引⼊到该html中在
html模板中，可以通过<%=htmlWebpackPlugin.options.XXX%>的方式获取配置的值更多的配置可以自寻查找
clean-webpack-plugin
删除（清理）构建目录
mini-css-extract-plugin
提取
CSS到一个单独的文件中DefinePlugin
允许在编译时创建配置的全局对象，是一个
webpack内置的插件，不需要安装这时候编译
template模块的时候，就能通过下述形式获取全局对象copy-webpack-plugin
复制文件或目录到执行区域，如
vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中复制的规则在
patterns属性中设置：from：设置从哪一个源中开始复制
to：复制到的位置，可以省略，会默认复制到打包的目录下
globOptions：设置一些额外的选项，其中可以编写需要忽略的文件
参考文献
The text was updated successfully, but these errors were encountered: