模塊打包工具webpack怎么使用

這篇文章主要介紹“模塊打包工具webpack怎么使用”，在日常操作中，相信很多人在模塊打包工具webpack怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”模塊打包工具webpack怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)公司長期為數(shù)千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為駐馬店企業(yè)提供專業(yè)的網(wǎng)站制作、成都做網(wǎng)站，駐馬店網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

一、什么是webpack

1、官方解釋

從本質(zhì)上來講，webpack是一個(gè)現(xiàn)在的javaScript應(yīng)用的靜態(tài)模塊化打包工具。（從兩點(diǎn)概括這句話即模塊和打包）

下面來說一下模塊和打包的概念！

2、前端模塊化

• 前端模塊化的一些方案：AMD、CMD、CommonJS、ES6（瀏覽器不能識(shí)別它們，但是webpack可以做它們的底層支撐，方可進(jìn)行模塊化開發(fā)）

• ES6之前，要想進(jìn)行模塊化開發(fā)，就必須借助于其他的工具，讓我們可以進(jìn)行模塊化開發(fā)

• 并且在通過模塊化開發(fā)完成了項(xiàng)目后，還需要處理模塊化間的各種依賴，并且將其進(jìn)行整合打包

• 此時(shí)出現(xiàn)webpack，其中一個(gè)核心就是讓我們可能進(jìn)行模塊化開發(fā)，并且會(huì)幫助我們處理模塊間的依賴關(guān)系。

• 而不僅僅是JavaScript文件，我們的CSS、圖片、json文件等等在webpack中都可以被當(dāng)做模塊來使用。

3、打包如何理解？

• webpack可以幫助我們進(jìn)行模塊化，并且處理模塊間的各種復(fù)雜關(guān)系后，打包的概念就很好理解了。

• 就是將webpack中的各種資源模塊進(jìn)行打包合并成一個(gè)多個(gè)包（Bundle）

• 并且在打包的過程中，還可對(duì)資源進(jìn)行處理，比如壓縮圖片，將scss轉(zhuǎn)成css，將ES6語法轉(zhuǎn)成ES5語法，將TypeScript轉(zhuǎn)成JavaScript等等操作。

• 打包工具還有grunt/gulp

webpack和grunt/gulp的對(duì)比

• grunt/gulp的核心是Task
  1.可以配置一系列的task，并且定義task要處理的事務(wù)（例如ES6、ts轉(zhuǎn)化、圖片壓縮、scss轉(zhuǎn)成css）
  2.之后讓grunt/gulp來依次執(zhí)行這些task，而且讓整個(gè)流程自動(dòng)化

• 來看一個(gè)gulp的task
  1.下面的task就是將src下面的所有js文件轉(zhuǎn)成ES5的語法。
  2.并且最終輸出到dist文件夾中。
  

• 什么時(shí)候用grunt/gulp？
  1.工程模塊依賴非常簡單，甚至沒有用到模塊化的概念
  2.只需要進(jìn)行簡單的合并、壓縮，就使用grunt/gulp即可
  3.如果整個(gè)項(xiàng)目使用了模塊化管理，而且相互依賴非常強(qiáng)，我們就可以使用webpack。

• grunt/gulp和webpack有什么不同？
  1.grunt/gulp更加強(qiáng)調(diào)的事前端流程的自動(dòng)化，模塊化不是它的核心
  2.webpack更加強(qiáng)調(diào)模塊化開發(fā)管理，而文件壓縮合并、預(yù)處理等功能，是他附帶的功能

二、webpack的安裝

（wepack為了正常運(yùn)行必須依賴node環(huán)境，而node環(huán)境為了可以正常的執(zhí)行，必須使用npm工具管理node中各種依賴的包）

• 因此安裝webpack首先要安裝Node.js，Node.js自帶了軟件包管理工具npm

• 全局安裝webpack（npm install webpack@3.6.0 -g）

• 局部安裝webpck（npm install webpack@3.6.0 --save-dev）–save-dev是開發(fā)時(shí)依賴，項(xiàng)目打包后不需要繼續(xù)使用。

三、webpack的配置

1、文件和文件夾解析

• dist文件夾：用于存放之后打包的文件

• src文件夾：用于存放我們寫的源文件
  main.js：項(xiàng)目的入口文件。
  mathUtils.js:定義了一些數(shù)學(xué)工具函數(shù)，可以在其他地方引用，并且使用。
  index.html: 瀏覽器打開展示的首頁html（在這里引用的是src內(nèi)最終打包的文件即dist文件夾的內(nèi)容）。
  package.json：通過npm init生成的，npm包管理的文件。

以下為mathUtils.js文件和main.js文件中的代碼：（CommonJS模塊化規(guī)范，CommonJS是模塊化的標(biāo)準(zhǔn)，nodejs就是CommodJS（模塊化）的實(shí)現(xiàn)）

2、命令

webpack ./src/main.js ./dist/bundle.js(將main.js文件打包成bundle.js文件)

說明：同理，也可以使用ES6的模塊化規(guī)范

3、創(chuàng)建webpack.config.js文件簡化打包命令

