Question

是否有一种从webpack配置中获取webpack别名的好方法：

config.resolve.alias = {
  NormalizeNodePath: (__dirname, 'node_modules/normalize.css/normalize.css'),
  BluePrintIconsNodePath: (__dirname, 'node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css'),
  BluePrintCoreNodePath: (__dirname, 'node_modules/@blueprintjs/core/lib/css/blueprint.css')
}

并在javascript中将其公开为字符串？

Answer 1

如果我对问题的理解正确，有几种方法可以完成此任务。

为这些字符串定义一个变量，然后将其导入您的代码和webpack配置中

// paths.js
const NormalizeNodePath = join(__dirname, 'node_modules/normalize.css/normalize.css')

module.exports = {
  NormalizeNodePath,
}

// webpack.config.js
const { NormalizeNodePath } = require('./paths')

// use it in alias config

// src/whatever.js
const { NormalizeNodePath } = require('../paths')
// use in your code

使用DefinePlugin并将其公开为代码中的常量，该值在捆绑期间将替换为文字字符串。

const NormalizeNodePath = join(__dirname, 'node_modules/normalize.css/normalize.css')

module.exports = {
  // other config...

  resolve: {
    alias: {
      NormalizeNodePath
    },
  },
  plugins: [
    new webpack.DefinePlugin({
      NormalizeNodePath,
    })
  ]
}

// Use the variable name `NormalizeNodePath` in your code

Answer 2

您可以使用DefinePlugin将全局变量注入代码中。

示例

const alias = {
  NormalizeNodePath: (__dirname, "node_modules/normalize.css/normalize.css"),
  BluePrintIconsNodePath: (__dirname, "node_modules/@blueprintjs/icons/lib/css/blueprint-icons.css"),
  BluePrintCoreNodePath: (__dirname, "node_modules/@blueprintjs/core/lib/css/blueprint.css")
};

const config = {
  resolve: {
    alias
  },
  plugins: [new webpack.DefinePlugin(alias)]
};

从webpack别名获取扩展路径

2 个答案: