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"毫不麻烦。