前言
webpack 是什么？來(lái)自一位小白的疑問(wèn)庭砍。
是構(gòu)建工具场晶，還是打包工具？
webpack是一個(gè)模塊加載器兼打包工具怠缸，它能夠讓你非常清晰的把編寫模塊化的代碼诗轻，什么編譯都交給webpack就好了，當(dāng)它也能實(shí)現(xiàn)簡(jiǎn)單的打包揭北，比如合并js扳炬，壓縮等吏颖。
下面我們簡(jiǎn)單說(shuō)下webpack和gulp的區(qū)別，好加深下webpack的理解鞠柄。
本質(zhì)上來(lái)說(shuō)侦高，gulp是通過(guò)一系列的插件實(shí)現(xiàn)了原本復(fù)雜繁瑣的任務(wù)自動(dòng)化，比如拷貝啊厌杜，替換文件啥的奉呛，是一個(gè)純粹的工具。它并不能將你的css夯尽，圖片等非js資源模塊化瞧壮。但是webpack可以做到將非js資源模塊化，比如圖片等匙握。
總的來(lái)說(shuō)咆槽，gulp是一個(gè)自動(dòng)化任務(wù)的工具，所以在項(xiàng)目的開(kāi)發(fā)中圈纺，你也可以采用 gulp + webpack 組合大招更好的提升項(xiàng)目效率秦忿。
Webpack的入門使用
說(shuō)那么多概念還不如寫個(gè)小demo來(lái)的實(shí)在，相比各位看官也是這么想得蛾娶。
其實(shí)灯谣，我們記住webpack的核心功能是將靜態(tài)資源模塊化，js蛔琅，css胎许，圖片啊等等，都能通過(guò)require的方式進(jìn)行加載罗售。當(dāng)然你也可以利用ES6語(yǔ)法improt來(lái)引入辜窑，這個(gè)后面說(shuō)。
下面我們開(kāi)始進(jìn)行咱們的項(xiàng)目吧寨躁。
1.首先創(chuàng)建一個(gè)空目錄穆碎，執(zhí)行命令進(jìn)行初始化
> npm init
這樣，咱們就有package.json了职恳，下面我們先把文件目錄搭建一下哈惨远。
目錄結(jié)構(gòu)如下：
好。文件我們建完了话肖，該干活寫代碼了北秽。
第一個(gè)是 index.html 首頁(yè)，這里我們的很簡(jiǎn)單外部只是引入了一個(gè) bundle.js最筒，相信大家現(xiàn)在也找不到這個(gè)bundle.js贺氓，因?yàn)檫@個(gè)文件是后面webpack編譯打包生成的。他會(huì)將style.css床蜘，index.js打包成一個(gè)js辙培，這樣能加快瀏覽器的加載效率蔑水。
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo1</title>
</head>
<body>
<div>Hello,world</div>
[站外圖片上傳中……(4)]
<script src="../dist/bundle.js"></script>
</body>
</html>
再看看 style.css，很簡(jiǎn)單扬蕊，就一句話搀别。
// style.css
body{
background:red;
}
再下一下步，我們看看 index.js尾抑，它也很簡(jiǎn)單歇父，而且它的目的是webpack的入口文件，webpack打包就是通過(guò)入口文件將里面require的資源一個(gè)個(gè)加載編譯打包再愈。你可以把index.js看成一個(gè)向?qū)О裆唬敢?code>webpack去尋找那些需要被解救編譯打包的文件。
//index.js
require('./style.css');
The Next,我們看看編寫 webpack.config.js 翎冲，特別聲明垂睬，這個(gè)文件是webpack的默認(rèn)配置，一般你沒(méi)啥需求也別改它了抗悍，但是你要修改的話驹饺，自己百度去吧。
修改webpack配置文件命令如下：
> webpack --config XXX.js
具體webpack.config.js配置如下：
// webpack.config.js
var path = require('path')
var webpack = require('webpack');
module.exports = {
entry: ['./src/index'], // 指定編譯打包入口文件
output: { // 編譯完了缴渊，輸出到這個(gè)目錄赏壹，這個(gè)文件名
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [ // 這個(gè)是插件配置噢
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
},
})
],
module: { // 這個(gè)是引入的模塊，可以用來(lái)做一些其他的事兒
loaders: [{ //比如這個(gè)loaders模塊疟暖，可以給每種類型文件指定加載器
test: /\.css$/,
loaders: ['style', 'css']
},
]
}
}
好了卡儒，到現(xiàn)在我們的業(yè)務(wù)代碼都寫完了田柔，該安裝所需的插件了俐巴。
這里一下安裝了多個(gè)插件，可能會(huì)比較慢硬爆，可以先換成國(guó)內(nèi)的淘寶npm鏡像:
> npm --registry https://registry.npm.taobao.org info underscore
安裝插件命令如下：
> npm install style-loader css-loader webpack --save
--save 是將依賴寫入到package.json里欣舵，后面代碼給其他人用，直接npm install就能自動(dòng)安裝所有的依賴了缀磕。
安裝完成后缘圈，咱們開(kāi)始打包！Ｍ嗖稀糟把！
在項(xiàng)目目錄執(zhí)行以下命令：別傻乎乎的把 > 也拷貝進(jìn)去啊，就是只有一個(gè) webpackＩ辍Ｇ卜琛！
> webpack
執(zhí)行完上面的webpack命令凿傅，會(huì)出現(xiàn)以下令人欣喜的畫面缠犀，啥数苫？沒(méi)出現(xiàn)？自己上去找找看看哪里步驟漏了辨液。
這里順便推薦一個(gè)好用的windows下面的命令行工具： cmder
然后你再打開(kāi)你項(xiàng)目目錄的 index.html 虐急，直接雙擊用瀏覽器打開(kāi)噢。
就能看的如下畫面滔迈。相信你的require('./style.css')也就生效了止吁。
寫在最后
一個(gè)入門級(jí)的使用就到這兒了，webpack還有很多黑魔法亡鼠，本文也只是一個(gè)入門使用赏殃，后續(xù)的我用完再繼續(xù)跟大家分享一下，對(duì)了间涵，還請(qǐng)大神看到有誤的地方多多指點(diǎn)哈仁热，提點(diǎn)提點(diǎn)小弟。
如果對(duì)你有點(diǎn)點(diǎn)幫助勾哩，嘿嘿抗蠢，回復(fù)一下點(diǎn)個(gè)贊就是我最大的動(dòng)力，感激不盡思劳。
參考文獻(xiàn)
http://www.cnblogs.com/pqjwyn/p/5380689.html
https://github.com/wangning0/Autumn_Ning_Blog/blob/master/blogs/3-12/webpack.md#webpack學(xué)習(xí)之路
