vue----webpack

Webpack 簡介

概述

　　本質上，webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將全部這些模塊打包成一個或多個 bundle。

　　Webpack 是當下最熱門的前端資源模塊化管理和打包工具，它能夠將許多鬆散耦合的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分離，等到實際須要時再異步加載。經過 loader 轉換，任何形式的資源均可以當作模塊，好比 CommonsJS、AMD、ES六、CSS、JSON、CoffeeScript、LESS 等；

　　WebPack 是一款模塊加載器兼打包工具，它能把各類資源，如 JS、JSX、ES六、SASS、LESS、圖片等都做爲模塊來處理和使用。

　　Webpack是一個前端資源的打包工具，它能夠將is、image、sss等資源當成一個模塊進行打包（下圖展現了全部的js打包成一個js，css打包成一個css等）

 

 

　　好處：

• 一、模塊化開發

程序員在開發時能夠分模塊建立不一樣的js、 css等小文件方便開發，最後使用webpack將這些小文件打包成一個文件，減小了http的請求次數。webpack能夠實現按需打包，爲了不出現打包文件過大能夠打包成多個文件。

• 二、 編譯typescript、ES6等高級js語法

隨着前端技術的強大，開發中可使用javascript的不少高級版本，好比：typescript、ES6等，方便開發，webpack能夠將打包文件轉換成瀏覽器可識別的js語法。

• 三、CSS預編譯

webpack容許在開發中使用Sass 和 Less等原生CSS的擴展技術，經過sass-loader、less-loader將Sass 和 Less的語法編譯成瀏覽器可識別的css語法。 

　　

模塊化的演進

Script 標籤

<script src="module1.js"></scirpt>
<script src="module2.js"></scirpt>
<script src="module3.js"></scirpt>
<script src="module4.js"></scirpt>

　　

這是最原始的 JavaScript 文件加載方式，若是把每個文件看作是一個模塊，那麼他們的接口一般是暴露在全局做用域下，也就是定義在 window 對象中，不一樣模塊的調用都是一個做用域。

這種原始的加載方式暴露了一些顯而易見的弊端：

• 全局做用域下容易形成變量衝突
• 文件只能按照 <script> 的書寫順序進行加載
• 開發人員必須主觀解決模塊和代碼庫的依賴關係
• 在大型項目中各類資源難以管理，長期積累的問題致使代碼庫混亂不堪

CommonsJS

　　服務器端的 NodeJS 遵循 CommonsJS 規範，該規範核心思想是容許模塊經過 require 方法來同步加載所需依賴的其它模塊，而後經過 exports 或 module.exports 來導出須要暴露的接口。

require("module");
var test = require("../module.js");
test.test();


export.doStuff = function() {};
module.exports = someValue;

優勢

• 服務器端模塊便於重用
• NPM 中已經有超過 45 萬個可使用的模塊包
• 簡單易用

缺點

• 同步的模塊加載方式不適合在瀏覽器環境中，同步意味着阻塞加載，瀏覽器資源是異步加載的
• 不能非阻塞的並行加載多個模塊

實現

• 服務端的 NodeJS
• Browserify，瀏覽器端的 CommonsJS 實現，可使用 NPM 的模塊，可是編譯打包後的文件體積較大
• modules-webmake，相似 Browserify，但不如 Browserify 靈活
• wreq，Browserify 的前身

AMD

　　Asynchronous Module Definition 規範其實主要一個主要接口 define(id?, dependencies?, factory); 它要在聲明模塊的時候指定全部的依賴 dependencies，而且還要當作形參傳到 factory 中，對於依賴的模塊提早執行。

　　Asynchronous Module Definition 規範其實主要一個主要接口 define(id?, dependencies?, factory); 它要在聲明模塊的時候指定全部的依賴 dependencies，而且還要當作形參傳到 factory 中，對於依賴的模塊提早執行。

define("module", ["dep1", "dep2"], function(d1, d2) {
  return someExportedValue;
});
require(["module", "../file.js"], function(module, file) {});

優勢

• 適合在瀏覽器環境中異步加載模塊
• 能夠並行加載多個模塊

