Webpack快速入門

1、概述

webpack is a tool to build JavaScript modules in your application. webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.

webpack是一款前端資源模塊化管理和打包的工具。它能夠將模塊按照依賴和規則進行打包，還能夠將按需加載的模塊進行代碼分離，實現異步加載。經過加載器，任何形式的資源均可以被看做成模塊。

Github地址

從一個主文件開始，依次尋找項目的全部依賴文件，經過加載器進行處理，最後打包成瀏覽器可以識別的JavaScript文件。

2、特色

webpack和其餘模塊化工具相比，具備以下特色：

• 代碼分離

  webpack有兩種組織模塊依賴的方式：同步和異步。異步依賴會將代碼分離成不一樣的區塊，每個區塊都做爲一個文件被打包。

• 加載器

  webpack自身只能處理原生的JavaScript模塊，經過加載器，能夠將不一樣類型的資源轉換成JavaScript模塊。換句話說，任何資源均可以被webpack當成模塊來處理。

• 智能解析

  webpack經過智能解析器，幾乎能夠處理任何的第三方庫。而且在加載依賴的時候，容許使用動態表達式進行加載。

• 插件

  webpack還提供了插件系統，大多數功能都是基於這個插件系統運行的。能夠經過開發和使用webpack插件，知足不一樣的需求。

• 運行效率

  webpack經過異步I/O和多級緩存，大大提升了運行效率，可以快速地實現增量編譯。

3、概念

爲了可以更好地理解和使用webpack，首先須要瞭解webpack的四大核心概念：

• 入口entry

  webpack爲應用程序的全部依賴建立了一個圖表，這個圖表的起始點被稱爲入口點。入口點會告訴webpack從哪裏開始，而且根據依賴圖表，清楚哪些資源會被打包。entry屬性用來定義入口點。

• 輸出output

  一旦將資源打包在一塊兒以後，須要告訴webpack將要把應用程序打包到何處。output屬性用來描述打包文件的位置。

• 加載器loaders

  當非JavaScript資源被添加到依賴圖表時，經過加載器將這些文件轉換成模塊。test屬性用來定義要轉換的文件類型。use屬性指定加載器的類型。

• 插件plugins

  相對於加載器只能基於每一個文件進行轉換，插件一般用來針對複雜應用執行操做和自定義功能。要想使用插件，首先須要使用require()方法引入插件模塊，而後在plugins數組中，建立一個該插件的實例。

4、安裝和配置

一、安裝Node.js

因爲webpack須要使用npm進行安裝，因此應該首先安裝Node.js。

二、安裝webpack

一般不建議使用$ npm install webpack -g命令進行全局安裝。而是將webpack安裝到項目的依賴中，這樣，就可使用項目本地版本的webpack。

進入到項目目錄，建立一個package.json文件：

npm init

安裝webpack依賴：

npm install webpack --save-dev

也能夠指定版本進行安裝：

npm install webpack@<version> --save-dev

若是須要使用webpack開發工具，須要單獨安裝：

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

三、運行

若是採用非全局安裝，執行以下命令進行打包：

node_modules/.bin/webpack app/index.js public/bundle.js

其中，index.js是入口文件，bundle.js是目標文件。

四、配置

除了使用命令行運行webpack的方式，更好的方法是使用配置文件webpack.config.js。它是一個node.js模塊，返回一個json格式的配置信息對象。也能夠經過--config選項指定配置文件。

module.exports = {
  entry: __dirname + "/app/index.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

其中，entry屬性指向入口文件，output屬性指定打包後文件存放的位置，__dirname指向當前執行腳本所在的目錄。

此時，執行node_modules/.bin/webpack命令，會自動參考配置文件中的配置選項打包項目。

還有一種更快捷的運行方式。在package.json中設置npm的腳本：

"scripts": {
    "start": "webpack" // 將npm的start命令指向webpack命令
},

這樣，直接執行npm start命令，就會自動運行webpack進行打包。

5、用法

webpack不少強大的功能，都是經過一系列可供配置選項完成的。這裏主要介紹一些經常使用的選項。

一、開發工具devtool

開發工具主要用來方便調試，提升開發效率。經過打包以後的文件，不太容易找到出現錯誤的地方對應的源碼位置。這時，可使用Source Map來解決這個問題。

devtool: "source-map"

devtool屬性有四種不一樣的選項值：

• source-map，在一個單獨的文件中產生一個完整且功能徹底的文件。這個文件具備良好的source map，但會下降打包文件的構建速度。
• cheap-module-source-map，在一個單獨的文件中生成一個不帶列映射的map，可以相應地提升構建速度，但不能對應到具體的列，會對調試形成不便。
• eval-source-map，使用eval打包源文件模塊，在同一個文件中生成乾淨且完整的source map，不會影響構建速度，但輸出的js文件存在性能和安全隱患。建議在開發階段使用，必定不要在生產階段使用此選項。
• cheap-module-eval-source-map，可以以最快的速度生成source map，生成的source map和打包後的js文件同行顯示，沒有列映射。一樣建議只在開發階段使用。

Tips：在開發階段使用eval-source-map選項。

二、本地服務器devserver

開發過程當中，但願瀏覽器可以監測到代碼的修改，並自動刷新，顯示修改以後的結果。這時，能夠配置devserver構建本地服務器來完成這些功能。

devServer: {
    contentBase: "./public",
    inline: true,
    colors: true,
    historyApiFallback: true
}

由於本地服務器是一個單獨組件，因此在配置以前須要單獨安裝：

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

devserver屬性有以下配置選項：

• contentBase，默認狀況下，爲根文件夾提供本地服務器。若是想爲其餘目錄提供本地服務器，能夠在此選項設置目錄。
• port，設置監聽端口，默認爲8080。
• inline，設置爲true時，當源文件發生改變會自動刷新頁面。
• colors，設置爲true時，終端輸出的結果爲彩色的。
• historyApiFallback，設置爲true時，全部的跳轉都指向index.html，主要用於單頁面應用。

三、加載器loaders

Loaders是webpack最強大的功能之一。經過使用不一樣的loader，webpack調用外部的腳本或工具，能夠對各類格式的文件進行處理。

Loaders須要單獨安裝：

npm install json-loader --save-dev

而且須要在modules屬性下進行配置：

module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json"
      }
    ]
}

loaders屬性有以下配置選項：

• test，匹配loaders所處理文件的擴展名的正則表達式（必須）。
• loader，loader的名稱（必須）。
• include，添加必須處理的文件夾或文件（可選）。
• exclude，屏蔽不須要處理的文件夾或文件（可選）。
• query，爲loaders提供額外的設置選項（可選）。

webpack提供了不少有用的loader，如css-loader和style-loader，用來處理樣式表。css-loader可以使用相似@import和url()的方法實現require()的功能，而style-loader則將全部計算後的樣式加到頁面中。

安裝：

npm install style-loader css-loader --save-dev

配置：

module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style!css"
      }
    ]
}

其中，「!"表示同一文件可以使用不一樣類型的loader。

Sass或Less之類的預處理器是對原生CSS的拓展，不一樣類型的預處理器也對應不一樣的loader。webpack還提供一個CSS處理平臺PostCSS，可使CSS可以實現更多功能。使用PostCSS能夠爲CSS代碼自動添加適應不一樣瀏覽器的CSS前綴。

安裝：

npm install postcss-loader autoprefixer --save-dev

配置：

postcss: [
    require('autoprefixer')
]

Babel是一個編譯JavaScript的平臺，它支持下一代的JavaScript標準（如：ES6），以及基於JavaScript進行拓展的語言（如：JSX）。

安裝：

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

配置：

module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel"，
        query: {
          presets: ['es2015']
        }
      }
    ]
}

四、插件plugins

webpack的另外一個強大功能。在整個構建過程當中，執行相關任務，拓展webpack功能。webpack有不少內置插件，同時也有不少第三方插件。

要想使用插件，首先須要安裝：

npm install html-webpack-plugin --save-dev

而後在plugins屬性中添加該插件的一個實例：

plugins: [
    new HtmlWebpackPlugin({
        template: __dirname + "/app/index.tmpl.html"
    })
]

Hot Module Replacement（HMR）也是webpack中很實用的插件，容許在修改組件代碼後，自動刷新實時預覽修改後的效果。

實現HMR只須要進行以下幾項配置。

在plugins中添加HMR插件：

new webpack.HotModuleReplacementPlugin()

在devserver中添加hot屬性：

hot: true

在js模塊中執行webpack提供的API。

五、產品構建

雖然以上內容能夠構建一個完整的開發環境，但在產品階段，可能還須要對打包的文件進行額外的處理，如：優化、壓縮、緩存、代碼分離等。

• OccurenceOrderPlugin，爲組件分配ID，webpack能夠分析和優先考慮使用最多的模塊，併爲其分配最小的ID。
• UglifyJsPlugin，壓縮js代碼
• ExtractTextPlugin，分離css和js文件

使用緩存最好的方法是保證文件名和文件內容相匹配。webpack能夠把一個哈希值添加到打包的文件名中。

output: {
    path: __dirname + "/build",
    filename: "[name]-[hash].js"
}

---

參考文章：

入門Webpack