Webpack 如何使用require.sure拆分网页包中的代码以确保生产？

我正在使用Webpack，我想将我的客户端代码分成几部分，并在用户需要时加载它们

以下是我的文件结构：

app.js       <-- Entry point as introduced to Webpack
Module.js    <-- To be loaded dynamically

我使用了

“/”+path

，只是为了确保Webpack不会在我身上变得很聪明，并尝试静态解析路径。无论如何，这段代码在WebpackDev服务器的开发模式下工作。我的意思是，在触发事件以运行上述代码之前，不会下载

Module.js

。在那之后，它被完美地加载和执行

但是当我把项目打包生产时，它就停止工作了。它甚至未尝试发送请求就发出以下错误（在浏览器中触发下载事件时）：

未捕获错误：找不到模块“./module”

此外，当我动态组合路径（如上面的代码）时，构建过程会发出以下警告：

./src/app/app.js中的警告 关键依赖项： 74:34-47依赖项的请求是一个表达式

为产品配置Webpack以支持动态下载代码拆分的正确方法是什么

---

我已经测试了@wollnyst给出的解决方案，下面是结果。当我像这样实现它时，它是有效的：

require.确保（[“/模块]，（require）=>{
让path=“Module”；
let module=require（“./”+路径）。默认值；
});

但这不是我想要的，我想要这样：

let path=“模块”；
require.确保（[“/”+路径]，（require）=>{
let module=require（“./”+路径）。默认值；
});

现在，它在浏览器中发出一个运行时错误：

未捕获的类型错误：网页需要（…）。确保不是功能

---

还是不走运

您需要在

require的第一个参数中传递所需的模块。请确保

：

require.ensure(['./Module'], function(require) {
    const module = require('./Module');
});

---

将动态需要的路径放入

require中。确保
array first参数错误且不应执行此操作。此数组用于要动态加载的模块的依赖项，以及回调中的异步代码安全运行所需的依赖项

理解webpack如何处理代码拆分的关键部分在于，您不能完全执行动态语句，因为webpack需要一些位置信息来解析您想要的模块，因此，
依赖关系是一个表达式
警告。即使您可以像预处理
/
那样变得聪明，但最好使用静态模块路径字符串实际重复完整的
sure
语句，即使您有许多模块需要动态加载，这有点令人讨厌，这样您就不会遇到任何问题

另一种方法是创建一个专门用于此目的的文件夹，例如，
splits
，并从此处解析所有模块。但这意味着您在这个目录中需要的每个模块都将位于同一个拆分点，除了特定的用例之外，其他任何人都不需要


关于配置，您需要使用
namedModulesPlugins
和
commonchunkplugin
插件。我个人所做的是拥有一个包含所有公共源的
main.js
，一个包含所有公共
节点模块的
vendor.js
，以及一个
runtime.js
（webpack需要）。然后，将块分开，如果一个块依赖于特定的供应商依赖关系，则它将被添加到该特定块中，而不是添加到公共的
vendor.js

插件：[
新的webpack.NamedModulesPlugin（），
新建webpack.optimize.commonChunkPlugin({
名称：'供应商'，
minChunks:module=>module.context&&module.context.indexOf（'node_modules'），
}),
新建webpack.optimize.commonChunkPlugin({
名称：“运行时”，
}),
],

您还可以确保具有类似以下内容的
output.filename
：

输出：{
文件名：'[name]-[chunkhash].js',，
}

否则，
vendor.js
的散列将在每次源代码更改时更改，即使您没有修改DEP，如果您担心缓存，这是不好的

最近的是一个非常好的工具，可以检查包和块的外观，并验证一切正常，或者检测可以更好地进行块划分的依赖关系。如果使用
StatsWriterPlugin
来收集统计信息，以便处理数据块，您可能需要更改一点配置：

新StatsWriterPlugin({
字段：null，
转换：（数据，选项）=>{
const stats=opts.compiler.getStats（）.toJson（{chunkModules:true}）
返回JSON.stringify（stats，null，2）
},
}),


还有一点需要注意的是，
require。请确保
是特定于网页包的，并且被它现在也处理的
import（）
所取代。由于这个问题来自2016年，可能与我们现在在Webpack2中遇到的元素不一样，我将对此进行一些扩展

现在，该提案正在进入ES，您可以在网页中使用它。您将需要一个和类似babel插件的东西（现在应该在中），或者如果这对您不起作用（基本上是将
import（）
转换为
确保
）

如果您想为每个模块获得一个块，您仍然需要指定完整路径，如使用sure，但这是一种更好的语法，并且在将来更具方向性

在新的网页文档页面上，您可以查看许多其他资源。
您的解决方案有点可行，也有点不可行！我已将结果包括在问题中。谢谢。您不需要为了动态加载而使模块路径动态<代码>要求。确保
注意到这一点。静态路径在您的应用程序中可以正常工作case@RaiyanMohammed对不起，我不明白！在里面