因為這篇啟蒙文章比較受大家歡迎擅耽，在操作過程中大家也遇到很多坑醇蝴，所以于2016.2.25更新 在文章最后總結(jié)了各種出現(xiàn)的錯誤
webpack最近很熱蹄溉，我一開始是想翻譯一篇國外關(guān)于webpack的佳作究恤，但是找來找去也沒有一篇讓我感覺到很滿意的崩侠，好多都是一步到位傀缩，滿屏幕都是React＋Webpack那先，官方文檔寫的不太好，好多點都沒有解釋的詳細(xì)赡艰，所以我參考了幾篇文章售淡，寫一篇容易上手的指南。本文適合第一次接觸webpack的朋友慷垮，如果是老鳥揖闸，就不用看了。這是系列的第一篇料身，主要講他最基本的用法汤纸。
比較
如果你熟悉原來一系列的構(gòu)建工具，grunt或者gulp之類的芹血，這里有一篇webpack和他們比較的文章可以讀一讀贮泞。
Webpack Compared
安裝
先裝好node和npm楞慈，因為webpack是一個基于node的項目。然后
npm install -g webpack
總覽
官網(wǎng)對webpack的定義是MODULE BUNDLER隙畜，他的目的就是把有依賴關(guān)系的各種文件打包成一系列的靜態(tài)資源抖部。 請看下圖
webpack簡單點來說就就是一個配置文件，所有的魔力都是在這一個文件中發(fā)生的议惰。
這個配置文件主要分為三大塊
- entry 入口文件 讓webpack用哪個文件作為項目的入口
- output 出口 讓webpack把處理完成的文件放在哪里
- module 模塊 要用什么不同的模塊來處理各種類型的文件
下面我們就一步一步來新建一個簡單的項目
建立項目
建一個文件夾，然后新建一個package.json的文件在項目根目錄下
mkdir webpack
cd webpack
npm init
# 一直點回車 如果懶得填一些信息
如果你使用git管理你的這個項目的話乡恕，建議你新建一個.gitignore文件言询，不要讓git提交一些node依賴的模塊袱蚓， 你也可以參考github的例子
https://github.com/github/gitignore/blob/master/Node.gitignore
我們這里就簡單一點
node_modules
項目結(jié)構(gòu)
現(xiàn)在項目里面就有一個package.json宵膨， 我們多加一點東西，慢慢豐富它的內(nèi)容专甩。
- /app
- index.js
- sub.js
- package.json
- webpack.config.js
添加了兩個js文件函卒，添加了最重要的webpack的配置文件辆憔，我們還是從非常簡單的hello world開始玩起，webpack原生直接支持AMD和CommonJS兩種格式报嵌，如果你想使用ES6的風(fēng)格虱咧，這點以后再提。
JS代碼
sub.js
//我們這里使用CommonJS的風(fēng)格
function generateText() {
var element = document.createElement('h2');
element.innerHTML = "Hello h2 world";
return element;
}
module.exports = generateText;
index.js
var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>';
app.appendChild(sub());
document.body.appendChild(app);
代碼寫完了锚国，完成一個很簡單的功能腕巡，新建一個單獨的module，并且在另外一個module里面引用他血筑，最后會在頁面里面輸出兩個標(biāo)題绘沉。
配置Webpack
現(xiàn)在開始配置webpack，目標(biāo)是把這兩個js文件合并成一個文件. 我們可以自己在build文件夾里面手動建一個index.html文件夾豺总，然后再把合并以后的js引用在里面车伞，但是這樣有些麻煩，所以我們這里安裝一個plugin喻喳，可以自動快速的幫我們生成HTML另玖。
npm install html-webpack-plugin --save-dev
好 有了這個插件 開始寫config文件
var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定義了一些文件夾的路徑
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
module.exports = {
//項目的文件夾 可以直接用文件夾名稱 默認(rèn)會找index.js 也可以確定是哪個文件名字
entry: APP_PATH,
//輸出的文件名 合并以后的js會命名為bundle.js
output: {
path: BUILD_PATH,
filename: 'bundle.js'
},
//添加我們的插件 會自動生成一個html文件
plugins: [
new HtmlwebpackPlugin({
title: 'Hello World app'
})
]
};
然后在項目根目錄運行
webpack
終端顯示一堆信息，然后告訴你成功了沸枯。
你可以使用webpack --help看看一些運行的時候可選的參數(shù)
你會發(fā)現(xiàn)多出來一個build文件夾日矫，直接點開里面的html文件，你會發(fā)現(xiàn)我們可愛的“hello world”已經(jīng)插入到頁面了绑榴。我們的任務(wù)完成了哪轿，成功生成html，合并js翔怎，html引入了js窃诉，js被執(zhí)行了杨耙。
配置webpack-dev-server
上面任務(wù)雖然完成了，但是我們要不斷運行程序然后查看頁面飘痛，所以最好新建一個開發(fā)服務(wù)器珊膜，可以serve我們pack以后的代碼，并且當(dāng)代碼更新的時候自動刷新瀏覽器宣脉。
安裝webpack-dev-server
更新, 這里還是全局安裝比較好
npm install webpack-dev-server －g
安裝完畢后 在config中添加配置
module.exports = {
....
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
},
...
}
然后再package.json里面配置一下運行的命令,npm支持自定義一些命令
...
"scripts": {
"start": "webpack-dev-server --hot --inline"
},
...
好了车柠，萬事具備了，在項目根目錄下輸入npm start,一堆花花綠綠的信息后server已經(jīng)起來了塑猖，在瀏覽器里面輸入http://localhost:8080 發(fā)現(xiàn)偉大的hello world出現(xiàn)了竹祷，在js里面隨便修改一些輸出然后保存, boom!瀏覽器自動刷新，新的結(jié)果出現(xiàn)了羊苟。
拓展閱讀
如果你的服務(wù)器端使用的是express框架塑陵，你還可以直接安裝express的middleware，webpack配合express蜡励，很好用令花。
npm install webpack-dev-middleware --save-dev
更多的詳情 請參考這篇文章
https://blog.risingstack.com/using-react-with-webpack-tutorial/
添加CSS樣式
現(xiàn)在來添加一些樣式，webpack使用loader的方式來處理各種各樣的資源凉倚，比如說樣式文件兼都，我們需要兩種loader，css-loader 和 style－loader占遥，css-loader會遍歷css文件俯抖，找到所有的url(...)并且處理。style-loader會把所有的樣式插入到你頁面的一個style tag中瓦胎。
安裝我們的loader
npm install css-loader style-loader --save-dev
配置loader芬萍，在webpack.config.js中
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
},
...
module: {
loaders: [
{
test: /\.css$/,
loaders: ['style', 'css'],
include: APP_PATH
}
]
},
...
plugins: [
new HtmlwebpackPlugin({
title: 'Hello World app'
})
]
看loaders的書寫方式，test里面包含一個正則搔啊，包含需要匹配的文件柬祠，loaders是一個數(shù)組，包含要處理這些程序的loaders负芋，這里我們用了css和style漫蛔，注意loaders的處理順序是從右到左的，這里就是先運行css-loader然后是style-loader.
新建一個樣式文件 main.css
h1 {
color: red;
}
記得在入口文件index.js中引用
require('./main.css');
然后發(fā)現(xiàn)標(biāo)題變成紅色的了旧蛾，webpack的理念是基于項目處理的莽龟，把對應(yīng)的文件格式給對應(yīng)的loader處理，然后你就不用管了锨天，它會決定怎么壓縮毯盈，編譯。
那現(xiàn)在想使用一些有愛的css預(yù)編譯程序病袄，來點sass吧搂赋。 你可能已經(jīng)想到了赘阀，再來個loader就行啦，確實是這樣簡單脑奠。
更新 這里還需要添加node-sass來解析sass文件
npm install sass-loader node-sass --save-dev
稍微修改一下config基公，刪掉我們先前添加的css規(guī)則，加上下面的loader
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass'],
include: APP_PATH
},
添加兩個sass文件宋欺，variables.scss和main.scss
variables.scss
$red: red;
main.scss
@import "./variables.scss";
h1 {
color: $red;
}
在index.js中引用
require('./main.scss');
然后發(fā)現(xiàn)標(biāo)題如愿變紅轰豆，相當(dāng)簡單吧。
處理圖片
這個和其他一樣齿诞，也許你也已經(jīng)會玩了秒咨。安裝loader，處理文件掌挚。不過有個神奇的地方它可以根據(jù)你的需求將一些圖片自動轉(zhuǎn)成base64編碼的，為你減輕很多的網(wǎng)絡(luò)請求菩咨。
安裝url-loader
npm install url-loader --save-dev
配置config文件
{
test: /\.(png|jpg)$/,
loader: 'url?limit=40000'
}
注意后面那個limit的參數(shù)吠式，當(dāng)你圖片大小小于這個限制的時候，會自動啟用base64編碼圖片抽米。
下面舉個栗子特占。
新建一個imgs文件夾，往里面添加一張崔叔的照片云茸。在scss文件中添加如下的東西是目。
@import "./variables.scss";
h1 {
color: $red;
background: url('./imgs/avatar.jpg');
}
npm start, 然后查看圖片的url，發(fā)現(xiàn)神奇标捺。
添加第三方庫
有的時候還想來點jquery懊纳，moment，undersocre之類的庫亡容，webpack可以非常容易的做到這一點嗤疯，有謠言說Bower即將停止開發(fā)了, 作者推薦都使用npm來管理依賴。那么我們現(xiàn)在安裝在我們的app中添加jquery和moment的支持闺兢。
npm install jquery moment --save-dev
在js中引用
var sub = require('./sub');
var $ = require('jquery');
var moment = require('moment');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World it</h1>';
document.body.appendChild(app);
app.appendChild(sub());
$('body').append('<p>look at me! now is ' + moment().format() + '</p>');
看看瀏覽器茂缚，成功！ jquery和moment現(xiàn)在都起作用了屋谭！
添加ES6的支持
如果現(xiàn)在你的項目還沒有對ES6的語法支持脚囊，那就有點沒有逼格了，其實大家都知道這個也很簡單桐磁，因為我們有偉大的Babel
首先 裝各種loader
npm install babel-loader babel-preset-es2015 --save-dev
配置我們的config文件
...
{
test: /\.jsx?$/,
loader: 'babel',
include: APP_PATH,
query: {
presets: ['es2015']
}
},
...
es2015這個參數(shù)是babel的plugin悔耘，可以支持各種最新的es6的特性，具體的情況看這個鏈接所意。
Babel es2015 plugin
現(xiàn)在我們可以改掉CommonJS風(fēng)格的文件了淮逊。
sub.js
export default function() {
var element = document.createElement('h2');
element.innerHTML = "Hello h2 world hahaha";
return element;
}
index.js
import './main.scss';
import generateText from './sub';
import $ from 'jquery';
import moment from 'moment';
let app = document.createElement('div');
const myPromise = Promise.resolve(42);
myPromise.then((number) => {
$('body').append('<p>promise result is ' + number + ' now is ' + moment().format() + '</p>');
});
app.innerHTML = '<h1>Hello World it</h1>';
document.body.appendChild(app);
app.appendChild(generateText());
我們上面測試了import, export催首，const，let泄鹏，promise等一系列es6的特性郎任。
最后完美的輸出界面。
結(jié)語
第一部分到這里結(jié)束备籽，經(jīng)過一系列例子舶治，你應(yīng)該能夠了解webpack最基本的用法了吧。是否已經(jīng)喜歡上這種簡潔的配置了车猬？下一部分我們會繼續(xù)討論一些webpack更高級的用法霉猛。
debug
有很多留言提出了一些大家遇到的錯誤，感謝留言中的一位飄在心中的調(diào)調(diào)同學(xué)珠闰，在一篇博文中總結(jié)了各種錯誤惜浅。我在這里總結(jié)一下。請參考這篇文章的修正方式：
- 初次運行webpack出現(xiàn)以下錯誤
throw err;
canot find module 'webpack/lib/node/NodeTemplatePlugin'
- 初次運行webpack-dev-server出現(xiàn)以下錯誤
ERROR in multi main
Module not found: Error: Cannot resolve module 'webpack/hot/dev-server'
- 初次運行sass-loder出現(xiàn)錯誤
原文中缺少了添加node-sass
npm install --save-dev
參考文章
https://christianalfoni.github.io/react-webpack-cookbook/index.html
很硬的鏈接
把這一節(jié)的代碼做了一個repo伏嗜，想看所有源碼的可以clone下
https://github.com/vikingmute/webpack-basic-starter
同時這一系列關(guān)于Webpack的文章也可以在github找到
https://github.com/vikingmute/webpack-for-fools
