Question

我有点像webpack的新手，并且一直在尝试更简单的方法来调整/合并webpack配置。

以下代码添加到 webpack / lib / webpack.js 非常有帮助：

这是标准的webpack.js：

function webpack(options, callback) {
    var compiler;
    if(Array.isArray(options)) {
        compiler = new MultiCompiler(options.map(function(options) {
            return webpack(options);
        }));
    } else if(typeof options === "object") {
        new WebpackOptionsDefaulter().process(options);

        compiler = new Compiler();
        compiler.options = options;
        compiler.options = new WebpackOptionsApply().process(options, compiler);
        new NodeEnvironmentPlugin().apply(compiler);
        compiler.applyPlugins("environment");
        compiler.applyPlugins("after-environment");
    } else {
        throw new Error("Invalid argument: options");
    }
    if(callback) {
        if(typeof callback !== "function") throw new Error("Invalid argument: callback");
        if(options.watch === true || (Array.isArray(options) &&
                options.some(function(o) {
                    return o.watch;
                }))) {
            var watchOptions = (!Array.isArray(options) ? options : options[0]).watchOptions || {};
            // TODO remove this in next major version
            var watchDelay = (!Array.isArray(options) ? options : options[0]).watchDelay;
            if(watchDelay) {
                console.warn("options.watchDelay is deprecated: Use 'options.watchOptions.aggregateTimeout' instead");
                watchOptions.aggregateTimeout = watchDelay;
            }
            return compiler.watch(watchOptions, callback);
        }
        compiler.run(callback);
    }

这是我的代码：

    //customization start
    fs = require('fs');
    var fnp_dump = 'webpack.dump.json';

    fs.writeFile(fnp_dump, JSON.stringify(options, null, 2), function(err) {
        if(err) {
            return console.log(err);
        }
        console.log("dumping dump.webpack.js.final.json from webpack.js to: " + fnp_dump);
    }); 
    //customization end


    return compiler;
}

基本的想法是，在 webpack完成整理通常的 webpack.base.js + webpack.development.js >。由于它只是一个完全解析的javascript对象，因此各个开发人员编写config.js文件的方式并不重要。

现在您可以 diff 选项发送到webpack（这是将webpack 1转换为webpack 2配置的示例：

diff 003/webpack.dump.json 004/webpack.dump.json

< "loader": "style!css!postcss-loader!sass" --- > "use": [ > { > "loader": "style-loader" > }, > { > "loader": "postcss-loader" > }, > { > "loader": "sass-loader" > } > ]

但是，我正在直接自定义 webpack.js ，需要在每个npm update webpack后重新应用我的补丁。还有更好的方法吗？

Answer 1

如果您的webpack.config.js是一个功能，您可以自己调用它来解析对象。

如果您有多个配置（您提到webpack.base.js和webpack.development.js），则可以使用Webpack Merge将选项组合到单个对象，然后将其写入文件系统。

我建议您在package.json中创建一个自己的脚本来完成这项工作，然后您可以在webpack工作后随时调用：

...,
"scripts": {
    "dump-options": "scriptThatMergesConfigsAndWritesToFS.js",
    "webpack-job": "webpack ... && npm run dump-options",
    ...
},
...

更新

经过一些研究后我意识到，已解析的选项对象存储在编译器对象中。编译器对象被传递给插件，因此您可以easily write a Plugin将配置写入文件as I did here（未测试）。

我也意识到，插件无法进行字符串化，因为它们是函数，因此请注意丢失插件配置信息。

Answer 2

我最终编写了自己的插件（现在注意 wtho 也写了一个）。它对我有用 - 注意你需要有一些处理循环引用的代码：

// WebPackCompilationObserver.js

function WebPackCompilationObserver(options) {
  WebPackCompilationObserver.options = options || {};
}

WebPackCompilationObserver.prototype.apply = function(compiler) {

  compiler.plugin("emit", function(compilation, callback) {

    var fs = require('fs');
    var fnp_dump = WebPackCompilationObserver.options.dump_filename;

    if (! fnp_dump) {
      fnp_dump = "./dump.webpack.options.json";
      console.log("please specify dump_filename path in the WebPackCompilationObserver.options, otherwise using default:" % fnp_dump);
    }

    if (fnp_dump){
        console.log("dumping compilation.options to: " + fnp_dump);
        var cache = [];
        fs.writeFile(fnp_dump, JSON.stringify(compilation.options, function(key, value) {
              if (typeof value === 'object' && value !== null) {
                  if (cache.indexOf(value) !== -1) {
                      // Circular reference found, discard key
                      return;
                  }
                  // Store value in our collection
                  cache.push(value);
              }
              return value;
          }, 2),
          function(err) {
              if (err) {
                  return console.log(err);
              }
          });
        cache = null;
    }
    callback();
  });
};

module.exports = WebPackCompilationObserver;

使用它：

<强> webpack.config.development.js ： .... var WebPackCompilationObserver = require（＆＃34; ./ WebPackCompilationObserver＆＃34;）;

....

config.plugins = config.plugins.concat([
....
,new WebPackCompilationObserver({dump_filename: '../dumpithere.json'})
])

webpack：有一个很好的钩子/自定义函数来转储已解析的配置吗？

2 个答案:

更新