缺點

• 提升了開發成本，代碼的閱讀和書寫比較困難，模塊定義方式的語義不順暢
• 不符合通用的模塊化思惟方式，是一種妥協的實現

實現

• RequireJS
• curl

CMD

　　Commons Module Definition 規範和 AMD 很類似，儘可能保持簡單，並與 CommonsJS 和 NodeJS 的 Modules 規範保持了很大的兼容性。

define(function(require, exports, module) {
  var $ = require("jquery");
  var Spinning = require("./spinning");
  exports.doSomething = ...;
  module.exports = ...;
});　

優勢

• 依賴就近，延遲執行
• 能夠很容易在 NodeJS 中運行

缺點

• 依賴 SPM 打包，模塊的加載邏輯偏重

實現

• Sea.js
• coolie

ES6 模塊

　　EcmaScript6 標準增長了 JavaScript 語言層面的模塊體系定義。 ES6 模塊的設計思想，是儘可能靜態化，使編譯時就能肯定模塊的依賴關係，以及輸入和輸出的變量。CommonsJS 和 AMD 模塊，都只能在運行時肯定這些東西。

import "jquery";
export function doStuff() {}
module "localModule" {}　

優勢

• 容易進行靜態分析
• 面向將來的 EcmaScript 標準

缺點

• 原生瀏覽器端尚未實現該標準
• 全新的命令，新版的 NodeJS 才支持

實現

• Babel

指望的模塊系統

　　能夠兼容多種模塊風格，儘可能能夠利用已有的代碼，不只僅只是 JavaScript 模塊化，還有 CSS、圖片、字體等資源也須要模塊化。\

　　用webpack實現

 

安裝webpack

安裝Node.js

　　webpack基於node.js運行，首先須要安裝node.js。

node.js概述

　　Node.js是一個Javascript運行環境（runtime environment），發佈於2009年5月，由Ryan Dah開發，實質是對Chrome V8引擎進行了封裝。Node js對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下運行得更好。
　　V8引擎執行Javascript的速度很是快，性能很是好。Nodejs是一個基於Chrome JavaScript運行時創建的平臺，用於方便地搭建響應速度快、易於擴展的網絡應用。Nodejs使用事件驅動，非阻塞/O模型而得以輕量和高效，很是適合在分佈式設備上運行數據密集型的實時應用。

　　傳統意義上的JavaScript運行在瀏覽器上，Chrome使用的JavaScript引擎是V8，Node.js是一個運行在服務端的框架，它的底層就使用了V8引擎，這樣就可使用javascript去編寫一些服務端的程序，這樣也就實現了用javaScript去開發Apache+PHP以及Java Servlet所開發的服務端功能，這樣作的好處就是前端和後端都採用javascript，即開發一份js程序便可以運行在前端也能夠運行的服務端，這樣比一個應用使用多種語言在開發效率上要高，不過node.js屬於新興產品，一些公司也在嘗試使用node.js完成一些業務領域，node.js基於V8引擎，基於事件驅動機制，在特定領域性能出色，好比用node.js實現消息推送、狀態監控等的業務功能很是合適。

　　對於咱們日常開發，前端使用的是js，後端使用的是java，python開發的服務器;

　　對於node.js，前端使用js，後端使用node.js做爲服務器

安裝node.js

　　下載地址： https://nodejs.org/en/download/，推薦下載LTS版本

　　添加環境變量，測試 node -v

安裝NPM

　　node.js須要使用npm來安裝node.js須要的依賴包，就像python中的pip同樣

　　npm全稱Node Package Manager，他是node包管理和分發的工具，使用NPM能夠對應用的依賴進行管理，NPM的功能和服務端項目構建工具maven差很少，npm的工做原理：去遠程下載所依賴的js包。

　　node.js已經集成了npm工具，在命令提示符輸入 npm -v 可查看當前npm版本。

 

　　使用 npm config ls 查詢NPM管理包路徑（NPM下載的依賴包所存放的路徑，默認路徑C:/用戶/[用戶名]/AppData/Roming/npm/node_meodules）

