dynamic-dual-import-webpack-plugin
Makes dual import (js chunk + css chunk) for dynamic import and require.ensure.
It works in cooperation with extract-css-chunks-webpack-plugin.
How to setup
1. Add plugins to webpack.config.js:
var ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');
var DynamicDualImportPlugin = require('dynamic-dual-import-webpack-plugin');
module.exports = {
plugins: [
new ExtractCssChunksPlugin({
filename: '[name].css'
}),
new DynamicDualImportPlugin({
cssChunksHashFilename: 'css_chunks_hash.js'
}),
]
};
2. Add loaders to webpack.plugin.js:
module.exports = {
module: {
rules: [
{
test: /\.ts$/,
use: [
DynamicDualImportPlugin.loader({
processRequireEnsure: true
}),
{
loader: 'ts-loader'
},
]
},
3. Include chunks hash into your html:
<head>
...
<script type="text/javascript" src="/my_public_path/css_chunks_hash.js"></script>
</head>
4. After this import()
and require.ensure
will automatically import both .js and .css chunks.
But format have to be:
import(
'./my-module'
).then((m) => {
m.doSomething();
});
require.ensure([], (require) => {
const m = require('./my-module');
m.doSomething();
}, 'my-chunk-name');