什么是webpack？本篇文章就來帶大家認(rèn)識(shí)了解下模塊打包工具webpack，希望對(duì)大家有所幫助！

一、什么是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.工程模塊依賴非常簡(jiǎn)單，甚至沒有用到模塊化的概念
  2.只需要進(jìn)行簡(jiǎ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文件簡(jiǎn)化打包命令

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

該文件中的代碼：

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中的代碼非常簡(jiǎn)單，就是將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è)非常長(zhǎng)的名字

  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í)例里面注冊(cè)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