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',
  },
},

这样您就可以轻松import snap from "snapsvg"。