dynamic-dual-import-webpack-plugin's Introduction

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$/,  // for example
        use: [
          DynamicDualImportPlugin.loader({
            processRequireEnsure: true  // if you need process both `import()` and `require.ensure`
                // by default only `import()`
          }),
          {
            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(
  /* webpackChunkName: "my-chunk-name" */  // chunk name is mandatory!
  './my-module'
).then((m) => {
  m.doSomething();
});

require.ensure([], (require) => {
  const m = require('./my-module');
  m.doSomething();
}, 'my-chunk-name');  // chunk name is mandatory!

Recommend Projects