　　修改路徑(首先建立目錄)：修改完了查看配置是否生效 npm config ls

npm config set prefix "D:\nodejs\npm_modules"
npm config set cache "D:\nodejs\npm_cache"

　　將D:\nodejs\npm_modules添加到環境變量中

安裝cnpm

　　npm默認會去國外的鏡像去下載js包，在開發中一般咱們使用國內鏡像，這裏咱們使用淘寶鏡像

　　下邊咱們來安裝cnpm：有時咱們使用npm下載資源會很慢，因此咱們能夠安裝一個cnmp(淘寶鏡像)來加快下載速度。

　　輸入命令，進行全局安裝淘寶鏡像。（--registry：註冊淘寶鏡像）

npm install -g  cnpm --registry=https://registry.npm.taobao.org

　　查看cnpm版本

cnpm -v

安裝nrm

　　切換cnpm鏡像地址（執行下面命令須要去下載好的nrm目錄，若是沒有添加環境變量）

cnpm install -g nrm  //安裝
nrm ls               //查詢當前指向的鏡像地址
nrm use taobao       //切換到淘寶鏡像

安裝webpack

• 本地安裝

　　僅將webpack安裝在當前項目的node_modules目錄中，僅對當前項目有效。（不僅僅是webpack能夠在本地安裝）

　　在門戶目錄下建立webpack測試目錄webpacktest01

　　npm install --save-dev webpack 或 cnpm install --save-dev webpack

　　npm install --save-dev webpack-cli (4.0之後的版本須要安裝webpack-cli)

• 全局安裝加-g，以下：

　　全局安裝就將webpack的js包下載到npm的包路徑下。

　　npm install webpack -g 或 cnpm install webpack -g

npm install webpack -g
npm install webpack-cli -g

 

webpack入門程序

配置

建立 webpack.config.js 配置文件

• entry：入口文件，指定 WebPack 用哪一個文件做爲項目的入口
• output：輸出，指定 WebPack 把處理完成的文件放置到指定路徑
• module：模塊，用於處理各類類型的文件
• plugins：插件，如：熱更新、代碼重用等
• resolve：設置路徑指向
• watch：監聽，用於設置文件改動後直接打包

module.exports = {
    entry: "", //指定入口文件(main.js)
    output: {
        path: "", //須要是絕對路徑，默認是./dist/filename.js
        filename: ""
    },
    module: {
        loaders: [
            {test: /\.js$/, loader: ""}
        ]
    },
    plugins: {},
    resolve: {},
    watch: true
}　　

執行

　　直接運行 webpack 命令打包

使用 WebPack

示例

• 建立項目
• 建立一個名爲 modules 的目錄，用於放置 JS 模塊等資源文件
• 建立模塊文件，如 hello.js，用於編寫 JS 模塊相關代碼
• 建立一個名爲 main.js 的入口文件，用於打包時設置 entry 屬性
• 建立 webpack.config.js 配置文件，使用 webpack 命令打包
• 建立 HTML 頁面，如 index.html，導入 WebPack 打包後的 JS 文件
• 運行 HTML 看效果

hello.js

　　須要將某些被其餘js須要的方法導出(exports是ES5語法)

exports.sayHi = function () {
  document.write("<div>Hello WebPack</div>");
};

　　若是須要將多個方法導出

var function01 = funciotn(){};
var function02 = function(){};
exports.function01 = function01;
方式1：直接一個一個的導出
exports.function02 = function02;
方式2：
exports = {function01,function02}    

main.js內容

　　設置它爲入口

　　導入須要的js

var hello = require("./hello"); //導入hellow.js(能夠不加後綴)
hello.sayHi();

webpack.config.js 的配置文件

　　主要目的：將上面的兩個js打包成一個js，因爲main.js依賴了hellow.js，因此他們會打包在一塊

module.exports = {
    entry: "./modules/main.js",
    output: {
        filename: "./js/bundle.js"
    }
};

HTML

　　index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>

打包

# 用於監聽變化
webpack --watch  //在webpack.config.js 中的配置能夠省略watch=true配置

運行

運行 HTML 文件，你會在瀏覽器看到：

