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

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

WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結(jié)構(gòu)脾猛，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss箍镜，TypeScript等），并將其打包為合適的格式以供瀏覽器使用渔欢。

WebPack和Grunt以及Gulp相比有什么特性

其實Webpack和另外兩個并沒有太多的可比性墓塌，Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具，而WebPack是一種模塊化的解決方案奥额，不過Webpack的優(yōu)點使得Webpack可以替代Gulp/Grunt類的工具苫幢。

Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯垫挨，組合韩肝，壓縮等任務(wù)的具體步驟，這個工具之后可以自動替你完成這些任務(wù)棒拂。

Webpack的工作方式是：把你的項目當做一個整體伞梯，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件帚屉，使用loaders處理它們谜诫，最后打包為一個瀏覽器可識別的JavaScript文件。

如果實在要把二者進行比較攻旦，Webpack的處理速度更快更直接喻旷，能打包更多不同類型的文件。

開始使用Webpack

1.安裝

在安裝 Webpack 前牢屋，你本地環(huán)境需要支持node.js

全局安裝 npm install -g webpack

安裝到項目目錄 npm install --save-dev webpack

2.開始?

1.在終端中使用npm init命令可以自動創(chuàng)建這個package.json文件

2.安裝到項目目錄 npm install --save-dev webpack

3.創(chuàng)建兩個文件夾,app文件夾和public文件夾且预，app文件夾用來存放原始數(shù)據(jù)和我們將寫的JavaScript模塊，public文件夾用來存放準備給瀏覽器讀取的數(shù)據(jù)（包括使用webpack生成的打包后的js文件以及一個index.html文件）烙无。在這里還需要創(chuàng)建三個文件锋谐，index.html 文件放在public文件夾中，兩個js文件（Greeter.js和main.js）放在app文件夾中截酷，此時項目結(jié)構(gòu)如下圖所示

index.html文件只有最基礎(chǔ)的html代碼涮拗，它唯一的目的就是加載打包后的js文件（bundle.js）

Greeter.js只包括一個用來返回包含問候信息的html元素的函數(shù)。

main.js用來把Greeter模塊返回的節(jié)點插入頁面。

正式使用Webpack

webpack可以在終端中使用三热，其最基礎(chǔ)的命令是

webpack 入口文件（例如 main.js）? 出口文件(例 bundle.js)

結(jié)果如下

通過配置文件來使用Webpack（另外一種方式）

Webpack擁有很多其它的比較高級的功能（比如說本文后面會介紹的loaders和plugins）鼓择，這些功能其實都可以通過命令行模式實現(xiàn)，但是正如已經(jīng)提到的就漾，這樣不太方便且容易出錯的呐能，一個更好的辦法是定義一個配置文件，這個配置文件其實也是一個簡單的JavaScript模塊抑堡，可以把所有的與構(gòu)建相關(guān)的信息放在里面摆出。

還是繼續(xù)上面的例子來說明如何寫這個配置文件，在當前練習文件夾的根目錄下新建一個名為webpack.config.js （文件名是固定的）的文件首妖，并在其中進行最最簡單的配置懊蒸，如下所示，它包含入口文件路徑和存放打包后文件的地方的路徑悯搔。

新建 webpack.config.js 配置文件

module.exports={

entry:"./src/main.js",//打包的入口

output:{

path:path.join(__dirname,'./dist/'),? //path必須是絕對路徑,用來配置資源打包的出口目錄

filename:"bundle.js",

//在打包結(jié)果中，webpack默認將內(nèi)容的資源應(yīng)用路徑是相對于bundle.js文件舌仍，就是

//注：這里用到的path.join（）指令是node的方法妒貌，使用的話需要var path=require('path')，先 引入 才可以使用

}

}

現(xiàn)在如果你需要打包文件只需要在終端里你運行webpack(非全局安裝需使用node_modules/.bin/webpack)命令就可以了铸豁，這條命令會自動參考webpack.config.js文件中的配置選項打包你的項目灌曙，輸出結(jié)果如下

又學會了一種使用Webpack的方法，而且不用管那煩人的命令行參數(shù)了节芥，有沒有感覺很爽在刺。有沒有想過如果可以連webpack(非全局安裝需使用node_modules/.bin/webpack)這條命令都可以不用，那種感覺會不會更爽~头镊，繼續(xù)看下文蚣驼。

更快捷的執(zhí)行打包任務(wù)

執(zhí)行類似于node_modules/.bin/webpack這樣的命令其實是比較煩人且容易出錯的，不過值得慶幸的是npm可以引導(dǎo)任務(wù)執(zhí)行相艇，對其進行配置后可以使用簡單的npm start命令來代替這些繁瑣的命令颖杏。在package.json中對npm的腳本部分進行相關(guān)設(shè)置即可，設(shè)置方法如下坛芽。

{

"name": "webpack-sample-project",

"version": "1.0.0",

"description": "Sample webpack project",

"scripts": {

"build": "webpack" //配置的地方就是這里啦留储，運行指令可以直接寫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.reibang.com/p/42e11515c10f

來源：簡書

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