javascript - webpack快速导入规则

Question

我需要使用 webpack与 snapsvg .根据 snapsvg 的文档，要使用 webpack 导入它，我需要使用加载器:

const Snap = require(`imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js`);

所以，在我使用的每个 Javascript 文件中，我都需要写这个东西。我想避免它。

别名导入

有没有办法，也许在 webpack.config.js 中，指定每次遇到这种情况:

import snap from "snapsvg"

然后那一行翻译成前面提到的那一行？这样我就可以避免在每个文件中键入相同的内容。

Answer 1

您可以使用 this rule :

安装 Imports Loader (npm i -D imports-loader) 并将其添加到您的 webpack 配置中:

module: {
  rules: [
    {
      test: require.resolve('snapsvg/dist/snap.svg.js'),
      use: 'imports-loader?this=>window,fix=>module.exports=0',
    },
  ],
},
resolve: {
  alias: {
    snapsvg: 'snapsvg/dist/snap.svg.js',
  },
},

有了它，您可以从“snapsvg”导入 snap 而不费事。