專案結構說明
.
├── 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 完成以下工作：

程式碼檢查
clean操作
run webpack pack
deploy 釋出
安裝gulp
$ npm install gulp gulp-clean jshint gulp-jshint jshint-stylish gulp-sftp gulp-util minimist –save-dev
新增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 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, function (err, 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 server
測試環境打包: npm build
生產環境打包: npm buildP
釋出到測試環境: npm deploy
釋出到生產環境: npm deployP
完整package.json 如下：

{
  "name": "webpack-avalon",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "server": "webpack-dev-server --inline",
    "build": "gulp pack --env debug",
    "buildP": "gulp pack --env production",
    "deploy": "gulp deploy --env debug",
    "deployP": "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"
  }
}

開發要求

約定/src/*.html為應用的入口檔案，在/src/js/ 一級目錄下需有一個同名的js檔案作為該檔案的入口。

編譯（測試/dev環境）

$ npm run build

編譯（生產環境）

生產環境會對js混淆壓縮，對css、html進行壓縮，字元替換等處理

$ npm run buildP

部署釋出

在gulpfile.js 中配置好localServer和remoteServer，編譯後將dist目錄釋出到服務端

釋出到localServer

$ npm run deploy

釋出到remoteServer

$ npm run deployP

本地除錯

$ npm run server

# 或者 下面兩種模式

$ webpack-dev-server

$ webpack-dev-server --inline

Jenkins 持續整合

需要nodejs

$ npm run buildP

$ npm run deployP