超级详细的webpack|超级详细的webpack Plugin讲解
目录
- 一、pulgin 的作用
- 二、pulgin 配置方式
- 三、pulgin 的本质
- 四、常见的 pulgin
- 4-1 html-webpack-plugin
- 4-2 clean-webpack-plugin
- 4-3 mini-css-extract-plugin
- 4-4 DefinePlugin
- 4-5 copy-webpack-plugin
- 总结
一、pulgin 的作用
- pulgin 就是“插件”的意思,主要目的就是解决 loader 无法实现的事情,loader 只是用作于将特定的模块进行转换,而 pulgin 可以用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等
- pulgin 是贯穿 webpack 整个编译周期的,运行在 webpack 的不同阶段(钩子 / 生命周期)
文章图片
二、pulgin 配置方式 通常情况下,pulgin 的配置都是通过 webpack.config.js 配置文件导出对象中 plugins 属性传入 new 实例对象
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装const webpack = require('webpack'); // 访问内置的插件module.exports = {...// 配置 pluginsplugins: [new webpack.ProgressPlugin(),new HtmlWebpackPlugin({ template: './src/index.html' }),],};
三、pulgin 的本质 pulgin 本质上是一个具有 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;
关于整个编译生命周期钩子:
- entry-option :初始化 option
- run
- compile: 真正开始的编译,在创建 compilation 对象之前
- compilation :生成好了 compilation 对象
- make 从 entry 开始递归分析依赖,准备对每个模块进行 build
- after-compile: 编译 build 过程结束
- emit :在将内存中 assets 内容写到磁盘文件夹之前
- after-emit :在将内存中 assets 内容写到磁盘文件夹之后
- done: 完成所有的编译过程
- failed: 编译失败的时候
四、常见的 pulgin
4-1 html-webpack-plugin
作用:
- 利用 HtmlWebpackPlugin 插件自动生成 html 文件,并且对打包后的 js 文件做了一个引入
- HtmlWebpackPlugin 原理是通过自带默认的 ejs 模版去生成的,当然也可以自定义模版,在 html 模板中,可以通过
的方式获取配置的值
// webpack.config.jsconst HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { ...plugins: [new HtmlWebpackPlugin({title: "webpack案例",template: "./public/index.html", // 指定生成的 html 模版}),]};
4-2 clean-webpack-plugin
作用:每次打包时候,CleanWebpackPlugin 插件就会自动把上一次打的包删除
const {CleanWebpackPlugin} = require('clean-webpack-plugin'); module.exports = { ...plugins: [new CleanWebpackPlugin()]}
4-3 mini-css-extract-plugin
作用:提取 CSS 到一个单独的文件中
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'}),...]}
4-4 DefinePlugin
【超级详细的webpack|超级详细的webpack Plugin讲解】作用:DefinePlugin 允许在编译时创建配置的全局常量,是一个 webpack 内置的插件(不需要单独安装)
const { DefinePlugun } = require('webpack')module.exports = { ...plugins:[new DefinePlugin({BASE_URL: '"./"' // 等价于 const BASE_URL = "./" 他的赋值方式有点奇葩}),]}
这时候编译template模块的时候,就能通过下述形式获取全局对象
4-5 copy-webpack-plugin
作用:CopyWebpackPlugin 是一个复制文件的插件,复制文件或者目录到指定区域,比如 vue 的打包过程中,如果我们将一些文件放到 public 的目录下,那么这个目录会被复制到 dist 文件夹中
new CopyWebpackPlugin({// 通过 CopyWebpackPlugin 插件将 public 中的文件复制到打包后的文件夹下// patterns 是匹配的意思patterns: [{from: "public", // 设置从哪一个源中开始复制to: "build" // 可以省略,默认是复制到打包输出的路径,会根据 output globOptions: {ignore: ['**/DS_Store', '**/index.html', '**/abc.txt'] // ** 表示的是 from 的文件夹}// globOptions:设置一些额外的选项,其中可以编写需要忽略的文件,//比如.DS_Store:mac目录下回自动生成的一个文件;.index.html:也不需要复制,因为我们已经通过HtmlWebpackPlugin完成了index.html的生成}]})
总结 到此这篇关于webpack Plugin讲解的文章就介绍到这了,更多相关webpack Plugin讲解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- Android|Android Flutter绘制扇形图详解
- Java超详细讲解抽象类的原理与用法
- go学习笔记读取consul配置文件详解
- win8.1安装打印机驱动的办法 惠普打印机驱动程序安装图文详细图文详细教程
- 详细说明系统之家win7纯净版Ghost系统的安装过程
- 图文详细说明win7系统U盘插入后假死怎样处理
- 图文详细说明u盘不能格式化怎样办
- 图文详细说明u盘中毒怎样办
- 图文详细说明u盘坏了怎样修好
- u盘运用过程中发热是否属于正常现象?图文详回答案