在浏览器中动态加载 webpack 常用块（使用 requirejs）答案

【问题标题】：Dynamically loading webpack common chunks in browser (with requirejs)在浏览器中动态加载 webpack 常用块（使用 requirejs）
【发布时间】：2017-07-05 08:31:05
【问题描述】：

我正在尝试创建一个包含一些“供应商”依赖项（React、lodash、...）的 Webpack 包，并在我的 Web 应用程序中使用它们。

我遇到的问题是，我不想将我的 vendor.js 文件作为<script> 标签添加到我的页面，而是将require 或import 添加到我的页面中某种方式。

我尝试使用 requirejs，但不断出现错误提示

webpackjsonp 未定义

现在，根据我的阅读，webpackJsonp 是由 CommonsChunkPlugin 定义的，它不允许加载带有async 属性的脚本。

我的问题：我怎样才能仅在需要时动态加载依赖项（vendors.js、commons.js、...），同时仍然使用 webpack？

更多信息：我使用 Typescript 进行开发，它使用 commonjs 配置加载模块（例如：import {clone} from "lodash/clone"）

提前谢谢你。

【问题讨论】：

你使用 es6 导入。 commonjs 语法是require
是的，但我在 Typescript 中使用 es6 导入。如果我是对的，它会在编译时转换为 es5。

标签： javascript webpack

【解决方案1】：

您可以使用 webpack 内置的 code-splitting - require.ensure 或 import()。

【讨论】：

这意味着我必须更改我的（打字稿）源，对吗？
@Nsevens 是的。您应该在源代码中使用动态导入。
我正在寻找一种方法，例如在我的 html 中使用 require(["app"], function (app) {...})，然后根据需要加载 vendors.js。但是，由于您会在 requirejs 中使用 shim 等，这给了我 webpackJsonp is undefined 问题