目前，公司前端項(xiàng)目開(kāi)發(fā)技術(shù)棧基本改造為使用gulp進(jìn)行自動(dòng)化構(gòu)建，webpack進(jìn)行項(xiàng)目模塊化依賴管理，Vue+ Vuex + Vue-Router作為項(xiàng)目組件化開(kāi)發(fā)框架，為了更深入的理解、使用當(dāng)前技術(shù)棧并與讀者分享、交流，計(jì)劃推出一系列相關(guān)學(xué)習(xí)與實(shí)踐文章。本篇為開(kāi)篇，主要講述如何使用webpack搭建開(kāi)發(fā)環(huán)境。

項(xiàng)目初始化

以你喜歡的任意方式，創(chuàng)建項(xiàng)目根目錄，如：

mkdir vue-hello

初始化包模塊管理文件

進(jìn)入項(xiàng)目根目錄，初始化項(xiàng)目包模塊管理文件package.json:

npm init 

命令臺(tái)會(huì)提示你輸入一堆信息，如果你想簡(jiǎn)單一點(diǎn)，可以添加-y參數(shù)，跳過(guò)輸入步驟，生成默認(rèn)信息：

npm init -y

初始化源碼目錄

在項(xiàng)目根目錄下創(chuàng)建源碼目錄結(jié)構(gòu)，通常源碼目錄是src或app，個(gè)人喜好是使用src:

webpack簡(jiǎn)述及使用

雖然在本篇文章我們不會(huì)對(duì)webpack做太過(guò)詳細(xì)的介紹，但是依然希望能幫助讀者對(duì)webpack擁有更清晰的了解，webpack是什么？

webpack is a tool to build JavaScript modules in your application

webpack是一個(gè)幫助你的應(yīng)用構(gòu)建JavaScript模塊的工具。

接下來(lái)，我們介紹幾個(gè)知識(shí)點(diǎn)幫助理解webpack：模塊化，webpack原理及其與grunt和gulp的比較。

模塊化

模塊化 指解決一個(gè)復(fù)雜問(wèn)題時(shí)自頂向下逐層把系統(tǒng)劃分成若干模塊的過(guò)程。

模塊是一個(gè)可組合、分解和更換的單元，將一個(gè)系統(tǒng)分解成若干模塊，單元；大家遵循一定的規(guī)范，各司其職，各自開(kāi)發(fā)不同模塊；之后可以較低成本的將模塊組合起來(lái)，構(gòu)成一個(gè)完整的系統(tǒng)，極大方便了團(tuán)隊(duì)成員之間的協(xié)助開(kāi)發(fā)，產(chǎn)出效率得到有效提升。

WEBPACK原理

webpack是一個(gè)幫助你的應(yīng)用構(gòu)建JavaScript模塊的工具，其本質(zhì)只能處理JavaScript，那你會(huì)疑惑了，不是說(shuō)使用webpack，可以很方便的在JavaScript代碼中引用圖片，CSS等資源嘛？是的，這正是webpack的優(yōu)勢(shì)，那怎么實(shí)現(xiàn)的呢？這就要涉及到webpack中的一個(gè)概念：加載器（loader）。

加載器 是作用于應(yīng)用資源文件的轉(zhuǎn)換器，它們是一系列JavaScript函數(shù)，接受資源文件的內(nèi)容做參數(shù)，然后返回新的資源（以一個(gè)JavaScript模塊的形式返回）。

所以，對(duì)于webpack，我們明確三點(diǎn)：

1. 模塊：webpack中一切資源文件（JavaScript， 樣式， 圖片資源等）皆視為模塊；
2. 加載器：webpack通過(guò)加載器（JavaScript函數(shù)）將其他資源處理（構(gòu)建）成JavaScript模塊；
3. 管理依賴：webpack在編譯模塊時(shí)，就能分析查找該模塊內(nèi)的依賴，可以很好的處理不同模塊間的依賴；

WEBPACK對(duì)比GRUNT/GULP

grunt

