Webpack基础配置(五)

前言

webpack自身的多数功能都由插件来扩展。

clean-webpack-plugin

安装
yarn add clean-webpack-plugin --dev

webpack.config.js中引用插件

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

webpack.config.js的plugins属性中添加如下代码
```
plugins: [
    new CleanWebpackPlugin()
]
```

html-webpack-plugin

安装
yarn add html-webpack-plugin --dev

webpack.config.js中引用插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

webpack.config.js的plugins属性中添加如下代码

plugins: [
    new HtmlWebpackPlugin({							
      title: '页面标题',							
      filename: 'index.html',							
      favicon: path.resolve(__dirname, 'src/assets/imgs/favicon.png'),							
      template: path.resolve(__dirname, 'src/index.html'),							
      inject: 'body',							
      minify: {							
          // 是否移除HTML中注释							
          removeComments: false,							
          // 是否移除空行和换行符							
          collapseWhitespace: false,							
          // 是否压缩内联CSS							
          minifyCSS: false							
      }							
    })							
]

title：找到模板中的'<%= htmlWebpackPlugin.options.title %>'这个字符串替换为给定内容
filename：输出文件名称，输出的路径是module.exports.output.path(dist文件夹)
favicon：指定网页图标
template：指定模板文件
inject：生成的.html文件中，引用output.filename的位置
minify：生成的.html文件是否压缩

将src/index.html文件修改一下

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

执行yarn build，查看dist中生成的.html文件

a. 未开启压缩

b. 开启压缩

链接

上一篇 Webpack基础配置(四)