Webpack DllPlugin吞咽:找不到模块‘.供货商-明显.vendor‘

Question

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

我使用webpack 2中的DllPlugin / DllReferencePlugin组合将我的React应用程序分割成多个部分，这是非常好的工作，而且我在与webpack一起构建时得到了一个很好的供应商包。

问题是，当我试图运行我的webpack配置的吞咽，我得到一个错误。我可能做错了，因为我还没有找到很多关于这种方法的文档，但是它对我没有用。

在创建清单文件之前，它似乎正在尝试包含来自我的供应商包的清单文件。

每当我运行一个定义好的gulp任务(比如gulp react-vendor )时，我就会得到一个错误，说明它不能解决供应商-明显. tasks文件。

另一方面，如果我在我的终端中运行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的终端构建我的供应商包，并且它创建了供应商声明. then文件，那么我随后就可以顺利地运行我的gulp任务了。

这不是很有帮助，虽然，因为这仍然不允许我使用webpack与吞咽，因为我打算清理建设之前，新的建设运行。

Answer 1

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

一个可以使调试问题变得更容易的更改是使用gulp实用程序模块(吞咽)来显示任何webpack错误，这些错误可能会出现在webpack构建过程中，使用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

每当我运行定义的gulp任务之一，比如gulp -供应商时，我就会得到一个错误，说明它不能解决供应商-明显. tasks文件。

您的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的配置文件。按照当前的配置，Node在启动时运行webpack.config.js中的代码，从这里可以看到在创建DllReferencePlugin时使用的require()，因此它还将尝试在创建manifest.json之前读取manifest.json并将其转换为object...which。

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

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