0.3.0 • Published 7 years ago
webpack-plugin-network-hints v0.3.0
webpack-plugin-network-hints
Inject network hints automatic, cooperate with html-webpack-plugin.
Usage
# or npm install webpack-plugin-network-hints --only=dev;
yarn add webpack-plugin-network-hints --dev;Options
options.verbose
Optional, default false. whether output hints resource into stdout.
options.prefetch
Optional, default []. prefetch hints glob.
options.preload
Optional, default []. preload hints glob, not implement yet.
Example
Modify template for html-webpack-plugin, pay attention onto the link tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack Plugin</title>
<!-- slot network prefetch hints -->
<link data-id="posthtml-inject" data-name="prefetch:hints">
<!-- slot network prefetch hints -->
</head>
<body>
</body>
</html>Then config the webpack:
const configuration = {
entry: path.resolve(process.cwd(), '__fixture__', 'index.js'),
resolve: {
extensions: ['.js']
},
output: {
path: path.resolve(process.cwd(), 'dist'),
filename: '[name].js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.jpg$/,
use: [
{
loader: 'file-loader',
options: {
name: 'asset/[name].[ext]'
}
}
]
}
]
},
plugins: [
Reflect.construct(HtmlWebpackPlugin, [{
template: path.resolve(process.cwd(), '__fixture__', 'index.html'),
inject: 'body'
}]),
Reflect.construct(NetworkHintsPlugin, [{
verbose: true,
prefetch: ['asset/prefetch-*.*']
}])
]
};Finally output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Webpack Plugin</title>
<!-- slot network prefetch hints -->
<link rel="prefetch" href="/asset/prefetch-cartoon-1.jpg">
<link rel="prefetch" href="/asset/prefetch-cartoon-2.jpg">
<!-- slot network prefetch hints -->
</head>
<body>
<script type="text/javascript" src="/main.js"></script></body>
</html>License
MIT
0.3.0
7 years ago