webpack打包原理

標籤：desc   asc   temporary   pre   不同的   刪除   tps   pac   設定   

Webpack

一個模組打包器，將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則產生對應的靜態資源。

本身只能打包js模組，內建BGM如虎添翼（Loader轉換器）【將各種類型的資源轉換成js模組】

安裝

$ npm intsall webpack -g

　　

在專案檔中安裝webpack依賴

#進入安裝目錄#確定已經有package.json,沒有的話就通過npm init 建立#安裝webpack依賴$npm install webpack --save-dev

　　

查看版本資訊

#查看安裝的版本資訊$npm info webpack#安裝穩定版本$npm install [email protected] --save-dev

　　

建立檔案並使用

打包

$ webpack entry.js bundle.js

　　

原理

webpack會分析每個入口檔案，解析包依賴關係的各個檔案，每個模組都打包到bundle.js。webpack給每個模組分配一個唯一的ID並通過這個ID索引和訪問模組。頁面運行時，先啟動entry.js，其他模組會在運行require時候執行。

不同的模組管理工具

Bowser:給模組的安裝、升級、刪除提供一個統一的、可維護的管理員模式

Browserify:讓伺服器端CommonJS 運行在瀏覽器端

Component:將網頁所需要的所有資源（指令碼、圖片、樣式表）編譯後放在同一個目錄下

Duo:站在巨人的肩膀上（拜師於Component，集Bowser和Browserify大成者），傲視群雄

Grunt

一種工作管理員（自動化任務處理工具），基於nodejs,可實現跨系統跨平台的案頭端操作。

原理：用js指令碼設定任務，讓工具讀取這個js,解析到所要執行的任務，並調用外掛程式完成任務。

安裝：

npm install -g grunt-cli

　　

package.json-----定義了項目中的資料，比如項目名，項目的依賴關係。

{  "name": "project-nam",  "version": "0.4.5",  "description": "學習 grunt",  "author": "Xingwucheng",  "devDependencies": {    "temporary": "~0.0.4",    "grunt-contrib-jshint": "~0.6.4",    "grunt-contrib-nodeunit": "~0.2.0",    "grunt-contrib-watch": "~0.5.3",    "difflet": "~0.2.3",    "senver": "~2.1.0",  }}

Gruntfile.js -------定義和配置在Grunt中啟動並執行任務

 

module.exports = function(grunt) {  //項目配置  grunt.initConfig({    pkg: grunt.file.readJSON(‘package.json‘),    uglify: {      options: {        banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘      },      build: {        src: ‘src/<%= pkg.name %>.js‘,        dest: ‘build/<%= pkg.name %>.min.js‘      }    }  });  //載入grunt外掛程式  grunt.loadNpmTasks(‘grunt-contrib-uglify‘);  // 註冊grunt預設任務.  grunt.registerTask(‘default‘, [‘uglify‘]);};

　　

webpack打包原理