Installation
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).
Basic Usage
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
That's it.
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:
enabled
: [true|false
] - for switching the plugin on and off (default:true
);file
: the js filename - previously, the singleString
argument (default: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);position
: [head-top
|head-bottom
|body-top
|body-bottom
|plugin
] - all (hopefully) self-explanatory exceptplugin
, which means defer to html-webpack-plugin'sinject
option (default:plugin
);minify
: see next sectionjsRegExp
: A regular expression that indicates the js filename (default: /.js$/);
So to put the JS at the bottom of the <head>
element:
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
Default minification:
plugins: ... minify: true
Custom minification:
plugins: ... minify: level: 1: all: false tidySelectors: 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;