具有动态导入的 webpack 脚本加载器答案

【问题标题】：webpack script-loader with dynamic import具有动态导入的 webpack 脚本加载器
【发布时间】：2017-10-30 17:09:03
【问题描述】：

webpack.config.js

  resolve: {
    modules: ['node_modules', 'src/client'],
    alias: {
      node_modules: process.cwd() + '/node_modules',
      ace: 'node_modules/ace/build/src'
    }
  }

这行得通：

import 'script-loader!ace/ace';
import 'script-loader!ace/theme-monokai';
import 'script-loader!ace/worker-javascript';
import 'script-loader!ace/mode-javascript';

但是使用以下代码我收到一个错误：

Promise.all([
    import('script-loader!ace/ace');
    import('script-loader!ace/theme-monokai');
    import('script-loader!ace/worker-javascript');
    import('script-loader!ace/mode-javascript');
])

[脚本加载器] ReferenceError: 未定义

我认为脚本加载器与动态导入的行为不同！？或者我做错了什么:(

【问题讨论】：

标签： dynamic import webpack loader

【解决方案1】：

如果我将它添加到我的 webpack.config.js 作品中...

module: {
  rules: [{
    test: [
      process.cwd() + '/node_modules/ace/build/src/ace',
      process.cwd() + '/node_modules/ace/build/src/theme-monokai',
      process.cwd() + '/node_modules/ace/build/src/mode-json'
    ],
    loader: 'script-loader'
  }]
},

resolve: {
  modules: ['node_modules'],
  alias: {
    node_modules: process.cwd() + '/node_modules',
    ace: 'node_modules/ace/build/src'
  }
}

在代码之后我可以：

Promise.all([
  import('ace/ace'),
  import('ace/theme-monokai'),
  import('ace/mode-javascript')
])

【讨论】：