如何从 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")',
  }
};

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

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

或者使用webpackIgnore注释保持导入不变而不更改配置

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

Answer 2

只需将其添加到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