用于 Rails 资产兼容清单的 Webpack 插件

Question

我正在尝试用基于 webpack 的管道完全替换 rails 资产管道。我已经使用webpack-dev-server 和热重载等进行了开发设置，所有这些都运行良好。现在我想要实现的是生产的编译步骤，它将模仿 rails 编译资产的方式（消化/生成兼容的 manifest.json 文件），这样我仍然可以使用像 javascript_include_tag 这样的助手。这就是我的地方我卡住了。

我已经阅读了很多关于使用 webpack 和 rails 的教程，但他们最终都编写了自己的视图助手来加载资产。我试图避免这种情况，因为我不想要额外的开销或让开发人员需要了解不同的管道。我还希望像 asset_host= 这样的配置能够开箱即用地使用 CDN 等。

最终，我想要的是类似于 gulp-rev-rails-manifest 的东西，它会在编译时生成一个兼容 rails-asset-pipeline 的清单文件，但我还没有找到适用于 Webpack 的插件。所以...

1. 是否可以通过 gulp 流运行 webpack 构建仅使用 webpack（即不使用 gulp-webpack），因此我可以使用上述 gulp 插件。我不想使用 gulp-webpack 的原因是它接管了您的条目/输出等，我发现整个设置令人困惑，因为这一切都已经存在于 webpack.config

或者

1. 有没有人有任何关于为 Webpack 编写插件的好资源。对我来说，这似乎有点像一个黑盒子，官方网站有一个“如何编写插件”的菜单部分，但它实际上并不是任何东西的链接。

或者

1. 实际上是否有一个插件可以做到这一点，我不知道如何在互联网上正确搜索。

非常感谢任何帮助:)

Answer 1

在 gulp 任务中运行 webpack 是 very simple:

var webpack = require('webpack');
var webpackConfig = require('./webpack.config');

gulp.task('webpack', function(done) {
  webpack(webpackConfig, function(err, stats) {
    done(err);
  });
});

请注意，提供给 webpack 回调的 stats 对象包含有关 webpack 发出的所有资产的信息，因此您可以使用它来生成自己的清单。

这里有一些你可能会觉得有用的 webpack 插件：

• https://github.com/sporto/assets-webpack-plugin
• https://github.com/danethurber/webpack-manifest-plugin
• https://github.com/diurnalist/chunk-manifest-webpack-plugin

虽然没有关于如何创建插件的官方教程，但仍有一个 Plugin API 文档描述了您的插件可以挂钩的不同接口。 webpack source 和 github 包含很多 webpack 插件示例。

这是一个非常简单的插件，只记录资产：

module.exports = function() {
  this.plugin('done', function(stats) {
    console.log(stats.toJson().assets);
  });
};