Menu
My environment is as follows
my extracted webpack.config.js file is as follows
entry: {
'polyfills': './src/polyfills.browser.ts',
'main': './src/main.browser.ts'
},
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
The final html that gets generated has the following scripts references
<script type="text/javascript" src="main.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script>
My problem is that polyfills.bundle.js is referenced after main.bundle.js. Due to this the app does not work. From what I know the script files should be referenced in the reverse order. How do I fix this? Plus how does HtmlWebpackPlugin determine the order in which to insert the scripts?
714
You can bundle your JavaScript using the CLI command by providing an entry file and output path. Webpack will automatically resolve all dependencies from import and require and bundle them into a single output together with your app's script.
Webpack will generate the files and put them in the /dist folder for you, but it doesn't keep track of which files are actually in use by your project. In general it's good practice to clean the /dist folder before each build, so that only used files will be generated.
The HtmlWebpackPlugin simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include a hash in the filename which changes every compilation.
You can use 'manual' value for chunksSortMode option and plugin will sort your chunks as they ordered in chunks option.
See this GitHub issue for details.
Example:
new HtmlWebpackPlugin({
...
chunks: ['polyfills', 'main'],
chunksSortMode: 'manual'
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