打開(kāi)grunt官網(wǎng)，你可以看到最醒目的介紹：The JavaScript Task Runner，還有一個(gè)關(guān)鍵字automation – 自動(dòng)化，其定位是一個(gè)JavaScript的自動(dòng)化構(gòu)建任務(wù)處理器，幫助開(kāi)發(fā)者自動(dòng)化處理項(xiàng)目的構(gòu)建流程；

gulp

gulp官網(wǎng)的定義是：Automate and enhance your workflow，自動(dòng)強(qiáng)化項(xiàng)目構(gòu)建流程，其與grunt的目標(biāo)一致，都是幫助開(kāi)發(fā)者自動(dòng)化處理項(xiàng)目的構(gòu)建流程，不同的是gulp實(shí)現(xiàn)方式是基于流的，即以流的方式處理文件，而grunt是以二進(jìn)制方式處理文件，gulp使用性能是要強(qiáng)于grunt的；

總結(jié)

1. webpack定位是一個(gè)模塊化管理工具，而grunt/gulp都是自動(dòng)化任務(wù)流程構(gòu)建工具；
2. grunt基于二進(jìn)制處理文件，gulp基于流式處理文件，效率比grunt更高一些；
3. webpack強(qiáng)大特性，使得其添加諸多插件可以替代grunt/gulp，但是目前的實(shí)踐項(xiàng)目中，通常webpack結(jié)合gulp或grunt使用（各自處理各自專長(zhǎng)的任務(wù)）；

安裝

首先安裝webpack，npm或yarn都可以，無(wú)甚區(qū)別：

npm install --save-dev webpack

關(guān)于此處的--save和-dev參數(shù)做簡(jiǎn)要說(shuō)明：

1. --save是聲明將安裝依賴添加入package.json文件;
2. 默認(rèn)地，使用npm安裝包模塊依賴時(shí)，依賴關(guān)系存儲(chǔ)在在"dependencies"屬性對(duì)象內(nèi)，表示項(xiàng)目依賴；
3. webpack是作為開(kāi)發(fā)環(huán)境依賴的，不是作為源碼直接調(diào)用，所以添加-dev參數(shù)，以聲明其是開(kāi)發(fā)環(huán)境依賴；

webpack配置介紹

實(shí)踐項(xiàng)目使用webpack完成自動(dòng)化構(gòu)建，本地服務(wù)調(diào)試與熱加載，首先在根目錄下創(chuàng)建webpack的配置入口文件webpack.config.js，基本內(nèi)容結(jié)構(gòu)如下:

  var path = require('path');

  module.exports = {
    context: path.resolve(__dirname, 'src/'),
    entry: {
      app: './scripts/app.js'
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist/scripts/')
    },
    module: {
      loaders: []
    },
    resolve: {
      modules:[],
      alias: {},
      extensions: []
    },
    plugins: [],
    devServer: {}
  };

如上，webpack配置文件使用module.exports方式導(dǎo)出配置對(duì)象，webpack執(zhí)行時(shí)會(huì)默認(rèn)讀取項(xiàng)目根目錄下webpack.config.js文件，當(dāng)然可以手動(dòng)配置指定一個(gè)文件作為配置文件，我們不討論，可以參考webpack文檔，接下來(lái)對(duì)webpack配置內(nèi)容做簡(jiǎn)要介紹，如果你對(duì)webpack使用比較熟悉，可以跳過(guò)此節(jié)。

文件處理配置

和webpack文件處理相關(guān)的幾個(gè)配置屬性主要有三個(gè)：目錄上下文信息（context）, 處理文件入口信息（entry）, 文件輸出信息（output）。

目錄上下文信息（context）

設(shè)置解析處理文件入口的相對(duì)目錄，值為一個(gè)絕對(duì)目錄路徑，默認(rèn)為當(dāng)前執(zhí)行目錄，通常即項(xiàng)目根目錄，在Node中其值與process.cwd()相同，如：

context: path.resolve(__dirname, 'src/'),

如上即解析為項(xiàng)目根目錄下的src目錄。

