带有 gulp 的 Webpack DllPlugin：找不到模块 '... vendor-manifest.json'

Question

我有一个相当大的 React 应用程序，它是用 webpack 2 构建的。该应用程序作为现有站点中的 SPA 嵌入到 Drupal 站点中。 Drupal 站点有一个复杂的 gulp 构建设置，我无法使用 webpack 复制它，所以我决定保留它。

我使用 webpack 2 中开箱即用的 DllPlugin / DllReferencePlugin 组合将我的 React 应用程序分成多个部分。这很好用，并且在使用 webpack 构建时我得到了一个很好的供应商包。

问题是当我尝试运行我在 gulp 中的 webpack 配置时，出现错误。我可能做错了，因为我找不到很多关于这种方法的文档，但是，它对我不起作用。

看起来它在创建之前试图从我的供应商包中包含清单文件。

每当我运行我定义的 gulp 任务之一时，比如 gulp react-vendor 我收到一个错误，说它无法解析 vendor-manifest.json 文件。

另一方面，如果我运行 webpack --config=webpack.dll.js 在我的终端中，webpack 编译得很好并且没有错误。

我已经包含了我认为是相关的文件。感谢您对此提供任何帮助。

webpack.config.js

// Use node.js built-in path module to avoid path issues across platforms.
const path = require('path');
const webpack = require('webpack');
// Set environment variable.
const production = process.env.NODE_ENV === "production";

const appSource = path.join(__dirname, 'react/src/');
const buildPath = path.join(__dirname, 'react/build/');

const ReactConfig = {
  entry: [
    './react/src/index.jsx'
  ],

  output: {
    path: buildPath,
    publicPath: buildPath,
    filename: 'app.js'
  },

  module: {
    rules: [
      {
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader?cacheDirectory=true",
          options: {
            presets: ["react", "es2015", "stage-0"]
          },
        },
      },
    ],
  },

  resolve: {
    modules: [
      path.join(__dirname, 'node_modules'),
      './react/src/'
    ],
    extensions: ['.js', '.jsx', '.es6'],
  },

  context: __dirname,
  devServer: {
    historyApiFallback: true,
    contentBase: appSource
  },
  // TODO: Split plugins based on prod and dev builds.
  plugins: [

    new webpack.DllReferencePlugin({
      context: path.join(__dirname, "react", "src"),
      manifest: require(path.join(__dirname, "react", "vendors", "vendor-manifest.json"))
    }),

    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      filename: 'webpack-loader.js'
    }),
  ]
};
// Add environment specific configuration.
if (production) {
  ReactConfig.plugins.push(
    new webpack.optimize.UglifyJsPlugin()
  );
}

module.exports = [ReactConfig];

webpack.dll.js

const path = require("path");
const webpack = require("webpack");
const production = process.env.NODE_ENV === "production";

const DllConfig = {
  entry: {
    vendor: [path.join(__dirname, "react", "vendors", "vendors.js")]
  },
  output: {
    path: path.join(__dirname, "react", "vendors"),
    filename: "dll.[name].js",
    library: "[name]"
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, "react", "vendors", "[name]-manifest.json"),
      name: "[name]",
      context: path.resolve(__dirname, "react", "src")
    }),
    // Resolve warning message related to the 'fetch' node_module.
    new webpack.IgnorePlugin(/\/iconv-loader$/),
  ],
  resolve: {
    modules: [
      path.join(__dirname, 'node_modules'),
    ],
    extensions: ['.js', '.jsx', '.es6'],
  },
  // Added to resolve a dependency issue in this build #https://github.com/hapijs/joi/issues/665
  node: {
    net: 'empty',
    tls: 'empty',
    dns: 'empty'
  }
};

if (production) {
  DllConfig.plugins.push(
    new webpack.optimize.UglifyJsPlugin()
  );
}

module.exports = [DllConfig];

vendors.js（判断Dll中添加什么）

require("react");
require("react-bootstrap");
require("react-dom");
require("react-redux");
require("react-router-dom");
require("redux");
require("redux-form");
require("redux-promise");
require("redux-thunk");
require("classnames");
require("whatwg-fetch");
require("fetch");
require("prop-types");
require("url");
require("validator");

