模塊打包工具webpack怎么使用

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

一、什么是webpack

1、官方解釋

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

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

2、前端模塊化

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

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

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

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

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

3、打包如何理解？

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

• 就是將webpack中的各種資源模塊進行打包合并成一個多個包（Bundle）

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

• 打包工具還有grunt/gulp

webpack和grunt/gulp的對比

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

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

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

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

二、webpack的安裝

（wepack為了正常運行必須依賴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ā)時依賴，項目打包后不需要繼續(xù)使用。

三、webpack的配置

1、文件和文件夾解析

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

• src文件夾：用于存放我們寫的源文件
  main.js：項目的入口文件。
  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)準，nodejs就是CommodJS（模塊化）的實現(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我們需要動態(tài)獲取，

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

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

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

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

運行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中一個非常核心的概念

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

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

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

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

• 此時給webpack擴展對應(yīng)的loader就可以了

2、loader使用過程

1）、css文件處理

準備工作：

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

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

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

4、但是此時normal.css中的樣式還不會生效，因為沒有引用它，webpack也找不到它，因為我們只有一個入口，webpack會從入口開始查找其他依賴的文件。

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

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

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

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

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

此時，我們還需要一個style-loader幫助我們處理

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

2）、less文件處理

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

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

3）、圖片文件處理

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

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

  

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

  

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

  

說明：

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

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

• 所以，我們可以在options中添加如下選項：

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

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

  1、默認情況下，webpack會將生成的路徑之際返回給使用者
  2、但是，整個程序是打包在dist文件夾下的，所以這里需要在路徑下再添加一個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實例上，如下

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

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

六、Vue在webpack的使用方案

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

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

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

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

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

七、plugin的使用

1、認識plugin

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

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

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

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

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

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

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

除此之外，

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

九、Vue CLI

1、CLI是什么意思？

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

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

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

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

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

什么是NPM？

• NPM的全稱是Node Package Manager

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

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

3、Vue CLI的使用

• 安裝Vue腳手架

npm install -g @vue/cli

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

• Vue CLI2初始化項目

vue init webpack my-project

到此，關(guān)于“模塊打包工具webpack怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>