webpack系列目錄

webpack 系列 二：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) {......