webpack快速导入规则

Question

我需要使用 webpack with 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" 毫不费力。

webpack快速导入规则

Webpack fast import rule

javascript

webpack

webpack-2

别名导入