2
我有一個用webpack 2構建的相當大的React應用程序。該應用程序作爲現有站點內的SPA嵌入到Drupal站點中。 Drupal站點有一個複雜的gulp構建設置，我不能用webpack複製它，所以我決定保留它。Webpack DllPlugin with gulp：無法找到模塊'... vendor-manifest.json'
我已經將我的React應用程序分成多個部分，使用在webpack 2中開箱即用的DllPlugin/DllReferencePlugin組合。這非常好用，並且在使用webpack構建時可以獲得不錯的供應商捆綁包。
問題是，當我嘗試在gulp中運行我的webpack配置時，出現錯誤。我可能做錯了，因爲我還沒有找到關於這種方法的很多文檔，但是，它不適合我。
看起來它在創建它之前試圖從我的供應商捆綁包中包含清單文件。
每當我運行一個定義的吞嚥任務時，如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第一，它創建了供應商的manifest.json文件，然後我就可以隨後成功運行我一飲而盡沒有問題的任務。
雖然這並不是很有幫助，但仍然不允許我使用帶有gulp的webpack，因爲我打算在新版本運行之前清理構建。