處理文件入口信息（entry）

處理文件入口，值可以是字符串，或數(shù)組，或?qū)ο?，值為字符串或?shù)組時(shí)，即輸出單文件，值為對(duì)象，可以輸出多文件，輸出文件名稱等信息參考文件輸出信息（output）。

文件輸出信息（output）

此配置聲明webpack編譯輸出文件的文件名等信息，如:

filename: '[name].js',

聲明文件名就是模塊(chunk)名，對(duì)應(yīng)在entry中定義的入口，你可能還見(jiàn)過(guò)[id],[hash],[chunkhash]這些用法，現(xiàn)做簡(jiǎn)單介紹：

1. [id]：該值表示webpack編譯模塊（chunk）的id，通常是一個(gè)數(shù)字；
2. [name]：該值表示webpack編譯模塊（chunk）名，對(duì)應(yīng)entry中定義的入口名或文件名；
3. [chunkhash]：該值表示webpack編譯模塊（chunk）hash值，根據(jù)模塊內(nèi)容計(jì)算出的一個(gè)md5值；
4. [hash]：該值表示webapck編譯對(duì)象hash值，根據(jù)編譯對(duì)象計(jì)算出的md5值；

編譯對(duì)象，即webpack執(zhí)行時(shí)讀取配置后生成的一個(gè)編譯配置對(duì)象，包含模塊，待編譯文件，相對(duì)于上次編譯的變更文件等諸多信息，需要注意的是該對(duì)象在webpack啟動(dòng)讀取配置文件后形成，在此次編譯過(guò)程保持不變。

1. output.path：定義輸出文件所在目錄；
2. output.publicPath：定義輸出文件在瀏覽器訪問(wèn)時(shí)的基礎(chǔ)相對(duì)路徑，可以與后文webpack-dev-server一起使用。

webpack加載器與模塊

在介紹加載器配置之前，先看看加載器是什么：

Loaders are transformations that are applied on a resource file of your app. They are functions (running in node.js) that take the source of a resource file as the parameter and return the new source.

加載器是作用于應(yīng)用資源文件的轉(zhuǎn)換器，它們是一系列函數(shù)，接受資源文件的內(nèi)容做參數(shù)，然后返回新的資源（以一個(gè)模塊的形式返回）。

webpack

webpack解析文件時(shí)使用的加載器都聲明在module屬性的loaders數(shù)組中，可以設(shè)置一個(gè)或多個(gè)加載器。

module.noParse：指定某些文件不需要使用解析，支持傳入文件路徑或正則表達(dá)式；

module.loaders：指定解析文件的加載器模塊及各模塊解析規(guī)則，可以設(shè)置以下屬性：

1. test: 待解析文件需匹配的規(guī)則，通常以文件后綴名稱匹配文件；
2. include：待解析文件所處目錄；
3. exclude: 過(guò)濾掉的目錄；
4. loader：加載器模塊名稱；
5. loaders多個(gè)加載器；

模塊解析規(guī)則配置

webpack支持在resolve屬性對(duì)象中配置模塊解析規(guī)則，主要有root，modules, alias和extensions屬性。

resolve.root與resolve.modules

該屬性設(shè)置的是在開(kāi)發(fā)代碼中使用require或import加載某模塊時(shí)，webpack查找該模塊所遵循的查找目錄范圍，如在源代碼中存在：

var utils = require('utils/utils.js');

而root配置如下：

  resolve: {
    root: [
      path.resolve('./src/'),
      'node_modules'
    ]
  }

webpack編譯時(shí)將自動(dòng)在項(xiàng)目根目錄下的src目錄內(nèi)的utils目錄下查找utils.js，若存在，則返回，否則進(jìn)入node_modules目錄內(nèi)查找utils.js模塊。

當(dāng)然，若未設(shè)置resolve.root屬性值，則webpack默認(rèn)先從node_modules查找模塊，然后在根目錄下查找。

