webpack 2,3版本的網(wǎng)站 ： https://webpack.js.org/

什么是WebPack，為什么要使用它？

WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語(yǔ)言（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)插入頁(yè)面。

正式使用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://www.lxweimin.com/p/42e11515c10f

來源：簡(jiǎn)書

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。