（將打包命令映射為打包入口和出口）

該文件中的代碼：

entry:為打包的入口

output：為打包的出口

• output中的path我們需要?jiǎng)討B(tài)獲取，

• 因此我們可以使用Node.js語法導(dǎo)入一個(gè)模塊這個(gè)模塊為path（const path = require（‘path’）引號(hào)內(nèi)的文件是需要在node包里面找到）

• 通過npm init命令 （初始化）使用node.js

• 之后生成package.json文件（該文件描述當(dāng)前項(xiàng)目的信息）license：“ISC”(為項(xiàng)目開源),以下為package.json的代碼

說明：如果想使用node，必須依賴于package.json文件

運(yùn)行npm install webpack@3.6.0 --save-dev之后，增加了依賴如下

4、將webpack命令映射npm run

除了將webpack映射入口，出口之外，還可以將webpack命令映射為npm run一些操作（需要在package.json內(nèi)**“script”** 腳本標(biāo)簽中修改）。。

四、loader的使用

1、什么是loader

• loader是webpack中一個(gè)非常核心的概念

現(xiàn)在我們來思考一下webpack用來做什么？

• 我們主要使用webpack來處理js代碼，并且webpack會(huì)自動(dòng)處理js之前相關(guān)的依賴

• 但，在開發(fā)中不僅由基本的js代碼處理，也需要加載css、圖片、也包括一些高級(jí)的將ES6轉(zhuǎn)成ES5代碼，將TypeScript轉(zhuǎn)成ES5代碼，將scss、less轉(zhuǎn)成css，將.jsx、.vue文件轉(zhuǎn)成js文件等。

• 對(duì)于webpack本身的能力來說，對(duì)于這些轉(zhuǎn)化是不支持的

• 此時(shí)給webpack擴(kuò)展對(duì)應(yīng)的loader就可以了

2、loader使用過程

1）、css文件處理

準(zhǔn)備工作：

1、在src目錄中，創(chuàng)建一個(gè)css文件，其中創(chuàng)建一個(gè)normal.css文件

2、重新組織文件的目錄結(jié)構(gòu)，將零散的js文件放在一個(gè)js文件夾中

3、normal.css中的代碼非常簡單，就是將body設(shè)置為red

4、但是此時(shí)normal.css中的樣式還不會(huì)生效，因?yàn)闆]有引用它，webpack也找不到它，因?yàn)槲覀冎挥幸粋€(gè)入口，webpack會(huì)從入口開始查找其他依賴的文件。

5、此時(shí)我們必須在main.js即入口文件引用

之后我們需要導(dǎo)入對(duì)應(yīng)的loader進(jìn)行使用！

• 步驟一：通過npm安裝需要使用的loader
  （npm install --save-dev css-loader ）（npm install --save-dev style-loader）
  在webpack的官方中，找到如下關(guān)于樣式的loader使用方法：
  
  

• 步驟二：在webpack.config.js中的modules關(guān)鍵字下進(jìn)行配置

說明： 其中css-loader只負(fù)責(zé)加載css文件，并不負(fù)責(zé)將css具體樣式嵌入到文檔中

此時(shí)，我們還需要一個(gè)style-loader幫助我們處理

注意：style-loader需要放在css-loader的前面。

2）、less文件處理

• 步驟1：安裝對(duì)應(yīng)的loader（注意：這里還安裝了less，因?yàn)閣ebpack會(huì)使用less對(duì)less文件進(jìn)行編譯）。命令：npm install --save-dev less-loader less

• 步驟2：修改對(duì)應(yīng)的配置文件（在webpack.config.js）中添加一個(gè)rules選項(xiàng)，用于處理.less文件。如下：

3）、圖片文件處理

• 步驟1：在項(xiàng)目中加入兩張圖片（一張小于8kb，另一張大于8kb）

• 步驟2：先考慮在css樣式中引用圖片，如下

  

• 步驟3：修改對(duì)應(yīng)的配置文件（在webpack.config.js）中添加一個(gè)rules選項(xiàng)，用于處理圖片文件。如下：

  

• 步驟4：打包之后發(fā)現(xiàn)出錯(cuò)，因?yàn)榇笥?kb的圖片會(huì)通過file-loader進(jìn)行處理，但是我們的項(xiàng)目中并沒有file-loader。（需要安裝file-loader，命令npm install --save-dev file-loader），安裝之后在打包，就會(huì)發(fā)現(xiàn)dist文件夾下多了一個(gè)圖片文件。

  

說明：

• 發(fā)現(xiàn)webpack自動(dòng)幫我們生成了一個(gè)非常長的名字

  1、這是一個(gè)32位hash值，目的是防止名字重復(fù)
  2、但是，實(shí)際開發(fā)中，可能對(duì)打包的圖片名字有一定的要求

• 所以，我們可以在options中添加如下選項(xiàng)：

  1、img：文件要打包到的文件夾
  2、name：獲取圖片原來的名字，放在該位置
  3、hash8：為了防止圖片名稱沖突，依然使用hash，但只保留8位
  4、ext：使用圖片原來的擴(kuò)展名
  如下：
  

