這篇文章將為大家詳細(xì)講解有關(guān)webpack模塊加載器兼打包工具怎么用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

目前成都創(chuàng)新互聯(lián)已為上1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、雙橋網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶(hù)導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶(hù)和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

 什么是 webpack？

webpack是近期最火的一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來(lái)使用和處理。

我們可以直接使用 require(XXX) 的形式來(lái)引入各模塊，即使它們可能需要經(jīng)過(guò)編譯（比如JSX和sass），但我們無(wú)須在上面花費(fèi)太多心思，因?yàn)?webpack 有著各種健全的加載器（loader）在默默處理這些事情，這塊我們后續(xù)會(huì)提到。

你可以不打算將其用在你的項(xiàng)目上，但沒(méi)有理由不去掌握它，因?yàn)橐越?Github 上各大主流的（React相關(guān)）項(xiàng)目來(lái)說(shuō)，它們倉(cāng)庫(kù)上所展示的示例已經(jīng)是基于 webpack 來(lái)開(kāi)發(fā)的，比如 React-Boostrap 和 Redux。

webpack的官網(wǎng)是 http://webpack.github.io/ ，文檔地址是 http://webpack.github.io/docs/ ，想對(duì)其進(jìn)行更詳細(xì)了解的可以點(diǎn)進(jìn)去瞧一瞧。

1>基本介紹

在webpack中，一個(gè)css甚至一個(gè)字體都成為模塊，彼此存在依賴(lài)關(guān)系，webpack就是處理模塊間依賴(lài)關(guān)系的，并將它們進(jìn)行打包。

各種文件格式通過(guò)特定的加載器loader編譯后，最終統(tǒng)一生成為.js,.css,.png,.jpg等靜態(tài)資源。

但是歸根到底他就是有個(gè).js的配置文件，一個(gè)構(gòu)架好或者差都表現(xiàn)在這個(gè)配置文件中。

2>配置webpack

創(chuàng)建一個(gè)目錄demo，npm初始化

npm init//完成后有package.json文件

本地局部安裝webpack

npm install webpack --save-dev

接著安裝webpack-dev-server，可以在開(kāi)發(fā)環(huán)境提供很多服務(wù)，比如啟動(dòng)一個(gè)服務(wù)器，熱更新，接口代理

npm install webpack-dev-server --save-dev

寫(xiě)配置文件

在package.json中scripts里添加一個(gè)快速啟動(dòng)webpack-dev-server服務(wù)的腳本"dev":"webpack-dev-server --open --config webpack.config.js"

運(yùn)行npm run dev的時(shí)候就會(huì)執(zhí)行"webpack-dev-server --open --config webpack.config.js

其中config指向的是webpack-dev-server指向的文件路徑。Open在執(zhí)行時(shí)自動(dòng)會(huì)在瀏覽器打開(kāi)頁(yè)面，默認(rèn)地址是127.0.0.1:8080,不過(guò)ip，端口號(hào)都可以配置

3>webpack的四個(gè)核心概念：

入口(entry)、輸出(output)、加載器（loader）、插件(plugins)

1》entry 指示 webpack 應(yīng)該使用哪個(gè)模塊，來(lái)作為構(gòu)建其內(nèi)部依賴(lài)圖的開(kāi)始,可以是單入口也可以是多入口

2》output 用來(lái)配置編譯后的文件存儲(chǔ)位置和文件名,只能有一個(gè)出口

• output中有path選項(xiàng)用來(lái)存放打包后文件的輸出目錄，必填

• filename用于指定輸出文件的名稱(chēng)

• publicePath指定文件引用的目錄

3》loader 對(duì)模塊源代碼進(jìn)行轉(zhuǎn)換（webpack 本身只能處理Js模塊）。

 module:{
  rules:[
  {
   test:/\.css$/,
  use:[
    'style-loader',
    'css-loader'
  ]
  }
 ]
 }

在module對(duì)象的rules屬性中可以指定一系列的loader，每一個(gè)loader都必須包括test，use兩個(gè)選項(xiàng)。

上面代碼的意思是：webpack編譯過(guò)程中遇到require()或import語(yǔ)句導(dǎo)入一個(gè)后綴為.css的文件時(shí)，它將先通過(guò)css-loader轉(zhuǎn)換，再通過(guò)style-loader轉(zhuǎn)換，然后打包。

• test 屬性，用于標(biāo)識(shí)出應(yīng)該被對(duì)應(yīng)的 loader 進(jìn)行轉(zhuǎn)換的某個(gè)或某些文件。

• use 屬性，表示進(jìn)行轉(zhuǎn)換時(shí)，應(yīng)該使用哪個(gè) loader?？梢允亲址蛘邤?shù)組，數(shù)組從后面開(kāi)始編譯。

const webpack = require('webpack'); //訪(fǎng)問(wèn) webpack 運(yùn)行時(shí)(runtime)
 const configuration = require('./webpack.config.js');
 let compiler = webpack(configuration);
 compiler.apply(new webpack.ProgressPlugin());
 compiler.run(function(err, stats) {
 // ...
 });

4》Plugins：可以用來(lái)解決loader無(wú)法實(shí)現(xiàn)的其他事。外置插件要先npm安裝，然后導(dǎo)入插件用require()

extract-text-webpack-plugin插件可以把散落在各地的Css提取出來(lái)，并合成一個(gè)文件.

 //導(dǎo)入插件
var ExtractTextPlugin=require('extract-text-webpack-plugin');
var config={
//...
 plugins:[
 //重命名提取后的css
 new ExtractTextPlugin('main.css')
 ]
};

webpack的優(yōu)點(diǎn)如下：

1. webpack 遵循commonJS 的形式，但對(duì) AMD/CMD 的支持也很全面，方便舊項(xiàng)目進(jìn)行代碼遷移。

2. 能被模塊化的不僅僅是 JS ，所有的靜態(tài)資源，例如css，圖片等都能模塊化，即以require的方式引入。

3. 開(kāi)發(fā)便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉(zhuǎn)base64等。

webpack與gulp的區(qū)別

gulp合并后仍然是你寫(xiě)的代碼，只是局部變量名被替換，一些語(yǔ)法做了轉(zhuǎn)換而已，整體內(nèi)容并沒(méi)有發(fā)生改變。

Webpack打包后的代碼已經(jīng)不只是你寫(xiě)的代碼，其中夾雜很多webpack自身的模塊處理代碼。

他們的定位是不同的。對(duì)gulp來(lái)說(shuō)，他旨在規(guī)范前端開(kāi)發(fā)流程。webpack更是明顯強(qiáng)調(diào)模塊化開(kāi)發(fā)，而那些文件壓縮合并、預(yù)處理等功能，不過(guò)是他附帶的功能。

關(guān)于“webpack模塊加載器兼打包工具怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

新聞名稱(chēng)：webpack模塊加載器兼打包工具怎么用-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://m.rwnh.cn/article4/ddsoie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、網(wǎng)站策劃、App開(kāi)發(fā)、微信小程序、品牌網(wǎng)站制作、小程序開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)