webpack5零基础入门-11处理html资源

在Webpack 5中，我们可以使用html-webpack-plugin插件来处理HTML资源。以下是一个简单的配置示例：

首先，安装html-webpack-plugin：

npm install html-webpack-plugin --save-dev

然后，在webpack.config.js中配置插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
 
module.exports = {
  // ... 其他webpack配置
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My Webpack App',
      template: './src/index.html', // 模板文件路径
      filename: 'index.html', // 输出文件名
      inject: 'body', // 脚本注入的位置
    }),
  ],
  // ... 其他webpack配置
};

在这个配置中，HtmlWebpackPlugin会将./src/index.html文件作为模板，并在webpack构建过程中自动注入生成的bundle标签到模板中，最终输出到./dist/index.html。

这样配置后，每次运行Webpack构建时，都会生成一个包含正确引用的bundle的HTML文件。如果你有多个页面，可以为每个页面创建相应的HTML模板，并为每个模板创建一个HtmlWebpackPlugin实例。