javascript - Webpack快速导入规则

我需要将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"

那那行被翻译成前面提到的那行吗？因此，我可以避免在每个文件中键入相同的内容。

最佳答案

您可以使用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"。