webpack 2,3版本的網(wǎng)站 ： https://webpack.js.org/
什么是WebPack，為什么要使用它？
WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。
WebPack和Grunt以及Gulp相比有什么特性
其實(shí)Webpack和另外兩個(gè)并沒有太多的可比性，Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優(yōu)點(diǎn)使得Webpack可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是：在一個(gè)配置文件中，指明對(duì)某些文件進(jìn)行類似編譯，組合，壓縮等任務(wù)的具體步驟，這個(gè)工具之后可以自動(dòng)替你完成這些任務(wù)。
Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開始找到你的項(xiàng)目的所有依賴文件，使用loaders處理它們，最后打包為一個(gè)瀏覽器可識(shí)別的JavaScript文件。
如果實(shí)在要把二者進(jìn)行比較，Webpack的處理速度更快更直接，能打包更多不同類型的文件。
開始使用Webpack
1.安裝
在安裝 Webpack 前，你本地環(huán)境需要支持node.js
全局安裝 npm install -g webpack
安裝到項(xiàng)目目錄 npm install --save-dev webpack
2.開始?
1.在終端中使用npm init命令可以自動(dòng)創(chuàng)建這個(gè)package.json文件
2.安裝到項(xiàng)目目錄 npm install --save-dev webpack
3.創(chuàng)建兩個(gè)文件夾,app文件夾和public文件夾，app文件夾用來存放原始數(shù)據(jù)和我們將寫的JavaScript模塊，public文件夾用來存放準(zhǔn)備給瀏覽器讀取的數(shù)據(jù)（包括使用webpack生成的打包后的js文件以及一個(gè)index.html文件）。在這里還需要?jiǎng)?chuàng)建三個(gè)文件，index.html 文件放在public文件夾中，兩個(gè)js文件（Greeter.js和main.js）放在app文件夾中，此時(shí)項(xiàng)目結(jié)構(gòu)如下圖所示
index.html文件只有最基礎(chǔ)的html代碼，它唯一的目的就是加載打包后的js文件（bundle.js）
Greeter.js只包括一個(gè)用來返回包含問候信息的html元素的函數(shù)。
main.js用來把Greeter模塊返回的節(jié)點(diǎn)插入頁面。
正式使用Webpack
webpack可以在終端中使用，其最基礎(chǔ)的命令是
webpack 入口文件（例如 main.js）? 出口文件(例 bundle.js)
結(jié)果如下
通過配置文件來使用Webpack（另外一種方式）
Webpack擁有很多其它的比較高級(jí)的功能（比如說本文后面會(huì)介紹的loaders和plugins），這些功能其實(shí)都可以通過命令行模式實(shí)現(xiàn)，但是正如已經(jīng)提到的，這樣不太方便且容易出錯(cuò)的，一個(gè)更好的辦法是定義一個(gè)配置文件，這個(gè)配置文件其實(shí)也是一個(gè)簡(jiǎn)單的JavaScript模塊，可以把所有的與構(gòu)建相關(guān)的信息放在里面。
還是繼續(xù)上面的例子來說明如何寫這個(gè)配置文件，在當(dāng)前練習(xí)文件夾的根目錄下新建一個(gè)名為webpack.config.js （文件名是固定的）的文件，并在其中進(jìn)行最最簡(jiǎn)單的配置，如下所示，它包含入口文件路徑和存放打包后文件的地方的路徑。
新建 webpack.config.js 配置文件
module.exports={
entry:"./src/main.js",//打包的入口
output:{
path:path.join(__dirname,'./dist/'),? //path必須是絕對(duì)路徑,用來配置資源打包的出口目錄
filename:"bundle.js",
//在打包結(jié)果中，webpack默認(rèn)將內(nèi)容的資源應(yīng)用路徑是相對(duì)于bundle.js文件，就是
//注：這里用到的path.join（）指令是node的方法，使用的話需要var path=require('path')，先 引入 才可以使用
}
}
現(xiàn)在如果你需要打包文件只需要在終端里你運(yùn)行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就可以了，這條命令會(huì)自動(dòng)參考webpack.config.js文件中的配置選項(xiàng)打包你的項(xiàng)目，輸出結(jié)果如下
又學(xué)會(huì)了一種使用Webpack的方法，而且不用管那煩人的命令行參數(shù)了，有沒有感覺很爽。有沒有想過如果可以連webpack(非全局安裝需使用node_modules/.bin/webpack)這條命令都可以不用，那種感覺會(huì)不會(huì)更爽~，繼續(xù)看下文。
更快捷的執(zhí)行打包任務(wù)
執(zhí)行類似于node_modules/.bin/webpack這樣的命令其實(shí)是比較煩人且容易出錯(cuò)的，不過值得慶幸的是npm可以引導(dǎo)任務(wù)執(zhí)行，對(duì)其進(jìn)行配置后可以使用簡(jiǎn)單的npm start命令來代替這些繁瑣的命令。在package.json中對(duì)npm的腳本部分進(jìn)行相關(guān)設(shè)置即可，設(shè)置方法如下。
{
"name": "webpack-sample-project",
"version": "1.0.0",
"description": "Sample webpack project",
"scripts": {
"build": "webpack" //配置的地方就是這里啦，運(yùn)行指令可以直接寫npm run build
},
"author": "zhang",
"license": "ISC",
"devDependencies": {
"webpack": "^1.12.9"
}
}
加載css步驟
文檔? https://webpack.js.org/guides/asset-management/#loading-css
1. npm install --save-dev style-loader css-loader
2.webpack.config.js
module: {
rules: [
{
test: /\.css$/,? //正則匹配css文件解析
use: [
'style-loader',
'css-loader'? //注意：這里必須style在前 ，css在后
]
}
]
}
};
Loading Images 圖片加載
文檔? https://webpack.js.org/guides/asset-management/#loading-images
1、加載
npm install --save-dev file-loader
2.配置 webpack.config.js
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
Webpack Sample Project
作者：zhangwang
鏈接：http://m.itdecent.cn/p/42e11515c10f
來源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