注意：resolve.root在webpack v1版本中使用，而在webpack v2 中，使用modules代替，建議使用v2版本，后文也將統(tǒng)一使用modules屬性。

resolve.alias

alias，有別名的意思，這里的作用是設(shè)置其他模塊或路徑的別名，webpack在解析模塊時(shí)，將使用配置值替換該別名，如，在未設(shè)置alias屬性內(nèi)容時(shí)，即resolve.alias默認(rèn)是空對(duì)象{}時(shí)，我們?cè)诖a中引用模塊：

var Vue = require('vue/dist/vue.js');
var TopHeader = require('components/header.js');

webpack在編譯代碼時(shí)，按resolve.modules聲明的順序依次查找對(duì)應(yīng)模塊，如按照上一節(jié)定義的resolve.modules：

  resolve: {
    root: [
      path.resolve('./src/'),
      'node_modules'
    ]
  }

查找模塊時(shí)，將首先在src/vue/dist/目錄下尋找vue模塊，在src/components/目錄下查找header.js模塊，查找到后返回，否則進(jìn)入node_modules目錄查找。

現(xiàn)在，我們還可以通過(guò)resolve.alias為模塊或路徑聲明一個(gè)別名，更方便的聲明加載模塊：

  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
      components: path.resolve(__dirname, 'src/components/')
    }
  }

我可以使用如下方式加載模塊：

var Vue = require('vue');
var TopHeader = require('components/header.js');

$符號(hào)

關(guān)于alias的詳細(xì)使用介紹，請(qǐng)參見(jiàn)文檔，本文并不是要介紹webpack文檔，在這里介紹一下聲明的vue$別名中的$符號(hào)：

這里的$符合是正則的文末匹配符，即只有當(dāng)vue是最后一級(jí)路徑時(shí)，webpack才會(huì)將該值解析成別名，進(jìn)行別名與對(duì)應(yīng)值替換，如vue/test.js中的vue是不會(huì)當(dāng)作別名解析的，而components/header.js中的components則會(huì)按照聲明的components別名進(jìn)行解析，其結(jié)果是src/components/header.js。

resolve.extensions

該值定義解析模塊時(shí)的查找文件的后綴順序，如["", ".js", ".json"]，會(huì)優(yōu)先返回js文件，其次json文件，然后是其他文件，注意，這里數(shù)組傳入了一個(gè)空字符串，他的作用是在未找到配置中所有列舉的類型文件時(shí)，支持webpack返回其他類型文件，但是webpack2.x版本修改了，不支持傳入空字符。

webpack插件配置

webpack還支持多種多樣的插件拓展，你可以使用它們對(duì)你的項(xiàng)目webpack模塊構(gòu)建過(guò)程進(jìn)行額外處理，如代碼壓縮，圖片等資源提交壓縮，構(gòu)建異常捕獲和提升，構(gòu)建流程時(shí)間消耗比，等等，而關(guān)于這些插件使用的配置在plugins屬性數(shù)組內(nèi)，將在后續(xù)進(jìn)行介紹。

項(xiàng)目本地調(diào)試與開(kāi)發(fā)

為了方便開(kāi)發(fā)和調(diào)試，通常都需要在本地主機(jī)開(kāi)啟服務(wù)，提供局域網(wǎng)內(nèi)多終端訪問(wèn)，并且在文件變更時(shí)，實(shí)時(shí)刷新頁(yè)面，正如grunt和gulp中Browsersync插件提供的功能一樣，webpack可以使用webpack-dev-server模塊實(shí)現(xiàn)。

webpack-dev-server是一個(gè)Node.js的express服務(wù)器，以webpack開(kāi)發(fā)中間件的形式為webpack包提供服務(wù)，當(dāng)監(jiān)聽(tīng)到源碼文件變更時(shí)，會(huì)自動(dòng)重新打包，并且支持配置自動(dòng)刷新瀏覽器，重新加載資源。

安裝

由于該插件只用于開(kāi)發(fā)模式，所以通過(guò)以下npm指令安裝：

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

配置

