這篇文章將為大家詳細講解有關(guān)webpack模塊加載器兼打包工具怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
什么是 webpack？
webpack是近期最火的一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。
我們可以直接使用 require(XXX) 的形式來引入各模塊，即使它們可能需要經(jīng)過編譯（比如JSX和sass），但我們無須在上面花費太多心思，因為 webpack 有著各種健全的加載器（loader）在默默處理這些事情，這塊我們后續(xù)會提到。
你可以不打算將其用在你的項目上，但沒有理由不去掌握它，因為以近期 Github 上各大主流的（React相關(guān)）項目來說，它們倉庫上所展示的示例已經(jīng)是基于 webpack 來開發(fā)的，比如 React-Boostrap 和 Redux。
webpack的官網(wǎng)是 http://webpack.github.io/ ，文檔地址是 http://webpack.github.io/docs/ ，想對其進行更詳細了解的可以點進去瞧一瞧。
1>基本介紹
在webpack中，一個css甚至一個字體都成為模塊，彼此存在依賴關(guān)系，webpack就是處理模塊間依賴關(guān)系的，并將它們進行打包。
各種文件格式通過特定的加載器loader編譯后，最終統(tǒng)一生成為.js,.css,.png,.jpg等靜態(tài)資源。
但是歸根到底他就是有個.js的配置文件，一個構(gòu)架好或者差都表現(xiàn)在這個配置文件中。
2>配置webpack
創(chuàng)建一個目錄demo，npm初始化
npm init//完成后有package.json文件
本地局部安裝webpack
npm install webpack --save-dev
接著安裝webpack-dev-server，可以在開發(fā)環(huán)境提供很多服務(wù)，比如啟動一個服務(wù)器，熱更新，接口代理
npm install webpack-dev-server --save-dev
寫配置文件
在package.json中scripts里添加一個快速啟動webpack-dev-server服務(wù)的腳本"dev":"webpack-dev-server --open --config webpack.config.js"
運行npm run dev的時候就會執(zhí)行"webpack-dev-server --open --config webpack.config.js
其中config指向的是webpack-dev-server指向的文件路徑。Open在執(zhí)行時自動會在瀏覽器打開頁面，默認(rèn)地址是127.0.0.1:8080,不過ip，端口號都可以配置
3>webpack的四個核心概念：
入口(entry)、輸出(output)、加載器（loader）、插件(plugins)
1》entry 指示 webpack 應(yīng)該使用哪個模塊，來作為構(gòu)建其內(nèi)部依賴圖的開始,可以是單入口也可以是多入口
2》output 用來配置編譯后的文件存儲位置和文件名,只能有一個出口
output中有path選項用來存放打包后文件的輸出目錄，必填
filename用于指定輸出文件的名稱
publicePath指定文件引用的目錄
3》loader 對模塊源代碼進行轉(zhuǎn)換（webpack 本身只能處理Js模塊）。
重慶分公司
重慶分公司
module:{
rules:[
{
test:/\.css$/,
use:[
'style-loader',
'css-loader'
]
}
]
}在module對象的rules屬性中可以指定一系列的loader，每一個loader都必須包括test，use兩個選項。
上面代碼的意思是：webpack編譯過程中遇到require()或import語句導(dǎo)入一個后綴為.css的文件時，它將先通過css-loader轉(zhuǎn)換，再通過style-loader轉(zhuǎn)換，然后打包。
test 屬性，用于標(biāo)識出應(yīng)該被對應(yīng)的 loader 進行轉(zhuǎn)換的某個或某些文件。
use 屬性，表示進行轉(zhuǎn)換時，應(yīng)該使用哪個 loader。可以是字符串或者數(shù)組，數(shù)組從后面開始編譯。
const webpack = require('webpack'); //訪問 webpack 運行時(runtime)
const configuration = require('./webpack.config.js');
let compiler = webpack(configuration);
compiler.apply(new webpack.ProgressPlugin());
compiler.run(function(err, stats) {
// ...
});4》Plugins：可以用來解決loader無法實現(xiàn)的其他事。外置插件要先npm安裝，然后導(dǎo)入插件用require()
extract-text-webpack-plugin插件可以把散落在各地的Css提取出來，并合成一個文件.
//導(dǎo)入插件
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var config={
//...
plugins:[
//重命名提取后的css
new ExtractTextPlugin('main.css')
]
};webpack的優(yōu)點如下：
1. webpack 遵循commonJS 的形式，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。
2. 能被模塊化的不僅僅是 JS ，所有的靜態(tài)資源，例如css，圖片等都能模塊化，即以require的方式引入。
3. 開發(fā)便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉(zhuǎn)base64等。
webpack與gulp的區(qū)別
gulp合并后仍然是你寫的代碼，只是局部變量名被替換，一些語法做了轉(zhuǎn)換而已，整體內(nèi)容并沒有發(fā)生改變。
Webpack打包后的代碼已經(jīng)不只是你寫的代碼，其中夾雜很多webpack自身的模塊處理代碼。
他們的定位是不同的。對gulp來說，他旨在規(guī)范前端開發(fā)流程。webpack更是明顯強調(diào)模塊化開發(fā)，而那些文件壓縮合并、預(yù)處理等功能，不過是他附帶的功能。
關(guān)于“webpack模塊加載器兼打包工具怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
