Gulp配合Webpack使用时,需要Webpack生成生成环境代码。原来只用Webpack的时候,可以只输入命名 webpack -p Xxx.js即可。但是现在使用了Gulp,需要在gulpfile.js里做一些配置。具体可以查看下面【例子代码】里面:
// Production build
gulp.task("build", ["webpack:build"]);
所标记的内容。其中Gulp任务build和它的子任务 webpack:build就是等同于 webpack -p 的效果。这两个任务是用来生成生产环境代码。
【例子代码】
var gulp = require("gulp");
var gutil = require("gulp-util");
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var webpackConfig = require("./webpack.config.js");
// The development server (the recommended option for development)
gulp.task("default", ["webpack-dev-server"]);
// Build and watch cycle (another option for development)
// Advantage: No server required, can run app from filesystem
// Disadvantage: Requests are not blocked until bundle is available,
// can serve an old app on refresh
gulp.task("build-dev", ["webpack:build-dev"], function() {
gulp.watch(["app/**/*"], ["webpack:build-dev"]);
});
// Production build
gulp.task("build", ["webpack:build"]);
gulp.task("webpack:build", function(callback) {
// modify some webpack config options
var myConfig = Object.create(webpackConfig);
myConfig.plugins = myConfig.plugins.concat(
new webpack.DefinePlugin({
"process.env": {
// This has effect on the react lib size
"NODE_ENV": JSON.stringify("production")
}
}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin()
);
// run webpack
webpack(myConfig, function(err, stats) {
if(err) throw new gutil.PluginError("webpack:build", err);
gutil.log("[webpack:build]", stats.toString({
colors: true
}));
callback();
});
});
// modify some webpack config options
var myDevConfig = Object.create(webpackConfig);
myDevConfig.devtool = "sourcemap";
myDevConfig.debug = true;
// create a single instance of the compiler to allow caching
var devCompiler = webpack(myDevConfig);
gulp.task("webpack:build-dev", function(callback) {
// run webpack
devCompiler.run(function(err, stats) {
if(err) throw new gutil.PluginError("webpack:build-dev", err);
gutil.log("[webpack:build-dev]", stats.toString({
colors: true
}));
callback();
});
});
gulp.task("webpack-dev-server", function(callback) {
// modify some webpack config options
var myConfig = Object.create(webpackConfig);
myConfig.devtool = "eval";
myConfig.debug = true;
// Start a webpack-dev-server
new WebpackDevServer(webpack(myConfig), {
publicPath: "/" + myConfig.output.publicPath,
stats: {
colors: true
}
}).listen(8080, "localhost", function(err) {
if(err) throw new gutil.PluginError("webpack-dev-server", err);
gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/index.html");
});
});