啟用webpack-dev-server時(shí)，其默認(rèn)開(kāi)啟8080端口，訪問(wèn)localhost:8080返回當(dāng)前目錄下的index.html，即執(zhí)行指令當(dāng)前目錄下的靜態(tài)資源，當(dāng)然可以通過(guò)指令傳遞參數(shù)或在配置文件進(jìn)行配置指定靜態(tài)資源目錄。

另外需要注意的是，開(kāi)啟webpack-dev-server后，變更文件重新打包后，并不會(huì)實(shí)際輸出到配置的output目錄，而是在publicPath屬性聲明的相對(duì)路徑所在的內(nèi)存中讀取。

靜態(tài)資源目錄配置（CONTENT BASE）

webpack-dev-server --content-base src/

執(zhí)行以上指令開(kāi)啟服務(wù)后，webpack-dev-server將默認(rèn)在src/目錄返回靜態(tài)資源，當(dāng)然也可以在webpack.config.js配置文件中指定：

  devServer: {
    contentBase: './src'
  }

訪問(wèn)http://localhost:8080和http://localhost:8080/index.html效果一樣，均返回src目錄下的index.html文件。

PUBLICPATH與輸出文件訪問(wèn)

在前文webpack配置一節(jié)中提到output.publicPath屬性值表示，在瀏覽器訪問(wèn)webpack output輸出的文件時(shí)的基礎(chǔ)相對(duì)路徑，如設(shè)置：

  output: {
    path: 'dist/scripts',
    filename: 'app.js',
    publicPath: 'assets/'
  }

則在html文件中引用該app.js文件的方式如下：

<script src="assets/app.js"></script>

在瀏覽器中訪問(wèn)app.js的方式為：http://localhost:8080/assets/app.js

自動(dòng)刷新（AUTOMATIC REFRESH）

前面說(shuō)到webpack-dev-server支持文件變更時(shí)，自動(dòng)刷新瀏覽器，這也是開(kāi)發(fā)者急需的功能，webpack-dev-server支持兩種方式實(shí)現(xiàn)：

1. iframe模式（iframe mode）：頁(yè)面通過(guò)iframe窗口插入然后變更時(shí)自動(dòng)重新加載；
2. inline模式（inline mode）：通過(guò)sock.js(比如websocket協(xié)議，輪詢等方式)在頁(yè)面嵌入一個(gè)小型客戶端與webpack-dev-server服務(wù)器建立連接，當(dāng)發(fā)生變更重新打包時(shí)，通過(guò)此連接通知頁(yè)面重新加載；

iframe模式

使用默認(rèn)的iframe模式時(shí)，不需要進(jìn)行任何配置，可以直接訪問(wèn)：http://localhost:8080/webpack-dev-server/index.html即可，如圖，通過(guò)iframe插入我們的頁(yè)面：

注意：

1. 在應(yīng)用頁(yè)面上方會(huì)有狀態(tài)欄顯示當(dāng)前應(yīng)用信息；
2. 應(yīng)用URL的變更發(fā)生在iframe內(nèi)部，不會(huì)反映在瀏覽器地址欄；

inline模式

要開(kāi)啟inline模式，只需要指定--inline命令行參數(shù)或在配置文件中指定inline: true：

  devServer: {
    contentBase: './src',
    inline: true
  }

在此模式下，直接訪問(wèn)http://localhost:8080/index.html或http://localhost:8080即可，此模式與iframe模式的區(qū)別在于:

1. 訪問(wèn)URL不同；
2. 需指定inline配置參數(shù)；
3. 應(yīng)用信息在控制臺(tái)輸出；
4. 應(yīng)用URL的變更直接反映在瀏覽器地址欄；

其實(shí)inline模式還可以配合Node.Js服務(wù)運(yùn)行，之后再介紹，這里只說(shuō)明了其在HTML文檔中的使用。

熱替換（HOT MODULE REPLACEMENT）

除了自動(dòng)刷新，webpack-dev-server的另一大賣點(diǎn)是模塊熱替換，那么熱替換到底是什么？

