webpack打包原理

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 webpack@1.12.0 --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']);

};