解决add-asset-html-webpack-plugin 插入无效问题

最新推荐文章于 2024-05-27 15:18:14 发布

原创最新推荐文章于 2024-05-27 15:18:14 发布 · 1.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #webpack #性能优化 #html5

在Vue项目中使用DllPlugin和DllReferencePlugin进行打包优化时，DllPlugin生成的文件无法通过AddAssetHtmlPlugin正确插入到HTML中。问题出现在html-webpack-plugin的版本过高，降低版本到3.2.0或指定打包文件可解决问题。

问题描述

使用DllPlugin和DllReferencePlugin进行打包优化配置时发现没有报错，但是DllPlugin打包后的文件无法通过AddAssetHtmlPlugin正常的插入，不知道因为什么引起的？

一、在vue.config.js 文件选项下添加代码如下：

 const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
 const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
 module.exports={
	 configureWebpack:{
	 	plugins:[
		 new DllReferencePlugin({
		        // eslint-disable-next-line global-require,import/no-dynamic-require
		        manifest: require(path.resolve(__dirname, 'dll/manifest/dll1.json'))
		 }),
		 new AddAssetHtmlPlugin({
		        outputPath: 'dll',//打包输入到dist文件夹的文件目录
		        publicPath: '/dll',//在html中插入的访问路径前缀
		        // eslint-disable-next-line global-require,import/no-dynamic-require
		        filepath: path.resolve(__dirname, `dll/dll1.js`)
		 })
		]
	 }
}

二、感觉这段配置代码没有什么问题，网上百度也是这么写的，被这个问题困扰了好久，后来特意去看了add-asset-html-webpack-plugin插件的配置，发现里面写到了
![在这里插入图片描述](https://img-blog.csdnimg.cn/b70c35c6a0764517a4de5f7565545ae1.png
于是我也照着上面百度的结果，在vue.config.js里添加了new HtmlWebpackPlugin()，执行完打包命令，发现DllPlugin打包的文件正常插入在index.html里面了，但是出现，挂载页面的#app不见了，打开页面不报错，但是页面空白…

解决办法

方案一：查看html-webpack-plugin版本号，降低版本

我项目里面该插件的版本号是：^4.2.0，我降低到了：3.2.0，就可以了

npm uninstall html-webpack-plugin 
npm i html-webpack-plugin@3.2.0 -D

方案二：给html-webpack-plugin插件添加指定打包文件

 new HtmlWebpackPlugin({
    // Load a custom template (lodash by default)
    template: 'index.html'
  })