vue32 —— webpack- plugin

最新推荐文章于 2022-09-30 17:27:17 发布

8笔

最新推荐文章于 2022-09-30 17:27:17 发布

阅读量176

点赞数

分类专栏： vuejs

本文链接：https://blog.youkuaiyun.com/weixin_43899694/article/details/103222156

版权

vuejs 专栏收录该内容

57 篇文章

订阅专栏

本文详细介绍了webpack中的plugin和loader的区别，重点讲解了如何使用plugin，包括BannerPlugin用于添加版权信息，HtmlWebpackPlugin自动打包并插入js到html，以及UglifyJsWebpackPlugin进行js压缩的配置和应用。通过实例展示了每个plugin的具体用法，帮助开发者更好地掌握webpack的扩展功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

plugin ：

插件，对某个现有框架进行扩展

plugin 和 loader 区别

loader：主要用于转换某些类型的模块，是一个转换器
plugin：插件，是对webpack本身的扩展，是一个扩展器

plugin 使用

通过npm 安装需要的plugin （部分插件webpack已经内置，不必安装）
在webpack.config.js中的plugins进行配置

eg

1. BannerPlugin——添加版权的plugin

配置：

webpack.config.js： 
const webpack = require('webpack')
module.exports = {
  ...
  plugins:{
	new webpack.BannerPlugin('最终版权归zfx所有')
	}
}

会在bundle.js文件头部添加版权信息

2. HtmlWebpackPlugin——打包html的plugin

将项目根目录下的index.html文件打包到dist文件夹中：
我们的index.html文件还是放在项目根目录下的，但真实发布时，发布的是dist文件夹下的文件，
但目前dist文件夹中没有index.html。

HtmlWebpackPlugin:

自动生成一个index.html文件（可以指定模块生成）
将打包的js文件，自动通过script标签插入到body中

安装与配置：

npm install html-webpack-plugin --save-dev
要删除之前在output中添加的publicPath属性

const HtmlWebpackPlugin = require('html-webpack-plugin') // 导入插件

...
plugins: [
	new HtmlWebpackPlugin({
		template: 'index.html'   //模板
	})
]

3. UglifyJsWebpackPlugin——压缩js的plugin

对打包的js文件进行压缩

安装与配置：
指定版本1.1.1 ，与CLI2保持一致

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

const uglifyjsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
...
	plugins: [
		new uglifyjsPlugin()
	]
}