script-ext-html-webpack-plugin2 v0.0.1
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: [
new ScriptExtHtmlWebpackPlugin() << 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: [
new HtmlWebpackPlugin({...}),
new ScriptExtHtmlWebpackPlugin()
]
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: [
new HtmlWebpackPlugin({...}),
new ScriptExtHtmlWebpackPlugin('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: [
new HtmlWebpackPlugin({...}),
new ScriptExtHtmlWebpackPlugin({
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: [
...
new ScriptExtHtmlWebpackPlugin({
minify: true
})
]
Custom minification:
plugins: [
...
new ScriptExtHtmlWebpackPlugin({
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'
},
output.filename = '[name].js',
module.loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
include: [
'page-1-path'
]
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [
'page-2-path'
]
}
],
plugins: [
new HtmlWebpackPlugin({
chunks: ['entry1'],
filename: 'page1.html'
}),
new HtmlWebpackPlugin({
chunks: ['entry2'],
filename: 'page2.html'
}),
new ScriptExtHtmlWebpackPlugin({
chunks: ['entry1']
}),
new ScriptExtHtmlWebpackPlugin({
chunks: ['entry2']
})
],
...
}
return webpackConfig;
6 years ago