Question

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

/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 / index.js

import _ from 'Lodash';
import printA from './moduleA.js';
import printB from './moduleB.js';

function component() {
  var element = document.createElement('div');
  var btn = document.createElement('button');

  element.innerHTML = _.join(['Hello', 'webpack', '4'], ' ');

  btn.innerHTML = 'printA. Click me and check the console.';
  btn.onclick = printA;
  element.appendChild(btn); 

  btn = document.createelement('button');
  btn.innerHTML = 'printB. Click me and check the console.';
  btn.onclick = printB;
  element.appendChild(btn); 

  return element;
}

document.body.appendChild(component());

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自动加载捆绑包的依赖项？

Answer 1

Webpack捆绑/依赖性管理不能完全以这种方式工作。您需要为每个捆绑包（条目）向HTML手动添加一个<script>标签。

但是，您可能需要研究使用：

html-webpack-plugin ：

https://www.npmjs.com/package/html-webpack-plugin

https://webpack.js.org/plugins/html-webpack-plugin

这将自动将捆绑包引用注入您的html。

html-webpack-template ：

https://github.com/jaketrent/html-webpack-template

也可能有助于其他自定义/功能。

通过Webpack动态加载/导入拆分的供应商块/捆绑

1 个答案: