使用html-webpack-plugin对HTML文件进行预处理
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin
module.exports = {
// ... 其他webpack配置
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 指定原始的HTML文件
filename: 'index.html', // 生成的HTML文件名
inject: 'body', // 将js脚本注入到body底部
// 如果需要修改原始HTML,可以在这里添加自定义处理逻辑
// 例如,添加自定义head标签或者修改title等
// 下面是一个简单的例子,添加一个meta标签
head: {
meta: {
charset: { charset: 'utf-8' },
viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'
}
}
})
]
// ... 其他webpack配置
};
这段代码展示了如何使用html-webpack-plugin
来处理HTML文件。在webpack配置中,我们通过new HtmlWebpackPlugin()
创建了一个插件实例,并指定了一些选项,如原始HTML模板路径、输出文件名以及脚本注入位置。我们还演示了如何通过head
选项来添加或修改HTML文件的head部分。这是一个非常基础的例子,实际项目中可能需要更复杂的配置来满足具体的需求。
评论已关闭