webpack作為前端構建工具已被廣泛使用，最近在做react+reflux+webpack的專案，於是在這裡儲存一下webpack的配置，供以後查閱。
webpack在開發模式下的配置：
/*
* webpack development server configuration
* * this file is set up for serving the webpack-dev-server, which will watch for changes and recompile as required if
* the subfolder /webpack-dev-server/ is visited. visiting the root will not automatically reload.
*/'use strict';
var webpack = require('webpack');
module.exports = ,
cache: true,
debug: true,
devtool: false,
entry: [
'webpack/hot/only-dev-server',
'./src/scripts/components/main.js'
],stats: ,
resolve:
},module: ],
loaders: [, , ]
},plugins: [
new webpack.hotmodulereplacementplugin(),
new webpack.noerrorsplugin()
]};
webpack在發布模式下的配置：
/*
* webpack distribution configuration
* * this file is set up for serving the distribution version. it will be compiled to dist/ by default
*/'use strict';
var webpack = require('webpack');
module.exports = ,
debug: false,
devtool: false,
entry: ,
stats: ,
plugins: [
new webpack.optimize.dedupeplugin(),
new webpack.optimize.uglifyjsplugin(),
new webpack.optimize.occurenceorderplugin(),
new webpack.optimize.aggressivemergingplugin(),
new webpack.optimize.commonschunkplugin('vendor', 'vendor.bundle_newba4.0.js')
],resolve:
},module: ],
loaders: [, , ]
}};
通過比較可以看出開發模式和發布模式檔案的配置是不同的，比如webpack.hotmodulereplacementplugin，熱模組替換，它的作用在於檔案內容更改時實時打包重新整理頁面，在發布模式下是不需要的，發布模式需要做的是編譯、壓縮、提取公共部分生成vendor等工作。
構建工具 gulp（基礎配置）
雖然他不反對用webpack，但是我也想接觸一下gulp，就被他帶上車了，也寫這篇文來記錄一下我的過程吧 我也是初次接觸gulp，之前用過webpack，下面就從專案裡安裝好gulp外掛程式開始寫吧 除了安裝gulp還需要安裝以下常用的外掛程式 都是我這個專案裡所要用到的 然後本專案的包管理器是bo...
前端構建工具
一 什麼是 自動化 構建工具 構建工具是一種自動化工具。一般專案都有較多的檔案，為開發維護方便拆分單個的模組,在發布的時候,對拆分後的各模組進行合併,壓縮等，構建工具可以幫完成這些重複的工作。二 什麼是包管理工具 可以安裝 解除安裝 更新 檢視 搜尋 發布等功能。類似grunt，gulp構建工具，和...
前端構建工具
devdependencies gulp強調的是前端開發的工作流程，側重於前端開發的整個過程的控制管理 像是流水線 我們可以通過配置一系列的task，定義task處理的事務 例如檔案壓縮合併 雪碧圖 啟動server 版本控制等 然後定義執行順序，來讓gulp執行這些task，從而構建專案的整個前端...