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
- Gulp配合Webpack的时候,如何让Webpack生成生产环境代码
- react+webpack部署生产环境
- gulp+webpack
- gulp和webpack的区别
- gulp和webpack的区别
- gulp与webpack的区别
- gulp与webpack的区别
- webpack生成代码
- webpack开发和生产两个环境的配置详解
- Webpack配置开发环境和生产环境
- webpack开发环境与生产环境分离
- 使用Gulp + Webpack定制前端开发环境
- webpack如何与react进行配合
- 如何新建typescript配合webpack项目
- webpack环境的配置
- 如何让webpack模块化代码兼容到ie8
- gulp/grunt和browserify/webpack的区别
- webpack&gulp集成简介
- eclipse自动退出
- 设计模式-创建型-建造者模式(Builder)
- android 视图性能优化
- EF Lanbda表达式
- iOS 认识CoreData-多线程
- Gulp配合Webpack的时候,如何让Webpack生成生产环境代码
- mybatis中namespace和别名的使用
- Jeecg权限控制
- Unity3D 调用Android与IOS的剪贴板
- 怎样用VS2010编译CppUnit
- PDO防止SQL注入详细介绍
- ox 10.11 安装cocoapods爬坑之旅
- Python安装第三方模块
- OC学习日记04-OC中类的属性