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
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類