WebPack工具執行原理及入門教學

2020-12-02 18:07:29

WebPack是什麼

一個打包工具
一個模組載入工具
各種資源都可以當成模組來處理
網站 http://webpack.github.io/

如今，越來越多的JavaScript程式碼被使用在頁面上，我們新增很多的內容在瀏覽器裡。如何去很好的組織這些程式碼，成為了一個必須要解決的難題。

對於模組的組織，通常有如下幾種方法：

通過書寫在不同檔案中，使用script標籤進行載入
CommonJS進行載入（NodeJS就使用這種方式）
AMD進行載入（require.js使用這種方式）
ES6模組

思考：為什麼只有JS需要被模組化管理，前臺的很多預編譯內容，不需要管理嗎？

基於以上的思考，WebPack專案有如下幾個目標：

將依賴樹拆分，保證按需載入
保證初始載入的速度
所有靜態資源可以被模組化
可以整合第三方的庫和模組
可以構造大系統

從下圖可以比較清晰的看出WebPack的功能

這是一個示意圖

WebPack的特點

豐富的外掛，方便進行開發工作
大量的載入器，包括載入各種靜態資源
程式碼分割，提供按需載入的能力
釋出工具

WebPack的優勢

webpack 是以 commonJS 的形式來書寫指令碼滴，但對 AMD/CMD 的支援也很全面，方便舊專案進行程式碼遷移。
能被模組化的不僅僅是 JS 了。
開發便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉base64等。
擴充套件性強，外掛機制完善，特別是支援 React 熱插拔（見 react-hot-loader ）的功能讓人眼前一亮。

WebPack的安裝

安裝命令

$ npm install webpack -g

使用webpack

$ npm init # 會自動生成一個package.json檔案
$ npm install webpack --save-dev #將webpack增加到package.json檔案中

可以使用不同的版本

$ npm install webpack@1.2.x --save-dev

如果想要安裝開發工具

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

WebPack的設定

每個專案下都必須設定有一個 webpack.config.js ，它的作用如同常規的 gulpfile.js/Gruntfile.js ，就是一個設定項，告訴 webpack 它需要做什麼。

下面是一個例子

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
  //外掛項
  plugins: [commonsPlugin],
  //頁面入口檔案設定
  entry: {
    index : './src/js/page/index.js'
  },
  //入口檔案輸出設定
  output: {
    path: 'dist/js/page',
    filename: '[name].js'
  },
  module: {
    //載入器設定
    loaders: [
      { test: /.css$/, loader: 'style-loader!css-loader' },
      { test: /.js$/, loader: 'jsx-loader?harmony' },
      { test: /.scss$/, loader: 'style!css!sass?sourceMap'},
      { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
  },
  //其它解決方案設定
  resolve: {
    root: 'E:/github/flux-example/src', //絕對路徑
    extensions: ['', '.js', '.json', '.scss'],
    alias: {
      AppStore : 'js/stores/AppStores.js',
      ActionType : 'js/actions/ActionType.js',
      AppAction : 'js/actions/AppAction.js'
    }
  }
};

plugins 是外掛項，這裡我們使用了一個 CommonsChunkPlugin的外掛，它用於提取多個入口檔案的公共指令碼部分，然後生成一個 common.js 來方便多頁面之間進行復用。

entry 是頁面入口檔案設定，output 是對應輸出項設定（即入口檔案最終要生成什麼名字的檔案、存放到哪裡）

module.loaders 是最關鍵的一塊設定。它告知 webpack 每一種檔案都需要使用什麼載入器來處理。所有載入器需要使用npm來載入

最後是 resolve 設定，設定查詢模組的路徑和擴充套件名和別名（方便書寫）

WebPack開始使用

這裡有最基本的使用方法，給大家一個感性的認識

正確安裝了WebPack，方法可以參考上面

書寫entry.js檔案

document.write("看看如何讓它工作！");

書寫index.html檔案

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

執行命令，生成bundle.js檔案

$ webpack ./entry.js bundle.js

在瀏覽器中開啟index.html檔案，可以正常顯示出預期

增加一個content.js檔案

module.exports = "現在的內容是來自於content.js檔案！";

修改entry.js檔案

document.write(require("./content.js"));

執行第四步的命令

進行載入器試驗

增加style.css檔案

body {
background: yellow;
}

修改entry.js檔案

require("!style!css!./style.css");
document.write(require("./content.js"));

執行命令，安裝載入器
$ npm install css-loader style-loader # 安裝的時候不使用 -g

執行webpack命令，執行看效果

可以在命令列中使用loader

$ webpack ./entry.js bundle.js --module-bind "css=style!css"

使用組態檔

預設的組態檔為webpack.config.js

增加webpack.config.js檔案

module.exports = {
 entry: "./entry.js",
 output: {
   path: __dirname,
   filename: "bundle.js"
 },
 module: {
   loaders: [
     { test: /.css$/, loader: "style!css" }
   ]
 }
};

執行程式

$ webpack

釋出伺服器

安裝伺服器

$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors

伺服器可以自動生成和重新整理，修改程式碼儲存後自動更新畫面

http://localhost:8080/webpack-dev-server/bundle

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

WebPack工具執行原理及入門教學

熱門文章