javascript - 如何从 webpack 中排除模块，而是使用 es6 导入它

Question

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

从 './MyModuleFile.js' 导入 { MyModule}


有没有办法从 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));