我想要实现的目标

我想在require / import语句的请求中动态替换某些占位符。据我所知，这个功能应该使用插件NormalModuleReplacementPlugin内置到Webpack中。

有什么问题？

该捆绑包是从Webpack构建的，我可以运行Web应用程序。我可以到达服务器，捆绑显然正在运行。但我从TS（？）得到解析器错误。使用插件NormalModuleReplacementPlugin时，会出现解析器错误，这些错误不会影响生成的包的功能。我仍然可以加载捆绑包，一切都很好。（将{@ 1}}替换占位符$platform（或任何其他）与hyperion中导入语句中文件a/b/c/test3.ts中的替换foo1/t/z/lil.platform.test.$platform

时会发生这种情况

错误是：

ERROR in ./a/b/c/test3.ts
(2,22): error TS2307: Cannot find module 'foo1/t/z/lil.platform.test.$platform'.

到目前为止我尝试了什么

我不知道为什么通过NormalModuleReplacementPlugin替换占位符会导致解析错误。我试图在webpack的源代码中找到解析别名，以便研究如何解析别名，但我无法在源代码中找到这些行。然后我尝试将自己的插件编写成＆＃34; normal-module-factory＆＃34;和＆＃34;之前/之后 - 解决＆＃34;导致同样的情况。（我自己的插件也位于webpack.config.js）。在这里，我调查了＆＃34;结果＆＃34;对象传递给＆＃34;之前/之后 - 解析＆＃34;挂钩。我还尝试在＆＃34; before-resolve＆＃34;中覆盖result.dependency.userRequest和result.dependency.request以及result.userRequest。钩。

PS：webpack.config.js的反馈和/或提示也不错;）

为简单起见，我还在此发布了webpack.config.js：

var path = require("path");
var webpack = require("webpack");
var $ld = require("lodash");
var fs = require("fs");


function DynamicPathReplacementPlugin(placeholder, replacement) {
  var _ = require('lodash');

  if (!placeholder) {
    throw new Error('Webpack DynamicPathReplacementPlugin: argument "placeholder" must be defined!')
  }
  if (!replacement) {
    throw new Error('Webpack DynamicPathReplacementPlugin: argument "replacement" must be defined!')
  }
  if (!_.isRegExp(placeholder) && !_.isString(placeholder)) {
    throw new Error('Webpack DynamicPathReplacementPlugin: argument "placeholder" must be either a RegExp or a String!')
  }
  if (!_.isFunction(replacement) && !_.isString(replacement)) {
    throw new Error('Webpack DynamicPathReplacementPlugin: argument "replacement" must be either a Function or a String!')
  }

  return {
    'apply':  function(compiler) {
      compiler.plugin(
        'normal-module-factory',

        function(normalModuleFactory) {
          normalModuleFactory.plugin(
            'before-resolve',

            function (result, callback) {
              if(!result) return callback();
              if (_.isFunction(replacement)) {
                replacement = _.bind(replacement, {}, placeholder);
              }
              result.request = _.replace(result.request, placeholder, replacement);

              return callback(null, result);
            }
          );
          normalModuleFactory.plugin(
            'after-resolve',

            function (result, callback) {

              if(!result) return callback();
              if (_.isFunction(replacement)) {
                replacement = _.bind(replacement, {}, placeholder);
              }
              // result.resource = path.resolve(path.dirname(result.resource), _.replace(result.resource, placeholder, replacement));
              if (result.request.includes("lil")){
                console.log(result)
                // console.log(path.basename(_.replace(result.resource, placeholder, replacement)))
                // result.resource = path.basename(_.replace(result.request, placeholder, replacement));
                // result.request = _.replace(result.resource, placeholder, replacement);
                // result.userRequest = _.replace(result.request, placeholder, replacement);
              }
              return callback(null, result);
            }
          );
        }
      );

      // compiler.plugin("after-resolvers", function(compiler) {
      //   console.log("after-resolvers", compiler.resolvers.normal.apply)
      // });
    }
  };
}


module.exports = {
  debug: true,
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  target: 'web',
  module: {
    loaders: [
      {test: /\.less$/, loaders: ['style', 'css', 'less']},
      {test: /\.css$/, loaders: ['style', 'css']},
      {test: /\.(png|jpg)$/, loader: 'file'},
      {test: /\.html$/, loader: 'html'},
      {test: /\.json$/, loader: 'json'},
      {test: /\.ts$/, loaders: ['ts']},
      {test: /\.js$/, loader: 'babel', query: {presets: ['es2015', 'react']}},
    ]
  },
  resolve : {
    extensions: ['', '.js', '.ts', '.json'],
    root: [
      path.resolve(__dirname),
      //path.resolve('./src'), // Beispiele für die Anwendung von globalen Pfaden
      //path.resolve('./src/q/w'),
      ],
    alias: {
      foo: "a/b",
      bar: "a/b/c/bar/src",
      bar1: "a/b/c/bar1/src",
      foo1: "src/q/w/e/r",
      baz: "src/q"
    }
  },
  plugins: [
    // DynamicPathReplacementPlugin(/\$platform/, function(a) {
    //   console.log("exec3", a);
    //   return "hyperion"
    // }),
    new webpack.NormalModuleReplacementPlugin(/\$platform/, function(result) {
      console.log("exec");
      var temp = $ld.replace(result.request, /\$platform/gi, "hyperion");
      // $ld.set(result, 'dependency.userRequest', temp);
      // $ld.set(result, 'dependency.request', temp);
      result.request = temp;
    })
  ]
};

Webpack：NormalModuleReplacementPlugin - ＆gt; TS分析器错误：＆＃34;找不到模块...＆＃39;＆＃34;，但构建的捆绑包正在运行

我想要实现的目标

有什么问题？

到目前为止我尝试了什么

0 个答案: