webpack簡介與使用

来源:http://www.cnblogs.com/pingfan1990/archive/2017/05/21/6886633.html
-Advertisement-
Play Games

歡迎小伙伴們為 前端導航倉庫 點star https://github.com/pfan123/fr...前端導航平臺訪問 CommonJS 和 AMD 是用於 JavaScript 模塊管理的兩大規範，前者定義的是模塊的同步載入，主要用於 NodeJS ；而後者則是非同步載入，通過 RequireJ ...


歡迎小伙伴們為 前端導航倉庫 點star https://github.com/pfan123/fr...
前端導航平臺訪問

CommonJS 和 AMD 是用於 JavaScript 模塊管理的兩大規範，前者定義的是模塊的同步載入，主要用於 NodeJS ；而後者則是非同步載入，通過 RequireJS 等工具適用於前端。隨著 npm 成為主流的 JavaScript 組件發佈平臺，越來越多的前端項目也依賴於 npm 上的項目，或者自身就會發佈到 npm 平臺。因此，讓前端項目更方便的使用 npm 上的資源成為一大需求。

web 開發中常用到的靜態資源主要有 JavaScript、CSS、圖片等文件，webpack 中將靜態資源文件稱之為模塊。 webpack 是一個 module bundler (模塊打包工具)，其可以相容多種 js 書寫規範，且可以處理模塊間的依賴關係，具有更強大的 js 模塊化的功能。Webpack 對它們進行統一的管理以及打包發佈，下麵這張圖來說明 Webpack 的作用：

webpack圖片

Webpack的核心原理

Webpack的兩個最核心的原理分別是：

1.一切皆模塊

正如js文件可以是一個“模塊（module）”一樣，其他的（如css、image或html）文件也可視作模 塊。因此，你可以require('myJSfile.js')亦可以require('myCSSfile.css')。這意味著我們可以將事物（業務）分割成更小的易於管理的片段，從而達到重覆利用等的目的。

2.按需載入

傳統的模塊打包工具（module bundlers）最終將所有的模塊編譯生成一個龐大的bundle.js文件。但是在真實的app裡邊，“bundle.js”文件可能有10M到15M之大可能會導致應用一直處於載入中狀態。因此Webpack使用許多特性來分割代碼然後生成多個“bundle”文件，而且非同步載入部分代碼以實現按需載入。

webpack 官網文檔

官網地址：https://webpack.js.org/

中文官網：https://doc.webpack-china.org/

webpack 的優勢

對 CommonJS 、 AMD 、ES6 的語法做了相容
對 js、css、圖片等資源文件都支持打包
串聯式模塊載入器以及插件機制，讓其具有更好的靈活性和擴展性，例如提供對 CoffeeScript、ES6的支持
有獨立的配置文件 webpack.config.js
可以將代碼切割成不同的 chunk，實現按需載入，降低了初始化時間
支持 SourceUrls 和 SourceMaps，易於調試
具有強大的 Plugin 介面，大多是內部插件，使用起來比較靈活
webpack 使用非同步 IO 並具有多級緩存。這使得 webpack 很快且在增量編譯上更加快

webpack 安裝和配置

安裝
npm install -g webpack  //全局安裝
npm install --save-dev webpack   //局部安裝
執行
webpack —config webpack.config.js
配置

每個項目下都必須配置有一個 webpack.config.js通常放在項目的根目錄中，它本身也是一個標準的Commonjs規範的模塊。在導出的配置對象中有幾個關鍵的參數：

entry

entry 參數定義了打包後的入口文件，可以是個字元串或數組或者是對象；如果是數組，數組中的所有文件會打包生成一個filename文件；如果是對象，可以將不同的文件構建成不同的文件:

  entry: {
      index: "./page1／index.js",  
      //支持數組形式，將載入數組中的所有模塊，但以最後一個模塊作為輸出
      login: ["./entry1/login.js", "./entry2/register.js"]
  }
output

output參數是個對象，定義了輸出文件的位置及名字：

output: {
        path: path.resolve(__dirname, "build"), //打包輸出路徑，建議絕對路徑
        
        // 配置文件在html中引用的根路徑，改變靜態資源引入的相對路徑
        publicPath: "/assets/",
        //publicPath: "http://cdn.com/assets/",//可加上完整的url，效果與上面一致

        filename: "js/bundle.js",  // 單頁應用只有一個入口文件時使用，引用入口模塊
        filename: "js/[name].js",  // 傳統多頁應用有多個入口文件時使用，[name] 代入entry配置中的任意一項模塊的名稱，如：index
        filename: "js/[hash]/[chunkhash].js",  // 為生產環境實現前端靜態資源增量更新時使用，[hash]是根據每次編譯後項目總體文件的hash值, [chunkhash]是根據每個模塊內容計算出的hash值
        
    }
module

在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，圖片等靜態文件都是模塊，不同模塊的載入是通過模塊載入器（webpack-loader）來統一管理的:

module: {
 rules: [
   {
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
     loader: 'file-loader',
     query: {
       limit: 8192,
       name: './images/[name].[ext]?[hash]'
     },

   },     
   // 使用多個插件，使用use，sass文件使用style-loader, css-loader, less-loader來處理
   {
       test: /\.(sass|scss)$/,
       use: [
           'style-loader',
           'css-loader',
           'sass-loader',
           extractTextPlugin.extract(['style','css', 'less'])     
       ],
   }
 ]
}

註意： webpack 2.x 之後 module.loaders改成了module.rules

resolve

webpack在構建包的時候會按目錄的進行文件的查找，resolve屬性中的extensions數組中用於配置程式可以自行補全哪些文件尾碼：

resolve: {
       modules: [path.resolve(__dirname, "node_modules")]
       extensions: ['', '.js', '.json', '.scss'],

       //模塊別名定義，方便後續直接引用別名，無須多寫長長的地址
       alias: {
           AppStore : 'js/stores/AppStores.js',//後續直接 require('AppStore') 即可
           ActionType : 'js/actions/ActionType.js',
           AppAction : 'js/actions/AppAction.js'
       }
   }
plugin

webpack提供了[豐富的組件]用來滿足不同的需求，當然我們也可以自行實現一個組件來滿足自己的需求：

plugins: [
     //your plugins list
 ]

常用插件：

  • HotModuleReplacementPlugin --開啟全局的模塊熱替換(HMR)

  • NamedModulesPlugin --當模塊熱替換(HMR)時在瀏覽器控制台輸出對用戶更友好的模塊名字信息

  • CommonsChunkPlugin --提取chunk公共部分

  • ExtractTextPlugin --獨立生成css文件，以外鏈的形式載入

  • UglifyJsPlugin --壓縮js

  • HtmlWebpackPlugin --使用模版生成html

externals

防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴(external dependencies)。

例如，從 CDN 引入 jQuery，而不是把它打包：

<script src="https://code.jquery.com/jquery-3.1.0.js"
  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
  crossorigin="anonymous"></script>
externals: {
 "jquery": "jQuery"
}

這樣就剝離了那些不需要改動的依賴模塊，換句話，下麵展示的代碼還可以正常運行：

import $ from 'jquery';

$('.my-element').animate(...);

webpack-dev-server

webpack-dev-server是一個小型的node.js Express伺服器,它使用webpack-dev-middleware中間件來為通過webpack打包生成的資源文件提供Web服務。它還有一個通過Socket.IO連接著webpack-dev-server伺服器的小型運行時程式。webpack-dev-server發送關於編譯狀態的消息到客戶端，客戶端根據消息作出響應。

webpack-dev-server有兩種模式支持自動刷新:

  • iframe模式

  • inline模式

iframe模式

頁面是嵌套在一個iframe下的，在代碼發生改動的時候，這個iframe會重新載入。

使用iframe模式無需額外的配置，只需在瀏覽器輸入 http://localhost:8080/webpack-dev-server/index.html ，顯然webpack-dev-server預設的模式就是iframe

inline模式

的webpack-dev-server客戶端會作為入口文件打包，會在後端代碼改變的時候刷新頁面。配置方式有兩種：CLI配置和通過Node.js Api手動配置

CLI 方式

此方式比較簡單，只需在webpack.dev.server啟動的命令中加入--inline即可

  • 修改package.json中scripts配置，添加--inline：

"scripts":{
"start":"webpack-dev-server --inline --config webpack.config.dev.js"
}

  • 重新運行npm start，瀏覽器訪問 http://localhost:8080 即可，修改代碼後保存，瀏覽器自動刷新

Node.js Api方式

  • 第一種方案：將webpack/hot/dev-server配置到所有webpack入口文件中

var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {...});
server.listen(8080);

  • 第二種方案：將webpack-dev-server客戶端腳本插入到html中即可：

<script src="http://localhost:8080/webpack-dev-server.js"></script>

Hot Module Replacement

使用webpack-dev-server的自動刷新功能時，瀏覽器會整頁刷新。而熱替換的區別就在於，前端代碼變動時，無需刷新整個頁面，只把變化的部分替換掉。配置的關鍵在於將 webpack/hot/dev-server` 文件加入到webpack所有入口文件中。

ps: 使用前要註入 HMR插件

// 開啟全局的模塊熱替換(HMR)
new webpack.HotModuleReplacementPlugin(),

// 當模塊熱替換(HMR)時在瀏覽器控制台輸出對用戶更友好的模塊名字信息
new webpack.NamedModulesPlugin()

使用HMR同樣同樣有兩種方式：CLI和Node.js Api

CLI方式

命令行配置比較簡單，只需在自動刷新的基礎上，加上 --hot 配置即可。
此配置會自動將 webpack/hot/dev-server 添加到webpack所有入口點中。

"scripts":{
"start":"webpack-dev-server --inline --hot --config webpack.config.dev.js"
}

Node.js Api方式

var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
  hot: true
  ...
});
server.listen(8080);

ps：要使HMR功能生效，就是要在應用熱替換的模塊或者根模塊裡面加入允許熱替換的代碼。否則，熱替換不會生效，還是會重刷整個頁面。下麵是摘自webpack在github上docs的原話：

ps: 註意 webpack-dev-server 輸出日誌

//webpack-dev-server.js輸出信息，可以發現
//contentBase存在，都會列印日誌 Content not from webpack is served from
//webpack output is served from信息取自 output.publicPath 路徑

function reportReadiness(uri, options) {
  const useColor = argv.color;
  let startSentence = `Project is running at ${colorInfo(useColor, uri)}`
  if(options.socket) {
    startSentence = `Listening to socket at ${colorInfo(useColor, options.socket)}`;
  }
  console.log((argv["progress"] ? "\n" : "") + startSentence);

  console.log(`webpack output is served from ${colorInfo(useColor, options.publicPath)}`);
  const contentBase = Array.isArray(options.contentBase) ? options.contentBase.join(", ") : options.contentBase;
  if(contentBase)
    console.log(`Content not from webpack is served from ${colorInfo(useColor, contentBase)}`);
  if(options.historyApiFallback)
    console.log(`404s will fallback to ${colorInfo(useColor, options.historyApiFallback.index || "/index.html")}`);
  if(options.open) {
    open(uri).catch(function() {
      console.log("Unable to open browser. If you are running in a headless environment, please do not use the open flag.");
    });
  }
}

WEBPACK DEV SERVER

Hot Module Replacement

Hot Module Replacement 介紹

Hot Module Replacement

如何寫好.babelrc？Babel的presets和plugins配置解析

webpack2非同步載入套路

基於webpack搭建前端工程解決方案探索

【翻譯】Webpack——令人困惑的地方


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 設計模式一-單例設計模式
    設計模式一--單例設計模式 版權聲明：本文為博主原創文章，未經博主允許不得轉載。 一、定義 Singleton Pattern： 確保一個類只有一個實例，並且自行實例化並向整個系統提供這個實例。 二、分類 餓漢式單例類：類載入時就進行對象的實例化 懶漢式單例類：第一次引用類時，才進行對象的實例化。 ...
  • ES6新語法之let關鍵字；有別於傳統關鍵字var的使用
    ES6新語法於2015年發佈；而我這個前端小白在17年才接觸到。慚愧慚愧！！不過到目前為止，似乎只有FireFox和Chrome對ES6的支持相對良好。不過既然人家ES6已經出來了，還是要跟上技術的潮流。 ES6給我的感覺就是讓js越來越靠近傳統的編程語言，如java；比如裡面的面向對象的思想和語法 ...
  • 13.4.3 滑鼠與滾輪事件【JavaScript高級程式設計第三版】
    滑鼠事件是Web 開發中最常用的一類事件，畢竟滑鼠還是最主要的定位設備。DOM3 級事件中定義了9 個滑鼠事件，簡介如下。 click：在用戶單擊主滑鼠按鈕（一般是左邊的按鈕）或者按下回車鍵時觸發。這一點對確保易訪問性很重要，意味著onclick 事件處理程式既可以通過鍵盤也可以通過滑鼠執行。 db ...
  • 讀Zepto源碼之集合操作
    接下來幾個篇章，都會解讀 zepto 中的跟 相關的方法，也即源碼 對象中的方法。 讀Zepto源碼系列文章已經放到了github上，歡迎star: "reading zepto" 源碼版本 本文閱讀的源碼為 "zepto1.2.0" .forEach() 因為 zepto 的 集合是類數組，所以這 ...
  • HTM CSS 筆記亂燉
    一、常用實體（字元轉義） '&lt;' == '<' '&copy;' == '©' '&gt;' == '>' '&quot;' == '"' '&nbsp;' == ' ' '&reg;' == '®' '&amp;&' == '&' '&t ...
  • D3.js 入門學習(二) V4的改動
    //d3.scan /* 新的d3.scan方法對數組進行線性掃描，並根據指定的比較函數返回至少一個元素的索引。 這個方法有點類似於d3.min和d3.max。 而d3.scan可以得到極值的索引而不僅僅是計算極值。 */ var a1 = [1,3,5,2,9]; var i = d3.scan(... ...
  • 一個前端程式員的費曼技巧練習
    費曼是美國著名物理學家，諾貝爾獎得主，是個非常聰明、正直而且好玩的家伙，他的自傳《別鬧了，費曼先生》我一口氣看完了，精彩程度不遜於一部小說。費曼提出了一種高效學習的方法，即“費曼技巧”，其核心思想是：每當學習一個新東西的時候，想象自己正試著把它介紹給一個對此一無所知的外行人，不使用任何專業術語；如果 ...
  • Vue-cli開發SPA應用(試用初學者)
    使用Vue開發SPA（單頁面應用）估計各位博友都耳熟能詳了，這裡簡單概要一下使用vue-cli快速開發單頁面應用。本博文以window系統為例（雖然用的是Mac操作的，考慮到大多數博友是用window開發），Mac系統類似，不多贅述。 環境要求node 6.0以上(不要安裝7.0，這是beta版) ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類