如何配置webpack的自动代码拆分功能以加载相对于构建输出文件夹的模块？

Question

我正在使用Webpack 2的自动代码拆分功能，将我的应用程序分成多个输出文件。 我的webpack.config.js文件是：

const path = require('path');

module.exports = {
  entry: './app.js',
  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'build'),
  }
}

这样可以将我的app.js文件与其他模块文件正确构建到build文件夹中。 构建目录包含以下文件：

main.js
0.js

我的问题是，当main.js请求0.js ，它是在应用程序的根目录而不是相对于其当前位置进行的。 因此，它基本上应该在应该加载localhost:8000/build/0.js时尝试加载localhost:8000/0.js 如何配置项目，以便项目相对于主入口点的路径正确加载拆分的模块？

Answer 1

默认情况下，Webpack将从根目录加载模块。 您可以通过在入口点声明__webpack_public_path__变量来配置Webpack将从哪个文件夹加载。 因此，对于这种情况，您可以使用：

__webpack_public_path__ = 'build/';

然后，Webpack将从build文件夹加载模块。 但是，这仍然是相对于根的。 为了告诉Webpack加载相对于入口点的脚本，您可以使用以下方法将__webpack_public_path__动态配置为入口点脚本的目录：

const scriptURL = document.currentScript.src;
__webpack_public_path__ = scriptURL.slice(0, scriptURL.lastIndexOf('/') + 1);

常绿浏览器很好地支持 document.currentScript ，但Internet Explorer不支持。

Answer 2

更新：

如果您有多个入口点，那么代码拆分通常会起作用，在这种情况下，您可以按需加载部分代码。 （例如，在requestidlecallback或setTimeout中，都没有关系）。

但通常它是用于路由，当你不希望加载逻辑上的设置/ ，但希望其装载到/settings 。

所以你可以添加类似

// goes to `/settings`
button.addEventListener('click', () => {
  require.ensure([], () => {
    require('./settings')
  })
})

您是否检查了require.ensure() ？

webpack在构建时会静态解析代码中的require.ensure（）并将此处的模块添加到单独的块中。 Webpack通过jsonp按需加载此新块。

https://webpack.js.org/guides/code-splitting-require/#require-ensure-