webpack系列目錄
webpack 系列 三：webpack 如何集成第三方js庫
webpack 系列 四：webpack 多頁面支持 & 公共組件單獨打包
webpack 系列 五：webpack Loaders 模塊加載器
webpack 系列 六：前端項目模板-webpack+gulp實現自動構建部署
正文
本篇包含以下三點：
1.區分開發環境和生產環境
2.集成gulp
3.package.json 配置
前面主要介紹了webpack 的一些基礎用法，該篇做一個整體介紹，如何集成gulp？如何應對多部署環境？
項目結構說明
. ├── gulpfile.js # gulp任務配置 ├── mock/ # 假數據文件 ├── package.json # 項目配置 ├── README.md # 項目說明 ├── src # 源碼目錄 │ ├── pageA.html # 入口文件a │ ├── pageB.html # 入口文件b │ ├── pageC.html # 入口文件c │ ├── css/ # css資源 │ ├── img/ # 圖片資源 │ ├── js # js&jsx資源 │ │ ├── pageA.js # a頁面入口 │ │ ├── pageB.js # b頁面入口 │ │ ├── pageC.js # c頁面入口 │ │ ├── helpers/ # 業務相關的輔助工具 │ │ ├── lib/ # 沒有存放在npm的第三方庫或者下載存放到本地的基礎庫，如jQuery、Zepto等 │ │ └── utils/ # 業務無關的輔助工具 │ ├── scss/ # scss資源 │ ├── pathmap.json # 手動配置某些模塊的路徑，可以加快webpack的編譯速度 ├── webpack.config.allinone.js # webpack配置 ├── webpack.config.js # 正式環境webpack配置入口 └── webpack-dev.config.js # 開發環境webpack配置入口
一：區分 dev環境 和 生產環境
重命名 webpack.config.js => webpack.config.allinone.js
內容上，新增options參數，利用options.debug 來控制webpack參數，用來區分開發和生產環境。例如開發環境不需要混淆和壓縮js文件，但是開發環境需要。通過option.debug來區分選擇相應的loader配置和Plugin：
module.exports = function(options){ options = options || {} var debug = options.debug !==undefined ? options.debug :true; ...... if(debug){ // }else{ // }新增webpack.config.js webpack-dev.config.js
//webpack.config.js'use strict';var webpack_config = require('./webpack.config.allinone') module.exports = webpack_config({debug:false})//webpack-dev.config.js'use strict';var webpack_config = require('./webpack.config.allinone') module.exports = webpack_config({debug:true})后續可以根據gulp 指令 動態選擇 是開發環境還是測試環境，具體見gulpfile.js
//用于gulp傳遞參數var minimist = require('minimist');var knownOptions = { string: 'env', default: {env: process.env.NODE_ENV || 'production'}};var options = minimist(process.argv.slice(2), knownOptions);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 完成以下工作：
安裝gulp
新增gulpfile.js
完整gulpfile.js 如下：
/** * Created by sloong on 2016/6/14. */'use strict';var gulp = require('gulp');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', default: {env: process.env.NODE_ENV || 'production'}};var options = minimist(process.argv.slice(2), 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', remotePath: '/data/website/website1', user: 'root', pass: 'password'}//check codegulp.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 assertsgulp.task('clean', ['hint'], function () { var clean = require('gulp-clean'); return gulp.src(assets, {read: true}).pipe(clean())});//run webpack packgulp.task('pack', ['clean'], function (done) { var _conf = options.env === 'production' ? webpackConf : webpackConfDev; webpack(_conf, function (err, stats) { if (err) throw new gutil.PluginError('webpack', err) gutil.log('[webpack]', stats.toString({colors: true})) done() });});//default taskgulp.task('default', ['pack'])//deploy assets to remote servergulp.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 配置 各個指令
完整package.json 如下：
{ "name": "webpack-avalon", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "server": "webpack-dev-server --inline", "build": "gulp pack --env debug", "build-online": "gulp pack --env production", "deploy": "gulp deploy --env debug", "deploy-online": "gulp deploy --env production" }, "author": "sloong", "license": "MIT", "devDependencies": { "css-loader": "^0.21.0", "ejs-loader": "^0.3.0", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", "gulp": "^3.9.1", "gulp-clean": "^0.3.2", "gulp-jshint": "^2.0.1", "gulp-sftp": "^0.1.5", "gulp-util": "^3.0.7", "html-loader": "^0.4.3", "html-webpack-plugin": "^2.19.0", "jshint": "^2.9.2", "jshint-stylish": "^2.2.0", "jsx-loader": "^0.13.2", "minimist": "^1.2.0", "node-sass": "^3.7.0", "sass-loader": "^3.2.0", "style-loader": "^0.13.0", "url-loader": "^0.5.7", "webpack": "^1.13.1", "webpack-dev-server": "^1.14.1" } }以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
