如何从 webpack 中排除模块，并使用 es6 导入它

Question

我目前正在使用 webpack 将 javascript 文件与 React 捆绑在一起。该文件还有另一个导入语句到我的项目中的另一个模块

import { MyModule} from './MyModuleFile.js'

有没有办法从 webpack 包中排除 MyModule.js，并保持导入不变？

Answer 1

您所追求的可能是 externals

中的

webpack.config.js

选项

module.exports = {
  //...
  externals: {
     './MyModuleFile': 'MyModule',
  }
};

这假设您将手动将脚本包含在 HTML 中，这将公开

MyModule

全局

如果您真的想使用 ES6 导入，您可以使用相同的技术，因为您放入其中的所有内容都将按原样导出

module.exports = {
  //...
  externals: {
     './MyModuleFile': 'import("MyModuleUrl")',
  }
};

但请确保使用异步版本的导入

import('./MyModuleFile').then(({default: MyModule}) => doSomethingWith(MyModule));

或者使用

webpackIgnore

注释保持导入不变，而不更改配置

import(/* webpackIgnore: true */'MyModuleUrl').then(({default: MyModule}) => doSomethingWith(MyModule));

Answer 2

我认为你可以使用外部来保持导入完全按原样。

我知道这可以与 lambda 捆绑在一起，其中 aws-sdk 已经存在于环境中的 node_modules 中：

module.exports = {
  //...
  externals: {
     'aws-sdk': 'aws-sdk',
  }
};

所以我认为这也适用于您的具体问题

module.exports = {
  //...
  externals: {
     './MyModuleFile.js': './MyModuleFile.js',
  }
};

Answer 3

只需将其添加到

exclude

的加载程序配置中的

webpack.config.js

选项即可：

rules: [
  // rules for modules (configure loaders, parser options, etc.)
  {
    test: /\.js$/,
    exclude: [
      /node_modules/,
      /MyModuleFile/
    ],
    ...
  }
]

https://webpack.js.org/configuration/module/#rule-exclude