Webpack基础配置(五)

前言

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

clean-webpack-plugin

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

2. webpack.config.js中引用插件

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

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

   plugins: [
       new CleanWebpackPlugin()
   ]
   

html-webpack-plugin

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

2. webpack.config.js中引用插件

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

3. 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文件是否压缩

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

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

5. 执行yarn build，查看dist中生成的.html文件
   
   a. 未开启压缩
   
   b. 开启压缩
   

链接

上一篇 Webpack基础配置(四)