Hello WebPack

 

webpack實戰（手動打包）

model01.js

var add = function (x, y) {
    return x+y;
}
var add2 = function (x, y) {
    return x+y+2;
}
module.exports.add = add;
// module.exports ={add,add2};//若是有多個方法這樣導出
// module.exports.add2 = add2//若是有多個方法也能夠這樣導出

main.js（主文件）

//導入model01.js
var {add} = require("./model01.js")
var Vue = require("./vue.min.js")
var VM = new Vue({
    el:'#app',//vm接管了app區域的管理
    //model數據
    data:{
        num1:0,
        num2:0
    }
});

webpack.config.js(必定須要添加否則報錯)

module.exports = {
    entry: "./main.js",
    output: {
        filename: "build.js"
    }
};

打包命令

webpack

效果　　

 

 

 

webpack（自動打包）

　　build.js並無真正生成；

　　推薦使用webpack-dev-server開發服務器，它的功能能夠實現熱加載而且，自動刷新瀏覽器。

　　此時咱們在開發中就能夠再也不使用nginx作服務器了

安裝webpack-dev-server　

　　使用 webpack-dev-server須要安裝webpack、 webpack-dev-server和 html-webpack-plugin三個包。

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

配置webpack-dev-server

　　安裝完成，會發現程序目錄出現一個package.json文件：此文件中記錄了程序的依賴，node_modules：此文件存放了此項目的依賴包

　　若是目錄中沒有package.json文件

npm init

　　咱們在package.json中添加（scripts是一個命令指令）

  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },

• --inline：自動刷新
• --hot：熱加載
• --port：指定端口
• --open：自動在默認瀏覽器打開
• --host：能夠指定服務器的 ip，不指定則爲127.0.0.1，若是對外發布則填寫公網ip地址 

·　　

配置webpack.config.js 

//引用html-webpack-plugin插件，做用是根據html模板(vue_02.html)在內存生成html文件，它的工做原理是根據模板文件在內存中生成一個index.html文件。
var htmlwp = require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js',  //指定打包的入口文件
    output:{
        path: __dirname+'/dist',  // 注意：__dirname表示webpack.config.js(當前文件)所在目錄的絕對路徑(默認也是這個路徑)
        filename:'build.js'		   //輸出文件（沒有真正的生成）
    },
    //devtool: 'eval-source-map',
    plugins:[
        new htmlwp({
            title: '首頁',  //生成的頁面標題<head><title>首頁</title></head>
            filename: 'index.html', //webpack-dev-server在內存中生成的文件名稱，自動將build注入到這個頁面底部，才能實現自動刷新功能
            template: 'vue_02.html' //根據vue_02.html這個模板來生成(這個文件請程序員本身生成)
        })
    ]
}

啓動webpack-dev-server

 

補充文件

vue_02.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js經常使用指令的測試</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="num1"/> +
    <input type="text" v-model="num2"/>=
    <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>
    <span v-text="result"></span>
    <button v-on:click="change">計算</button>
</div>
</body>
<!--<script src="vue.min.js"></script>-->
<!--<script src="dist/build.js"></script>-->
</html>

main.js

var {add} = require("./model01")
var Vue = require("./vue.min")
var VM = new Vue({
    el:'#app',//vm接管了app區域的管理
    data:{//model數據
        num1:0,
        num2:0,
        result:0
    },
    methods:{
        change:function () {
            //必需要有this（會修改data中的result數據）
            this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2))
        }
    }
});

model01.js

var add = function (x, y) {
    return x+y;
}
var add2 = function (x, y) {
    return x+y+2;
}
module.exports.add = add;
// module.exports ={add,add2};//若是有多個方法這樣導出
// module.exports.add2 = add2//若是有多個方法也能夠這樣導出

　　

webpack debug(調試)

一、在webpack.config.js中添加 devtool: 'eval-source-map',

二、在須要打上斷點的js中添加debugger

    methods:{
        change:function () {
            debugger //調試
            this.result = add(Number.parseInt(this.num1),Number.parseInt(this.num2))
        }
    }

效果