上一篇文章中实现隔行变色,在index.html中手动引入打包后资源,是有缺点的(比如:webpack配置中输出的打包文件名称修改了,需要及时去index.html中同步修改)
避免以上情况,我们可以使用html-webpack-plugin插件
1、下载安装
yarn add html-webpack-plugin -D
-D 将依赖记录成开发依赖,只在开发阶段用,实际上线不需要的
2、引入,在webpack.config.js文件中,引入这个插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入
3、配置说明
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};