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!

FAQs

What is dynamic-dual-import-webpack-plugin?

Is dynamic-dual-import-webpack-plugin popular?

Is dynamic-dual-import-webpack-plugin well maintained?

Package last updated on 16 Apr 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install