07、webpack - plugin

12 阅读2分钟

认识

1、plugin:插件,通常是用于对某个现有的架构进行扩展

2、webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化、文件压缩等等

loader和plugin区别

1、loader:用于转换某些类型的模块,是一个转换器

2、plugin:是对webpack本身的扩展,是一个扩展器

插件

版权的插件

1、在webpack.config.js中引入

image.png

2、配置

image.png

module同级

3、此时

image.png

打包html的plugin

已知,目前我们的index.html文件是存放到项目的根目录下的,但在发布时,发布的是dist文件夹中的内容,而dist文件夹中若没有index.html文件,那么打包好的js文件也就没有意义了。

所以我们需要将index.html文件打包到dist文件夹中,则可以使用 HtmlWebpackPlugin插件

HtmlWebpackPlugin插件

1、可以自动生成一个index.html文件(可以指定模板来生成)

2、将打包好的js文件,自动通过script标签插入到body中

使用

1、安装

image.png

2、配置 (在 webpack.config.js)

image.png

image.png

3、dist文件夹中有打包好的index.html了

image.png

4、解决问题

(1)因为打包好的文件中自动引入js文件,所以不需要写前面的dist前缀目录了,它们本身在同一个文件夹里面

image.png

则 -- 把之前配置的需要添加的注释掉即可 image.png

(2)想要在页面中,自动生成可以解析Vue的

image.png

(2.1)、在自己创建的index中

image.png

(2.2)、在配置文件中

image.png

(2.3)、所以打包好的index为

image.png

这里的 template : 表示根据什么模板来生成index.html

js压缩的plugin

在项目发布之前,我们需要对js等文件进行压缩处理 (进行丑化,把空格、注释等都删掉)

uglifyjs-webpack-plugin

开发阶段,不建议丑化,等打包的时候再丑化

1、下载

image.png

2、配置

image.png

image.png

3、丑化后的js

image.png