六. 插件

什么是插件

在某个时间点, 自动执行的处理程序(类似于 vue 的生命周期函数)

1 使用 html-webpack-plugin 插件

查看该插件的官方文档 (opens new window)

1) 安装

执行命令

npm install -D html-webpack-plugin

2) 配置

修改 webpack.config.js

3) 打包测试

在 dist 目录下, 生成了 index.html, 并且自动引入了打包后的 js 文件

这时, 我们直接访问发现只有背景, 没有 App 的内容, 并且报了一个 vue 的错误

我们发现自动生成的 html 中没有 id 为 app 的 div 元素, 如何解决这个问题?

4) 指定模板

其实, 我们是可以指定生成 html 时, 以哪个文件为模板的

修改 webpack 配置

示例

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

演示

5) 小结

html-webpack-plugin 的作用:

在打包结束时, 在 dist 目录下自动生成 index.html 文件, 并把打包好的 js 文件引入到 html 中

2 使用 clean-webpack-plugin

1) 安装

执行命令

npm install -D clean-webpack-plugin

2) 配置

webpack 的相关配置

第 10 行: 加{}是 ES6 中的解构的语法, 作用是提取出 CleanWebpackPlugin 的构造函数

3) 测试

3 使用 autoprefixer 插件

1) 安装

autoprefixer 插件是 postcss-loader 提供的一个插件, 如果要使用这个插件, 我们得先安装 postcss-loader

npm install -D postcss-loader autoprefixer

2) 配置

webpack 配置

新建 postcss.config.js 配置文件

示例

module.exports = {
  plugins: [require('autoprefixer')],
}

演示

3) 测试

测试发现, 会自动添加厂商前缀

#