Description
I used DllPlugin to split vendors, and add-asset-html-webpack-plugin is introduced to integrate the vendors into the html-webpack-plugin's output.
plugins: [
new AddAssetHtmlPlugin({
filepath: path.resolve(__dirname, './dist/vendor/vendor.*.dll.js'),
includeSourcemap: false
}),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./dist/vendor/manifest.json')
}),
new HtmlWebpackPlugin({
inject: false,
template: require('html-webpack-template')
}),
]
When I introduced html-webpack-template in my webpack configuration, an issue occurs:
The HTML file generated by html-wepack-template doesn't contain the vendor bundle, though listed in the output of webpack.
Webpack's output:
Asset Size Chunks Chunk Names
b00fcf2063016f7ec41b05ca5950f07d.png 34 kB [emitted]
app.6c2d3068ce2228ee93ec.js 811 kB 0 [emitted] [big] app
favicon.png 1.13 kB [emitted]
vendor.07d80adac38099099c8d.dll.js 1.41 MB [emitted] [big]
index.html 779 bytes [emitted]
HTML files:
<!DOCTYPE html>
<html lang="en" >
<head>
.....
</head>
<body>
<div id="root"></div>
<script src="/app.6c2d3068ce2228ee93ec.js" type="text/javascript"></script>
</body>
</html>Solutions I've tried
- When I config the HtmlWebpackPlugin with
inject: true, the webpage works, but there are two app.js included in the HTML files, one by HtmlWebpackPlugin and the other by html-webpack-template. It's not the best practice.
- I try to import the vendor.js by using scripts parameters of html-webpack-template, but it seems that globbing is not supported, which makes me confusing in dealing with a vendor bundle with chunkhash.
Description
I used DllPlugin to split vendors, and add-asset-html-webpack-plugin is introduced to integrate the vendors into the html-webpack-plugin's output.
When I introduced html-webpack-template in my webpack configuration, an issue occurs:
The HTML file generated by html-wepack-template doesn't contain the vendor bundle, though listed in the output of webpack.
Webpack's output:
HTML files:
Solutions I've tried
inject: true, the webpage works, but there are two app.js included in the HTML files, one by HtmlWebpackPlugin and the other by html-webpack-template. It's not the best practice.