Webpack inject plugin
This plugin is useful when you have hashed bundles and a HTML entry point, it injects the newly hashed bundles in the entry point. It uses either the chunks or your manifest.
WARNING: For dev purpose you should NOT use hashed bundles because webpack dev server will NOT rewrite them and the memory taken will keep piling up.
usage:
yarn add webpack-inject-bundles-plugin
in your webpack.config.js
const config = entry: app: path plugins: in: 'src/index.html' publicPath: '/dist/' outputPath: 'assets/' outName: 'index.html' manifest: 'assets/manifest.json' //OPTIONAL
in your HTML entry point add <!-- inject js -->
and <!-- end inject -->
where you want your ouputted files to be.
You can also add <!-- inject css -->
and <!-- end inject -->
if you use extracttext or minicssextract
My app <!-- inject css --><!-- end inject --> <!-- inject js --> <!-- end inject -->
Options
in:
Where your Html entry point is located
publicPath:
the public path to serve your content
outputPath:
Where you want to output the newly inject html file
outName:
Name of the outputted file
manifest:
OPTIONAL: You can specify the oath to your manifest and the plugin with use it for injections
verbose:
For debug, lots of logs will be displayed
Known issues:
Scripts keeps piling up with webpack-dev-server, to avoid that you should create a script that builds with a parameter and then another one for your server Example:
in package.json
"scripts": "build": "webpack --progress" "start": "yarn build && webpack-dev-server --host 0.0.0.0 --env='dev-serv'" "buildProd": "rm -rf assets/dist/* && rm -r assets/index.html && yarn build && webpack --env=production"
In webpack config
const SERVE = processenvnpm_lifecycle_event || 'build'; if SERVE === 'start' || SERVE === undefined console; conf = devtool: 'eval' ); conf = }}