Gulp配合Webpack的时候,如何让Webpack生成生产环境代码

来源:互联网 发布:2017淘宝运营规则 编辑:程序博客网 时间:2024/05/02 01:34

Gulp配合Webpack使用时,需要Webpack生成生成环境代码。原来只用Webpack的时候,可以只输入命名 webpack -p Xxx.js即可。但是现在使用了Gulp,需要在gulpfile.js里做一些配置。具体可以查看下面【例子代码】里面:

// Production buildgulp.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 refreshgulp.task("build-dev", ["webpack:build-dev"], function() {    gulp.watch(["app/**/*"], ["webpack:build-dev"]);});// Production buildgulp.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 optionsvar myDevConfig = Object.create(webpackConfig);myDevConfig.devtool = "sourcemap";myDevConfig.debug = true;// create a single instance of the compiler to allow cachingvar 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");    });});
0 0