webpack系列目录
正文
本篇包含以下三点：
1.区分开发环境和生产环境
2.集成gulp
3.package.json 配置
前面主要介绍了webpack 的一些基础用法，该篇做一个整体介绍，如何集成gulp？如何应对多部署环境？
项目结构说明
一：区分 dev环境 和 生产环境
重命名 webpack.config.js => webpack.config.allinone.js
内容上，新增options参数，利用options.debug 来控制webpack参数，用来区分开发和生产环境。例如开发环境不需要混淆和压缩js文件，但是开发环境需要。通过option.debug来区分选择相应的loader配置和Plugin：
if(debug){
//
}else{
//
}
新增webpack.config.js webpack-dev.config.js
后续可以根据gulp 指令 动态选择 是开发环境还是测试环境，具体见gulpfile.js
var webpackConf = require('./webpack.config');
var webpackConfDev = require('./webpack-dev.config');
var _conf = options.env === 'production' ? webpackConf : webpackConfDev;
webpack(_conf,function (err,stats) {......
二：集成gulp
利用 gulp 完成以下工作：
- 代码检查
- clean操作
- run webpack pack
- deploy 发布
安装gulp
新增gulpfile.js
完整gulpfile.js 如下：
var webpack = require('webpack');
//用于gulp传递参数
var minimist = require('minimist');
var gutil = require('gulp-util');
var src = process.cwd() + '/src';
var assets = process.cwd() + '/dist';
var knownOptions = {
string: 'env',knownOptions);
var webpackConf = require('./webpack.config');
var webpackConfDev = require('./webpack-dev.config');
var remoteServer = {
host: '192.168.56.129',remotePath: '/data/website/website1',user: 'root',pass: 'password'
};
var localServer = {
host: '192.168.56.130',pass: 'password'
}
//check code
gulp.task('hint',function () {
var jshint = require('gulp-jshint')
var stylish = require('jshint-stylish')
return gulp.src([
'!' + src + '/js/lib/*/.js',src + '/js/*/.js'
])
.pipe(jshint())
.pipe(jshint.reporter(stylish));
})
// clean asserts
gulp.task('clean',['hint'],function () {
var clean = require('gulp-clean');
return gulp.src(assets,{read: true}).pipe(clean())
});
//run webpack pack
gulp.task('pack',['clean'],function (done) {
var _conf = options.env === 'production' ? webpackConf : webpackConfDev;
webpack(_conf,stats) {
if (err) throw new gutil.PluginError('webpack',err)
gutil.log('[webpack]',stats.toString({colors: true}))
done()
});
});
//default task
gulp.task('default',['pack'])
//deploy assets to remote server
gulp.task('deploy',function () {
var sftp = require('gulp-sftp');
var _conf = options.env === 'production' ? remoteServer : localServer;
return gulp.src(assets + '/**')
.pipe(sftp(_conf))
})
三：package.json 配置
scripts 配置 各个指令
- 启动webpack调试server： npm run server
- 测试环境打包: npm run build
- 生产环境打包: npm run build-online
- 发布到测试环境: npm run deploy
- 发布到生产环境: npm run deploy-online
完整package.json 如下：
