webpack中关于html打包和js文件压缩的plugin插件

it2023-08-02  68

一.认识plugin

1.plugin是什么?

plugin是插件的意思,通常是对某个现有的架构进行扩展webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等

2.loader和plugin的区别

loader主要用于加载某些类型的模块,它是一个加载器plugin是插件,它是对webpack本身的扩展,是一个扩展器

3.plugin的使用

步骤一:通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)步骤二:在webpack.config.js中的plugins中配置插件

二.添加版权的plugin

为打包的文件添加版权声明,该插件名字叫BannerPlugin,属于webpack自带的插件

按照下面的方式修改webpack.config.js文件 const webpack = require('webpack') module.exports={ ... plugins:[ new webpack.BannerPlugins('要输入的版权声明') ] } 此时重新打包,查看bundle.js文件的头部,可以看到如下信息(例子)

三.打包html的plugin

目前,我们的index.html文件时存放在项目的根目录下的

而真实发布项目时,发布的是dist文件夹中的内容,但是dist文件夹中如果没有index.html文件,那么打包的js等文件就没有意义了所以,我们需要将index.html文件打包到dist文件夹中,这个时候就需要HtmlWebpackPlugin插件

HtmlWebpackPlugin插件可以为我们做这些事情

自动生成一个index.html文件(可以指定模板生成)将打包的.html文件,自动生成script标签插入到body中

安装HtmlWebpackPlugin插件:npm install html-webpack-plugin --save-dev 接着在webpack.config.js文件中plugins部分内容中添加:

const HtmlWebpackPlugin = require('html-webpack-plugin') plugins:[ new webpack.BannerPlugins('要输入的版权声明')new htmlWebpackPlugin({ template:'index.html' }), ]

四.js压缩的plugin

在项目发布之前,我们必然需要对js等文件进行压缩处理,我们使用一个第三方插件uglifyjs-webpack-plugin,并且指定版本号1.1.1,与CLI2保持一致npm install uglifyjs-webpack-plugin@1.1.1 --save-dev 接着在webpack.config.js文件中plugins部分内容中添加:

const UglifyjsWebpackPlugin= require('uglifyjs-webpack-plugin') plugins:[ new webpack.BannerPlugins('要输入的版权声明')new htmlWebpackPlugin({ template:'index.html' }), new UglifyjsWebpackPlugin() ]
最新回复(0)