You can be running webpack v1.x or v2.x on node v4 or higher.
Install the plugin with npm:
$ npm install --save-dev script-ext-html-webpack-plugin
Note: you may see the following warning:
npm WARN html-webpack-plugin@XXX requires a peer of webpack@* but none was installed.
This is fine - for testing, we dynamically download multiple version of webpack (via the dynavers module).
Use Case: Internalize all your JS
Add the plugin to your webpack config.
The order is important - the plugin must come after HtmlWebpackPlugin and ExtractTextWebpackPlugin:
module:loaders:test: /\.js$/ loader: 'babel-loader'plugins:<< add the plugin
Note that for this simple configuration, HtmlWebpackPlugin's inject option must not be
false. However, this constraint does not apply if you specify the
position - see 'Use Case: Specifying Position of Style Element' below
Use Case: Internalize critical JS only
Add the plugin and use more than one loader for your JS:
module:loaders:test: /\.js$/ loader: 'babel-loader'plugins:...
Use Case: Internalize critical JS with all other JS in an external file
Use two instances of ExtractTextPlugin and tell ScriptExtWebpackPlugin which one to target by giving it the name of the output file:
return...module:loaders:test: /\.js$/ loader: 'babel-loader'plugins:...'internal.js' << tell the plugin which to target
Use Case: Specifying Position of Script Element
In the above cases, the positioning of the
<script> element is controlled by the
inject option specified by html-webpack-plugin.
For more control, you can use an extended, hash version of the configuration. This can have the following properties:
true|false] - for switching the plugin on and off (default:
file: the js filename - previously, the single
undefined- uses the first js file found in the compilation);
chunks: which chunks the plugin scans for the js file - see the next Use Case: Multiple HTML files for usage (default:
undefined- scans all chunks);
plugin] - all (hopefully) self-explanatory except
plugin, which means defer to html-webpack-plugin's
minify: see next section
jsRegExp: A regular expression that indicates the js filename (default: /.js$/);
So to put the JS at the bottom of the
module:loaders:test: /\.js$/ loader: 'babel-loader'plugins:...position: 'head-bottom'
Use Case: Minification/Optimisation
The inlined JS can be minified/optimised using the extended, hash version of the configuration. Use the
minify property with one of the following values:
false: the default, does not minify;
true: minifies with default options;
- a hash of the minification options. Minification is carried out by the uglify-js optimizer
plugins:...minify:level:1:all: falsetidySelectors: true
Use Case: Multiple HTML files
html-webpack-plugin can generate multiple html files if you use multiple instances of the plugin. If you want each html page to be based on different assets (e.g a set of pages) you do this by focussing each html-webpack-plugin instance on a particular entry point via its
chunks configuration option.
script-ext-html-webpack-plugin supports this approach by offering the same
chunks option. As you also need an instance of extract-text-webpack-plugin, the configuration is quite unwieldy:
...const webpackConfig =...entry:entry1: 'page-1-path/script.js'entry2: 'page-2-path/script.js'outputfilename = '[name].js'moduleloaders:test: /\.js$/loader: 'babel-loader'include:'page-1-path'test: /\.js$/loader: 'babel-loader'include:'page-2-path'plugins:chunks: 'entry1'filename: 'page1.html'chunks: 'entry2'filename: 'page2.html'chunks: 'entry1'chunks: 'entry2'...return webpackConfig;