gulpfile.js

'use strict';

const gulp = require('gulp');
const webpack = require ('webpack');
const reactConfig = require('./webpack.config.js');
const vendorConfig = require('./webpack.dll.js');

// React webpack source build.
gulp.task('react-src', function (callback) {
  webpack(reactConfig, function (err, stats) {
    callback();
  })
});

// React webpack vendor build.
gulp.task('react-vendor', function (callback) {
  webpack(vendorConfig, function (err, stats) {
    callback();
  })
});

// Full webpack react build.
gulp.task('react-full', ['react-vendor', 'react-src']);

注意： 如果我首先使用带有 webpack --config=webpack.dll.js 的终端构建我的 vendor-bundle 并创建 vendor-manifest.json 文件，我随后可以成功运行我的 gulp 任务没有问题.

虽然这不是很有帮助，因为这仍然不允许我将 webpack 与 gulp 一起使用，因为我打算在新构建之前清理构建运行。

Answer 1

我最终使用了问题末尾提到的解决方案。我首先构建我的 DLL 文件，然后我可以成功运行我的 gulp webpack 任务。

可以更轻松地调试问题的一个更改是使用 Gulp 实用程序模块 (gulp-util) 显示在构建 webpack 期间可能出现的任何 webpack 错误，使用gulp.

我最后的 gulp 设置最终看起来像这样：

gulpfile.js

'use strict';

const gulp = require('gulp');
const gutil = require('gulp-util');
const webpack = require('webpack');
const reactConfig = require('./webpack.config.js');
const vendorConfig = require('./webpack.dll.js');

// React webpack source build.
gulp.task('react', function (callback) {
  webpack(reactConfig, function (err, stats) {
    if (err) {
      throw new gutil.PluginError('webpack', err);
    }
    else {
      gutil.log('[webpack]', stats.toString());
    }
    callback();
  });
});

// React webpack vendor build.
gulp.task('react-vendor', function (callback) {
  webpack(vendorConfig, function (err, stats) {
    if (err) {
      throw new gutil.PluginError('webpack', err);
    }
    else {
      gutil.log('[webpack]', stats.toString());
    }
    callback();
  });
});

// React: Rebuilds both source and vendor in the right order.
gulp.task('react-full', ['react-vendor'], function () {
  gulp.start('react');
});

我希望这对处于类似情况的人有所帮助。

Answer 2

Whenever I run one of my defined gulp tasks, like gulp react-vendor I get an error, saying that it cannot resolve the vendor-manifest.json file.

您的 gulpfile.js 包含：

const reactConfig = require('./webpack.config.js');
const vendorConfig = require('./webpack.dll.js');

并且 webpack.config.js 包含这个：

new webpack.DllReferencePlugin({
  context: path.join(__dirname, "react", "src"),
  manifest: require(path.join(__dirname, "react", "vendors", "vendor-manifest.json"))
}),

require()个调用目前都是立即执行的。每当您运行 Gulp 时，它都会评估两个 Webpack 配置文件。按照当前的配置，节点运行在启动时使用 webpack.config.js 中的代码，并且从那里它会看到在您创建 DllReferencePlugin 时使用的 require()，因此它也会尝试读取 manifest.json 在那个时候把它变成一个对象......这是在它被构建之前。

您可以通过以下两种方式之一解决此问题：

DllReferencePlugin 的 manifest 选项支持一个对象（这是您当前提供的对象），或者一个包含清单文件路径的字符串。换句话说，如果您从 path.join(...) 调用周围删除 require()，它应该可以工作。
或者，您也可以延迟加载 Webpack 配置文件。将您的 const reactConfig = require('./webpack.config.js'); 从文件顶部直接移动到 gulp 任务函数应该就足够了，假设在构建清单之前不会调用此函数。

带有 gulp 的 Webpack DllPlugin：找不到模块 '... vendor-manifest.json'

Webpack DllPlugin with gulp: Cannot find module '... vendor-manifest.json'

javascript

build-tools

gulp

webpack-2