Javascript 通过网页包动态加载/导入拆分的供应商区块/捆绑包_Javascript_Webpack_Babeljs

Javascript 通过网页包动态加载/导入拆分的供应商区块/捆绑包

javascript webpack

Javascript 通过网页包动态加载/导入拆分的供应商区块/捆绑包,javascript,webpack,babeljs,Javascript,Webpack,Babeljs,我有一个简单的示例应用程序，其结构如下： /dist index.html app.bundle.js moduleA.bundle.js moduleB.bundle.js vendors~app~moduleA~moduleB.bundle.js [...sourcemaps] /node_modules [...] /src index.js moduleA.js moduleB.js package.json

我有一个简单的示例应用程序，其结构如下：

/dist
    index.html
    app.bundle.js
    moduleA.bundle.js
    moduleB.bundle.js
    vendors~app~moduleA~moduleB.bundle.js
    [...sourcemaps]
/node_modules
    [...]
/src
    index.js
    moduleA.js
    moduleB.js
package.json
webpack.config.js

index.html

<!DOCTYPE html>
 <html>
    <head>
        <meta charset="UTF-8">
        <title>Test Dependency Pulls</title>
    </head>
    <body>
        <script type="text/javascript" src="app.bundle.js"></script>
    </body>
 </html>

src/moduleA.js

import printB from './moduleB.js';

export default function printA() {
  console.log('AAA I get called from moduleA.js!');
}

src/moduleB.js

import _ from 'Lodash';

export default function printB() {
  console.log('BBB I get called from moduleB.js!');
}

/webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: {
    app: './src/index.js',
    moduleA: './src/moduleA.js',
    moduleB: './src/moduleB.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
}

当我拉入app.bundle.js时，我希望供应商捆绑包也会自动拉入，因为它是app.js的依赖项。目前，这种情况并未发生-未加载供应商捆绑包。我甚至没有在“网络”选项卡中看到任何尝试

如何告诉webpack自动加载捆绑包的依赖项？

webpack捆绑/依赖项管理不完全以这种方式工作。您需要为每个捆绑包（条目）在html中手动添加一个

标记

但是，您可能需要考虑使用：

html网页包插件：

这将自动将包引用注入html

html网页包模板：

还可能有助于其他定制/功能。

感谢您的回复！如果我通过任何GET请求拉入一个条目捆绑包，该条目捆绑包不应该自动拉入它的非条目块吗？@howdodocomputer当您引用一个捆绑包时，它只包括已经是该捆绑包一部分的依赖项-没有其他依赖项的动态“拉入”（这一切都发生在构建期间）。您可以使用

webpack bundle analyzer

验证捆绑包中的内容：有人知道是否仍然没有办法做到这一点吗？我基本上是在尝试实现与@HowDoIDoComputer相同的功能，使用webpack创建只在JS中使用的模块包。向页面添加脚本标记对我来说不是一个选项，我也不使用生成的HTML。我很难理解为什么需要手动包含块的要求在大多数情况下不会使

splitChunks

优化毫无用处。像这样的优化应该在很大程度上与代码的使用方式是一致的，IMO:(

const path = require('path');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: {
    app: './src/index.js',
    moduleA: './src/moduleA.js',
    moduleB: './src/moduleB.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
}