webpack讲解（完结篇）

---

前言

这篇文章我们主要讲解一下webpack剩余的一些知识点，其中包括了plugin，是一个webpack的插件，我们会在这一篇中详细讲解一下

---

一、plugins

插件,通常是用于对某个现有的架构进行扩展
扩展 webpack 本身的一些功能，它们会运行在各种模块解析完成以后的打包编译阶段，比如对解析后的模块文件进行压缩等

loader和plugin 的区别

loader主要用于某些需要转换的模块,它是一个转换器
plugin是插件,它是对webpack本身的扩展,是一个扩展器

HtmlWebpackPlugin

作用

在打包结束后，⾃动生成⼀个 html ⽂文件，并把打包生成的 js 模块引⼊到该 html 中

二、使用步骤

1.安装

在终端内输入

npm install --save-dev html-webpack-plugin

进行安装

2.引入

在webpack.config.js文件下

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
   
	...
  plugins: [
     new HtmlWebpackPlugin({
   
       title: "My App", //文件标题
       filename: "app.html", //打包好的html名
       template: "./public/index.html" //原地址文件（把谁打包）
     }) 
  ]
};

在 html 模板中，可以通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置的值

上面的title想要使用的话，我们需要在原地址index.html中title标签变为

  <title><%=htmlWebpackPlugin.options.title%></title>

现在我们执行打包命令后，它会自动生成一个文件，会出现如下（效果图）

这样我们就可以直接打开该文件，在页面中直接运行

更多的配置

• title: ⽤来生成⻚面的 title 元素
• filename: 输出的 HTML ⽂件名，默认是 index.html， 也可以直接配置子目录
• template: 模板⽂件路径，⽀持加载器（loader），⽐如 html!./index.html
• inject: true | 'head' | 'body' | false，注⼊所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中
• favicon: 添加特定的 favicon 路径到输出的 HTML 文件中
• minify: {} | false， 传递 html-minifier 选项给 minify 输出
• hash: true | false，如果为 true，将添加 webpack 编译生成的 hash 到所有包含的脚本和 CSS ⽂件，对于解除 cache 很有用
• cache: true | false，如果为 true，这是默认值，仅在文件修改之后才会发布文件
• showErrors: true | false，如果为 true，这是默认值，错误信息会写入到 HTML ⻚面中
• chunks: 允许只添加某些块 (⽐如，仅 unit test 块)
• chunksSortMode: 允许控制块在添加到⻚面之前的排序方式，⽀持的值:'none' | 'default' |{function}-default:'auto'
• excludeChunks: 允许跳过某些块，(⽐如，跳过单元测试的块)

clean-webpack-plugin

作用

删除（清理）构建目录

1.安装

npm install --save-dev clean-webpack-plugin

2.使用

在webpack.config.js文件下写

const {
   CleanWebpackPlugin} = require('clean-webpack-plugin