webpack配置多页面，js代码可以注入html，但不生效的解决方法

2022-03-15

webpack配置多页面，js代码可以注入html，但不生效，多是因为打包出的html文件中没有正确引入js。

网上查了很多资料，没发现实际有用的方法，只能升级html-webpack-plugin版本，还算顺利，能够解决该问题。

已测试可以正确打包多页面的版本：

"html-webpack-plugin": "^5.5.0",

记录下实际经历，之前用的一套旧版本：

// pakage.json

"webpack": "^4.30.0",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.3.1",
"html-webpack-plugin": "^3.2.0",

HtmlWebpackPlugin关键配置chunks，如果不填，则会把所有js文件注入html，这对于单页面项目（spa）没有影响。

对于多页面项目，打包出来的文件只包含chunks指定的包，漏掉了引入的其他文件。

//  webpack.config.js
 
   plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'src/index.html',
            inject: true,
            chunks: ['main', 'vendor']
        }),
        new HtmlWebpackPlugin({
            filename: 'list.html',
            template: 'src/list.html',
            inject: true,
            title: '列表',
            chunks: ['list', 'vendor']
        }),
       // ...
    ]

（版权归cpury.com所有，转载请注明出处。）

WEB开发