• 之后還需要配置修改圖片使用的路徑

  1、默認(rèn)情況下，webpack會(huì)將生成的路徑之際返回給使用者
  2、但是，整個(gè)程序是打包在dist文件夾下的，所以這里需要在路徑下再添加一個(gè)dist/
  如下：
  

綜上，打包之后，圖片文件為這樣

4）、ES6轉(zhuǎn)ES5的babel

五、webpack中配置Vue

• 步驟1：終端執(zhí)行命令（npm install --save vue）

• 步驟2：在main.js中導(dǎo)入vue（import Vue from ‘vue’ ）如下

• 步驟3：在index.html內(nèi)將p掛在到vue實(shí)例上，如下

• 步驟4：打包后發(fā)現(xiàn)錯(cuò)誤，我們需要指定我們使用的vue是runtime-compiler版本的。

具體操作：需要在webpack添加resolve，取一個(gè)別名（alias），如下：

六、Vue在webpack的使用方案

步驟1：在index.html將p掛在到vue實(shí)例上

步驟2：將APP組件導(dǎo)入在main.js文件中，并在Vue實(shí)例里面注冊APP，在Vue模板中使用該組件APP（組件化）

步驟3：創(chuàng)建APP.vue文件，將vue頁面的模板和js代碼，css代碼分離,如下

步驟4：配置vue相應(yīng)的loader，

修改webpack.config.js的配置文件：

七、plugin的使用

1、認(rèn)識(shí)plugin

• plugin是什么？
  1、plugin是插件的意思，通常是用于對(duì)某個(gè)現(xiàn)有的架構(gòu)進(jìn)行擴(kuò)展
  2、webpack中的插件，就是對(duì)webpack現(xiàn)有功能的各種擴(kuò)展，比如打包優(yōu)化，文件壓縮等

• loader和plugin區(qū)別
  1、loader主要用于轉(zhuǎn)化某些類型的模塊，它是一個(gè)轉(zhuǎn)化器
  2、plugin是插件，它是對(duì)webpack本身的擴(kuò)展，是一個(gè)擴(kuò)展器

• plugin的使用過程
  1、步驟一：通過npm安裝需要使用plugins（某些webpack已經(jīng)內(nèi)置的插件不需要安裝）
  2、步驟二：在webpack.config.js中的plugins中配置插件

2、webpack-添加版權(quán)信息Plugin的使用

3、打包html的plugin

4、js壓縮的Plugin

八、搭建本地服務(wù)器

• webpack提供了一個(gè)可選的本地開發(fā)服務(wù)器，這個(gè)本地服務(wù)器基于node.js搭建，內(nèi)部使用express框架，可以實(shí)現(xiàn)我們想要的讓瀏覽器自動(dòng)刷新顯示修改后的結(jié)果。

• 不過它是一個(gè)單獨(dú)的模塊，在webpck中使用之前需要安裝它
  命令：（npm install --save-dev webpack-dev-server@2.9.1）

• devserver也是作為webpack中的一個(gè)選項(xiàng)，選項(xiàng)本身可以設(shè)置如下屬性：
  1、contentBase：為哪一個(gè)文件夾提供本地服務(wù)，默認(rèn)是根文件夾，我們這里要填寫./dist
  2、port：端口號(hào)
  3、inline：頁面實(shí)時(shí)刷新
  4、historyApiFallback：在SPA頁面中，依賴HTML5的history模式

• webpack.config.js文件配置修改如下：
  

• –open參數(shù)表示直接打開瀏覽器

除此之外，

下面我們想webpack配置文件進(jìn)行分離：即把開發(fā)時(shí)需要用的東西和發(fā)布（編譯）用到的東西分離開。如下：

九、Vue CLI

1、CLI是什么意思？

• 是Command-Line Interface，翻譯為命令行界面，但是俗稱腳手架

• Vue CLI是一個(gè)官方發(fā)布vue.js項(xiàng)目腳手架

• 使用vue-cli可以快速搭建Vue開發(fā)環(huán)境以及對(duì)應(yīng)的webpack配置

2、Vue CLI使用前提 --Node（需要安裝node）

然而使用Node，必須涉及到npm，

什么是NPM？

• NPM的全稱是Node Package Manager

• 是一個(gè)NodeJS包管理和分發(fā)工具，已經(jīng)成為了非官方的發(fā)布Node模塊（包）的標(biāo)準(zhǔn)

• 經(jīng)常使用NPM來安裝一些開發(fā)過程中依賴包。

3、Vue CLI的使用

• 安裝Vue腳手架

npm install -g @vue/cli

注意：上面安裝的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化項(xiàng)目時(shí)不可以的

• Vue CLI2初始化項(xiàng)目

vue init webpack my-project

到此，關(guān)于“模塊打包工具webpack怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！

當(dāng)前名稱：模塊打包工具webpack怎么使用
本文URL：http://bm7419.com/article48/iihgep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、App設(shè)計(jì)、企業(yè)網(wǎng)站制作、響應(yīng)式網(wǎng)站

廣告

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