杭州网站建设索q479185700,遵义网站制作费用,网页制作素材及流程,舟山工程建设信息网站一、是什么
Plugin#xff08;Plug-in#xff09;是一种计算机应用程序#xff0c;它和主应用程序互相交互#xff0c;以提供特定的功能
是一种遵循一定规范的应用程序接口编写出来的程序#xff0c;只能运行在程序规定的系统下#xff0c;因为其需要调用原纯净系统提供… 一、是什么
PluginPlug-in是一种计算机应用程序它和主应用程序互相交互以提供特定的功能
是一种遵循一定规范的应用程序接口编写出来的程序只能运行在程序规定的系统下因为其需要调用原纯净系统提供的函数库或者数据
webpack中的plugin也是如此plugin赋予其各种灵活的功能例如打包优化、资源管理、环境变量注入等它们会运行在 webpack 的不同阶段钩子 / 生命周期贯穿了webpack整个编译周期 目的在于解决loader 无法实现的其他事
配置方式
这里讲述文件的配置方式一般情况通过配置文件导出对象中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 方法会被 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方法的第一个参数应是驼峰式命名的插件名称
关于整个编译生命周期钩子有如下
entry-option 初始化 optionruncompile 真正开始的编译在创建 compilation 对象之前compilation 生成好了 compilation 对象make 从 entry 开始递归分析依赖准备对每个模块进行 buildafter-compile 编译 build 过程结束emit 在将内存中 assets 内容写到磁盘文件夹之前after-emit 在将内存中 assets 内容写到磁盘文件夹之后done 完成所有的编译过程failed 编译失败的时候
三、常见的Plugin
常见的plugin有如图所示 下面介绍几个常用的插件用法
HtmlWebpackPlugin
在打包结束后⾃动生成⼀个 html ⽂文件并把打包生成的js 模块引⼊到该 html 中 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 langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitle%htmlWebpackPlugin.options.title%/title
/head
bodyh1html-webpack-plugin/h1
/body
/html在 html 模板中可以通过 %htmlWebpackPlugin.options.XXX% 的方式获取配置的值
更多的配置可以自寻查找
clean-webpack-plugin
删除清理构建目录 npm install --save-dev clean-webpack-plugin const {CleanWebpackPlugin} require(clean-webpack-plugin);
module.exports {...plugins: [...,new CleanWebpackPlugin(),...]
}mini-css-extract-plugin
提取 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}),...]
}DefinePlugin
允许在编译时创建配置的全局对象是一个webpack内置的插件不需要安装
const { DefinePlugun } require(webpack)module.exports {...plugins:[new DefinePlugin({BASE_URL:./})]
}这时候编译template模块的时候就能通过下述形式获取全局对象 copy-webpack-plugin
复制文件或目录到执行区域如vue的打包过程中如果我们将一些文件放到public的目录下那么这个目录会被复制到dist文件夹中 npm install copy-webpack-plugin -D new CopyWebpackPlugin({parrerns:[{from:public,globOptions:{ignore:[**/index.html]}}]
})复制的规则在patterns属性中设置
from设置从哪一个源中开始复制to复制到的位置可以省略会默认复制到打包的目录下globOptions设置一些额外的选项其中可以编写需要忽略的文件
