Dynamic Module Import with its own chunk dependencies

问题

I am trying to use Module Dynamic Import to create a bundle with an npm package using this is an excellent tutorial: https://webpack.js.org/guides/code-splitting/

But the npm package that I want to load dynamically has its own chunk dependencies:

npm package chunk dependencies

I can see that Webpack created correctly the vendor chunk:

files generated

But the npm package to import 's chunks are not re-imported, so it fails:

the error

I googled a lot but I couldn't find much information about it and, I don't know if it is a bug, misconfiguration or it is not possible.

CONFIG:

// my-project/index.js
const initializeLiveAR = await import(/* webpackChunkName: */ 'revieve-livear-module'); "livear_[index]"

// webpack.config.js
module.exports = {
  entry: {
    'revieve-sdk': path.resolve(__dirname, config.main_entry),
    demoAR: path.resolve(__dirname, config.demoAR),
    demoPR: path.resolve(__dirname, config.demoPR),
  },
  devtool: 'source-map',
  mode: process.env.NODE_ENV,
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: '/',
    filename: '[name].min.js',
    chunkFilename: '[name].chunk.js',
    libraryTarget: 'umd',
  },
  plugins: [
    process.env.ANALYZEBUNDLE ? new BundleAnalyzerPlugin() : function() {},
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
    }),
    new CopyWebpackPlugin([
      { from: 'index.html', to: '.' },
      { from: 'test', to: './test' },
      { from: 'changelog.md', to: '.' },
    ]),
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
      },
    ],
  },
};

来源：https://stackoverflow.com/questions/55413594/dynamic-module-import-with-its-own-chunk-dependencies

标签

webpack-4