主页 / 问题 / 970791
Accepted
pepel_xD
Asked:2020-04-17 20:18:38 +0000 UTC2020-04-17 20:18:38 +0000 UTC

webpack 动态导入

  • 772

我试图弄清楚 webpack 的动态导入。照我看来。
假设我有一条路线，根据哈希值，应该连接一个或另一个模块：

changeRout(rout) {
    const comp = this.routes[rout] || 'error';
    import(`../components/${comp}`)
    .then(({default: comp}) => {comp.render()})
    .catch(err => console.log(err));
}

为此，正如大师在他们的文章中所写，我安装了

'dynamic-import-webpack'
'@babel/plugin-syntax-dynamic-import'

Xs 需要哪一个，但在 webpack 文档中给出了 @babel/plugin-syntax-dynamic-import，在我读到的一些关于 dynamic-import-webpack 的文章中。基本上都离开了。配置中处理js文件的规则如下：

{
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['@babel/preset-env', {modules: false}]],
            plugins: ['@babel/plugin-syntax-dynamic-import', 'dynamic-import-webpack']
          }
        }
      }

还发了

optimization: {
splitChunks: {
  chunks: 'all'
}

一切似乎都很好，但是，webpack 会生成一个带有模块的通用文件并将其直接连接到页面，但我希望模块块是分开的，并且仅在经过特定路线时才连接。结果，我得到了3个文件
vendors ~ main.js - 这里，据我了解，有各种样式加载器pag等的功能。
0.js - 这是所有模块的代码（我希望每个模块都有自己的块）
main.js - 嗯，主文件（入口点）

javascript

1 个回答

  1. Best Answer

    他webpack了解动态的语法，import()不需要额外的工具/转换器。
    所有动态模块加载都是webpack开箱即用的。

    至于babel问题中提到的插件。webpack当他自己知道如何进行动态导入时，为什么还需要它们？
    它们对于 是必需的babel，因此它不会对视图的构造发誓import并且不会给出错误：

    SyntaxError: <filePath>:
Support for the experimental syntax 'dynamicImport' isn't currently enabled

    该插件将仅标记构造import()在此上下文中有效，并且可以进一步继续工作。这可以通过一个例子看出：这样的代码 babel会发誓，但是如果你连接@babel/plugin-syntax-dynamic-import，那么一切都会有秩序，并且源代码和结果将是相同的，因为 该插件只是设置一个内部标志babel而不转换任何东西：插件源代码。

    • @babel/plugin-syntax-dynamic-import. 应该已经很清楚了，我还要注意官方文档中webpack在描述案例的时候有提到async/await，建议用 来转换babel，为了babel正常工作，还要求连接这个插件. 那些。文档没有说要明确使用它，只有在需要时才使用。

    • dynamic-import-webpack. 需要此插件才能转换import()为旧的 webpack 动态视图导入require.ensure。已经webpack官方支持import()了，所以目前这个插件没有意义。此外，此视图不支持动态值import()：模块名称必须是明确的硬根，即 不能写

      // ...
import(`./my-module${index}`)
// ...

      需要手动描述所有模块

      // ...
import('./my-module1')
// ...
import('./my-module2')
// ...
import('./my-module3')
// ...

      否则，它将webpack把所有带有前缀的模块my-module放在一个块中。

    基于此：

    • 如果您正在使用babel，您还需要启用该插件@babel/plugin-syntax-dynamic-import；

    • 如果您不使用babel，则不需要任何插件。

    具体来说，在您的情况下，问题是由于插件引起的dynamic-import-webpack，如果您将其删除，一切都应该没问题。

    另外，我举了两个例子：一个只使用webpack，另一个webpack加babel。该示例必须使用命令运行

    npm start

    打开页面后，点击任意按钮，你会看到脚本是动态加载的（network tab和console）
    Example 1
    Example 2 (with babel)

    从问题中不清楚webpack您使用的是哪个版本，很可能是最新的（目前是 4）。

    更新
    如果你有 webpack 版本>=4.29.0，你会收到如下错误：

    Module parse failed: 'import' and 'export' may only appear at the top level
You may need an appropriate loader to handle this file type.

    那么这个bug最有可能被复制：https ://github.com/webpack/webpack/issues/8656

    有几个解决方法：

    1. 将 webback 降级到版本4.28.4
    2. 修复导致问题的软件包版本acorn的问题。
      1）添加一个部分 resolutions：package.json
      "resolutions": {
    "webpack/acorn": "6.1.1"
}
      acorn2）使用版本 安装软件包6.1.1： 
      npm i --save-dev acorn@^6.1.1
      3) 运行npm dedupe
    • 7

相关问题