熱替換，即文件發(fā)生變更時(shí)，webpack包只替換發(fā)生變更的模塊，而不需要全部替換；瀏覽器不需要完全重新加載，而可以直接將變更的模塊注入到運(yùn)行中的應(yīng)用。

開(kāi)啟熱替換功能需要指定--hot指令參數(shù)，或在配置文件中添加：

  devServer: {
    contentBase: './src',
    inline: true,
    hot: true
  }

注意到以上代碼，熱替換需要與inline模式一起使用，另外需要指定output.publicPath值。

HotModuleReplacementPlugin

配置好后還需要使用webpack.HotModuleReplacementPlugin插件，才能真正啟用熱替換功能：

  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]

同樣的，熱替換可以搭配Node.js服務(wù)一起使用，之后介紹。

如圖，為每個(gè)文件(app.js, test.js)都實(shí)現(xiàn)了HMR熱替換，當(dāng)發(fā)生變更時(shí)，只更新變更模塊，而不是重新加載所有文件：

擁抱ES6

ES6推出以來(lái)，廣受Jser們青睞，其確實(shí)有很多新特性和新規(guī)范，值得我們深入學(xué)習(xí)并使用，未來(lái)所有的JavaScript應(yīng)用都應(yīng)該擁抱ES6，不過(guò)，目前各大瀏覽器都在推進(jìn)ES6的實(shí)現(xiàn)，在兼容實(shí)現(xiàn)之前，我們還需要過(guò)渡性的將其轉(zhuǎn)換成ES5語(yǔ)法，最通用的方式就是使用babel轉(zhuǎn)換。

使用BABEL加載器

首先，為了能使用webpack和babel轉(zhuǎn)換js代碼，需要使用babel-loader加載器，另外還需要安裝babel轉(zhuǎn)換js的轉(zhuǎn)換規(guī)則插件，如babel-preset-es2015定義了轉(zhuǎn)換規(guī)則，安裝方式如下：

npm install --save-dev babel-loader babel-preset-es2015

然后在根目錄下創(chuàng)建.babelrc文件，內(nèi)容：

  {
    "presets": ["es2015"]
  }

在webpack.config.js配置文件中，添加相關(guān)loader配置：

  module: {
    loaders: [
      {
        test: /\.(js|vue)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }

其中，test匹配需要轉(zhuǎn)換的文件，exclude匹配不需要轉(zhuǎn)換的文件或目錄。

BABEL-POLYFILL

我們需要明白的一點(diǎn)是babel-preset-es2015能做的，只是轉(zhuǎn)換ES6代碼成ES5，使得瀏覽器可以解析執(zhí)行，但是對(duì)于ES6新提出的API，如Promise，Generator等無(wú)法簡(jiǎn)單的轉(zhuǎn)換成ES5代碼，這時(shí)就需要babel-polyfill了，babel-polyfill是一個(gè)墊片，它可以模擬提供所有的ES6功能和特性，可以看作是提供了一個(gè)模擬的全局ES6環(huán)境。

安裝

安裝依然很簡(jiǎn)單，由于是墊片，是需要在源碼中使用的，所有指定--save參數(shù)：

npm install --save babel-polyfill

使用

不同于babel-preset-es2015，babel-polyfill需要直接打包進(jìn)源碼，而且需要在使用ES6代碼前引入一次：

import 'babel-polyfill'

只需要引入一次，因?yàn)樵搲|片提供的是一個(gè)模擬的全局ES6環(huán)境，而不是模塊內(nèi)部的。

或者直接在webpack.config.js中配置打包入口文件時(shí)加入該墊片：

  entry: {
    app: ['babel-polyfill', './scripts/app.js']
  },

現(xiàn)在你可以在你的代碼中使用任何你想用的ES6 API了。

到此，基本介紹了如何使用webpack搭建開(kāi)發(fā)環(huán)境，下一篇將開(kāi)始介紹如何使用webpack處理CSS及如何使用Vue進(jìn)行組件化開(kāi)發(fā)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。