vsonChen
前序：
其實我并不喜歡寫筆記挫掏，但是由于健忘癥日趨嚴重侦另，感覺筆記還是需要寫的。接下來的我會寫webpack、vue淋肾、fetch硫麻、node、koa的開發(fā)經歷樊卓，希望對日后也有幫助拿愧。
注：本文只適用于webpack2.x之前版本，4.0版本對optimization碌尔、plugins等進行了整合修改浇辜，修改較大，暫時沒時間對其修改進行整合
進入正題
搭建webpack準備工作：
1唾戚、安裝node（我們需要用npm命令來安裝webpack）
2柳洋、安裝webpack（npm install webpack --save-dev）
3、npm init初始化項目列表
開始搭建webpack所需插件和配置文件：
首先叹坦，我們需要部署好我們開發(fā)目錄的文件結構熊镣，這邊我先創(chuàng)建一個initProject文件夾來存放開發(fā)代碼，和一個projectOutput文件夾來存放輸出代碼募书。然后在主目錄下創(chuàng)建一個webpack.config.js文件绪囱。
接著，我們需要定義輸入和輸出的js文件路徑
var webpack=require('webpack');
module.exports={
entry:{
"main":__dirname+"/initProject/index.js"
},
output:{
path:__dirname+"/projectOutput/",
filename:"[name].js"
}
};
至此莹捡，webpack的基本搭建就完成了鬼吵，我們需要了解我們實際開發(fā)需要什么功能：
1、例如編譯less篮赢，編譯es語言等等齿椅，這時候我們需要用到loader
一、首先我們看下loaders處理器有哪些：
1启泣、樣式處理器(需安裝相關css處理模塊涣脚，例如less需安裝less)
css-loader ????處理css中路徑引用等問題
style-loader ???動態(tài)把樣式寫入css
sass-loader ???scss編譯器
less-loader ????less編譯器
postcss-loader ??scss再處理
autoprefixer ??scss自動添加后綴
2、js處理器
babel-loader ???加載babel編譯器（處理es6寥茫、jsx等語言）
jsx-loader ????加載jsx擴展語言處理器（babel-loader可以編譯）babel-loader：
babel-core ???編譯babel核心功能包
babel-preset-es2015 ???用于編譯es6的依賴包
babel-preset-stage-0 ???用于編譯es7的依賴包
babel-preset-react ?用于編譯react中jsx語言的依賴包
3遣蚀、文件/圖片處理
file-loader ????文件/圖片打包
url-loader ????對file-loader的封裝（圖片轉化，小于8K自動轉化為base64的編碼）
4坠敷、json處理器（已廢除）
json-loader ????對json文件進行處理打包
5、html處理器
html-loader ????對html文件進行處理打包
6射富、vue處理器
vue-loader ????對vue文件進行處理打包
二膝迎、接下來我們就要安裝我們需要的loaders和引用
安裝loaders：
npm install XXX-loader --save-dev
使用loaders：
module:{
loaders:[
{
test:/\.(png|jpg|gif)/, loader:"url-loader?limit=8192"
},
{
test:/\.css/, loader:"style!css"
},
{
test: /\.js$/, exclude: /node_modules/, loader: 'babel'
]
}
對于webpack2
module:{
rules:[
{
test: /\.less$/,
use:[
"style-loader",
"css-loader",
"less-loader"
]
},
{
test: /\.js$/,
use:["babel-loader"],
exclude: /node_modules/
},
{
test: /\.vue$/,
use:[
{loader: "vue"}
]
}
]
}
接下來我們需要 babel-plugin-transform-runtime和babel-runtime來完成特定方法的轉碼（promise等）
（與babel-polyfill引入的方法對比可以自行查找 ）
npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save-dev
這里注意一下，webpack2新特性：
UglifyJsPlugin 將不再把所有 loader 都切到代碼壓縮模式胰耗。 debug 選項已經被移除限次。Loader 不應該再從 Webpack 的配置那里讀取自己選項了。取而代之的是，你需要通過 LoaderOptionsPlugin 來提供這些選項卖漫。
plugins:[
new webpack.LoaderOptionsPlugin({
options: {
babel: {
presets: ['es2015',"stage-0"],
plugins: ['transform-runtime']
}
}
})
]
說明：test為后綴匹配文件费尽，exclude為不處理的目錄，loader為引用的處理器（'?'后面跟各處理器的觸發(fā)行為羊始，可用query設定）
2旱幼、插件
1、UglifyJsPlugin
用于js壓縮突委、混淆柏卤，compress壓縮過程
plugins:[
new webpack.optimize.UglifyJsPlugin({uglifyObject})
]
uglifyObject:壓縮選項,參數：
1、compress：boolean|object
2匀油、mangle：boolean|objectboolean 開啟關閉壓縮or混淆缘缚，
object：{warnings:false，except：array}warnings:錯誤提醒,except:排除操作項
2敌蚜、HtmlWebpackPlugin
生成html文件桥滨，自動加載生成的js文件，后帶hash值
new HtmlWebpackPlugin({
filename:'html/indexMin.html',//輸出文件路徑
template:__dirname+'/src/html/index.html',//輸入文件模板路徑
inject:true,//js設置到body加載
//簡化代碼
minify:{
removeComments:true, //移除HTML中的注釋
collapseWhitespace:false //刪除空白符與換行符
}
})
其他參數：
title: 用來生成頁面的 title 元素
filename: 輸出的 HTML 文件名弛车，默認是 index.html, 也可以直接配置帶有子目錄齐媒。
template: 模板文件路徑，支持加載器帅韧，比如 html!./index.html
inject: true | 'head' | 'body' | false ,注入所有的資源到特定的 template 或者 templateContent 中里初，如果設置為 true 或者 body，所有的 javascript 資源將被放置到 body 元素的底部忽舟，'head' 將放置到 head 元素中双妨。
favicon: 添加特定的 favicon 路徑到輸出的 HTML 文件中。
minify: {} | false , 傳遞 html-minifier 選項給 minify 輸出
hash: true | false, 如果為 true, 將添加一個唯一的 webpack 編譯 hash 到所有包含的腳本和 CSS 文件叮阅，對于解除 cache 很有用刁品。
cache: true | false，如果為 true, 這是默認值浩姥，僅僅在文件修改之后才會發(fā)布文件挑随。
showErrors: true | false, 如果為 true, 這是默認值，錯誤信息會寫入到 HTML 頁面中
chunks: 允許只添加某些塊 (比如勒叠，僅僅 unit test 塊)
chunksSortMode: 允許控制塊在添加到頁面之前的排序方式兜挨，支持的值：'none' | 'default' | {function} default:'auto'
excludeChunks: 允許跳過某些塊，(比如眯分，跳過單元測試的塊)
3拌汇、去后綴
resolve:object;
object:root=>搜索文件的絕對路徑；extensions=>文件后綴名;alias=>文件別名{name:path}弊决；
代碼示例：
resolve: {
extensions: ['', '.js', '.vue']
}
4噪舀、接下來說一個熱啟動的東西魁淳，叫webpack-dev-server
熱啟動分兩種，一個是frame的形式与倡，主要通過iframe嵌套界逛；另一種是inline的形式，就是頁面數據實時刷新纺座。
首先第一步息拜，安裝：
npm install webpack-dev-server --save-dev
接下來我們需要在webpack.config.js輸出模塊上面加上devServer
devServer:{
contentBase:'./projectOutput',
historyApiFallback:true,
inline:true,
port:8777
}
這里我注釋一下各個參數的含義：
contentBase：服務器的文件路徑，例如你要執(zhí)行projectOutput下的test.html文件比驻，只需要在瀏覽器打開：http://localhost:8777/test.html该溯。
historyApiFallback：服務器找不到頁面的時候自動跳轉到index。
inline：實時刷新别惦。
port：端口名
至此狈茉，webpack基礎搭建基本完成，可以愉快的去配合上各種語言和框架了
