1. Webpack的使用

1.1 認識webpack

• 什么是webpack?
  • 從本質上來講, webpack是一個現代的 JavaScript 應用的靜態模塊打包工具
  • 模塊 和 打包

1.1.1 前端模塊化

• 在ES6之前, 我們想要進行模塊化開發, 就必須借助于其他的工具, 讓我們可以進行模塊化開發

• 并且再通過模塊化開發完成了專案后, 還需要處理模塊間的各種依賴, 并且將其進行整合打包

• 而 webpack 其中一個核心就是讓我們可能進行模塊化開發, 并且會幫助我們處理模塊間的依賴關系

• 而且不僅僅是 JavaScript 檔案, 我們的 CSS、圖片、json檔案等等在webpack中都可以被當作模塊來舒勇

• 這就是 webpack 中模塊化的概念

• 打包如何理解呢？

  • 理解了webpack 可以幫助我們進行模塊化， 并且處理模塊間的各種復雜關系后，打包的概念就非常好理解了

  • 就是講 webpack中的各種資源塊進行打包合并成一個或多個包 （bundle）

  • 并且在打包的程序中, 還可以對資源進行處理,

    比如壓縮圖片, 將scss 轉成 css , 將ES6 語法轉成 ES5 語法, 將 TypeScript 轉成 JavaScript 等等操作

1.2 webpack的起步

1.2.1 webpack安裝

• 安裝webpack 首先需要安裝 Node.js , Node.js 自帶了軟體包管理工具 npm

• 查看自己的node版本:

  npm -v
  

• 全域安裝 webpack (3.6.0版本)

  npm i [email protected] -g
  

• 區域安裝 webpack

  • --save-dev 是開發時依賴, 專案打包后不需要繼續使用

  cd 對應目錄
  npm install [email protected] --save-dev
  

  為什么全域安裝后, 還需要區域安裝呢?

  • 在終端直接執行 webpack命令, 使用的是全域安裝的webpack
  • 當在package,json中定義了script時, 其中包含了webpack命令, 那么使用的是區域webpack

  ---

  
  

1.2.2 準備作業

• 我們創建如下檔案和檔案夾:

• 檔案和檔案夾決議:

  • dist 檔案夾: 用于存放打包之后的檔案

  • src 檔案夾: 用于存放我們寫的源檔案

    • main.js : 專案的入口檔案
    • mathUtils.js 定義了一些數學更具函式, 可以在其他地方參考, 并且使用

  • index.html : 瀏覽器打開展示的首頁 html

  • package.json: 通過npn init 生成的 npm包管理的檔案 (暫時用不上)

1.2.3 打包js 檔案

• 現在的js檔案中使用了模塊化的方式進行開發，他們可以直接使用嗎？不可以，

  • 因為如果直接在index.html引入這兩個js檔案，瀏覽器并不識別其中的模塊化代碼，
  • 另外，在真實專案中當有許多這樣的js檔案時，我們一個個參考非常麻煩，并且后期非常不方便對它們進行管理，

• 如何打包呢？使用webpack的指令即可

  webpack src/main.js dist/bundle.js
  

1.2.4 使用打包后的檔案

• 打包后會在dist 檔案下, 生成一個 bundle.js 檔案
  • bundle.js檔案,是webpack 處理了專案直接檔案依賴后生成的一個js檔案, 我們需要將這個js 檔案在 index.html中引入即可

1.3 webpack的配置

1.3.1 入口和出口

• 我們考慮以下, 如果每次使用webpack的命令都需要寫上入口和出口作為引數 ,就非常麻煩, 有沒有一種方法可以將這兩個引數寫道配置中, 在運行時, 直接讀取呢?

• 當然可以, 就是創建一個webpack.config.js 檔案

  

1.3.2 區域安裝webpack

• 目前, 我們使用的webpack 是全域的webpack , 如果我們想使用區域來打包呢?

  • 因為一個專案往往依賴特定的webpack版本, 全域的版本可能跟這個專案的webpack版本不一致, 匯出打包出現問題
  • 所以通常一個專案, 都有自己區域的webpack

• 第一步, 專案中需要安裝自己區域的webpack

  • 這里讓區域安裝 webpack 3.6.0

  • Vue CLI3中已經升級到 webpack4, 但是它將組態檔隱藏了起來, 所以查看起來不是很方便

    npm install [email protected] --save-dev
    

• 第二步, 通過 node_modules/.bin/webpack啟動webpack打包 ( 一般不用 )
  

1.3.3 package.json中定義啟動

• 在實際開發中, 每次執行都敲一長串代碼很不方便

  • 我們可以在package.json的scripts中定義自己的執行腳本

    

• package.json中的scripts的腳本在執行時, 會按照一定的順序尋找命令對應的位置

  • 首先, 會尋找本地的node_module/.bin路徑中對應的命令

  • 如果沒有找到, 會去全域的環境變數中尋找

  • 如何執行自定義的 build 指令?

    npm run build
    

1.4 loader 的使用

1.4.1 什么是loader?

• loader是webpack中非常核心的概念

• webpack用來做什么呢?

  • 在我們之前的實體中, 我們主要是用webpack來處理我們寫的js代碼, 并且webpack會自動處理 js之間相關的的依賴
  • 但是, 在開發中我們不僅僅有基本的js代碼處理, 我們也需要加載 css、圖片， 也包括一些高級的將ES6轉成ES5代碼， 將TypeScript 轉成ES5 代碼， 將 scss、less 轉成css ， 將 .jsx .vue檔案轉成js檔案等等
  • 對于webpack本身的能力來說 ，對于這些轉換是不支持的
  • 需要給 webpack擴展對應的 loader就可以了

• loader 使用步驟：

  • 步驟一： 通過npm安裝需要使用的loader

    npm install --save-dev [email protected]
    

  • 步驟二： 在webpack，config.js 中的modules關鍵字下進行配置

     module: {
        rules: [
          {
            test: /\.css$/i,
            use: ["style-loader", "css-loader"],
          },
        ],
      },
    

• 大部分loader都可以在 webpack的官網中找到， 并且學習對應的用法

1.4.2 CSS檔案處理

準備作業

• 在專案開發程序中，我們必然需要添加很多樣式， 而樣式我們往往寫到一個單獨的檔案中

  • 在src目錄中， 創建一個css檔案， 其中創建一個normal.css 檔案
  • 我們也可以重新組織檔案的目錄結構, 將零散的js檔案放在一個js檔案夾中

• normal.css中的代碼非常簡單, 就是將body設定為red

• 但是, 這個適合normal.css中的樣式會生效嗎?

  • 當然不會, 因為我們根本就沒有參考它
  • webpack也不可能找到它, 因為我們只有一個入口, webpack會從入口開始查找其他依賴的檔案

• 在入口檔案中參考:

安裝css-loader

• 在webpack的官方中，我們可以找到如下關于樣式的loader使用方法：

  

  

• 按照官方配置webpack.config.js檔案

  注意：配置中有一個style-loader，我們并不知道它是什么，所以可以暫時不進行配置

• 重新打包專案

• 但是，運行index.html，你會發現樣式并沒有生效，

  • 原因是css-loader只負責加載css檔案，但是并不負責將css具體樣式嵌入到檔案中，
  • 這個時候，我們還需要一個style-loader幫助我們處理，

安裝style-loader

• 安裝命令

  npm install --save-dev style-loader
  

• 注意：style-loader需要放在css-loader的前面，

  • 疑惑：不對吧？按照我們的邏輯，在處理css檔案程序中，應該是css-loader先加載css檔案，再由style-loader來進行進一步的處理，為什么會將style-loader放在前面呢？
  • 答案：這次因為webpack在讀取使用的loader的程序中，是按照從右向左的順序讀取的，

  目前，webpack.config.js的配置如下

1.4.3 圖片檔案處理

準備階段

• 首先，我們在專案中加入兩張圖片：

• 一張較小的圖片test01.jpg(小于8kb)，一張較大的圖片test02.jpeg(大于8kb)

• 待會兒我們會針對這兩張圖片進行不同的處理

• 我們先考慮在css樣式中參考圖片的情況，所以我更改了normal.css中的樣式：

• 如果我們現在直接打包，會出現如下問題

下載 url-loader

• 圖片處理，我們使用url-loader來處理，依然先安裝url-loader

  npm install url-loader --save-dev
  

• 修改webpack.config.js組態檔：

• 再次打包，運行index.html，就會發現我們的背景圖片選出了出來，
  • 而仔細觀察，你會發現背景圖是通過base64顯示出來的
  • 這也是limit屬性的作用，當圖片小于8192位元組時，對圖片進行base64編碼

安裝 file-loader

• 那么問題來了，如果大于8192位元組呢？我們將background的圖片改成test02.jpg
• 這次因為大于8kb的圖片，會通過file-loader進行處理，但是我們的專案中并沒有file-loader

• 所以，我們需要安裝file-loader

• npn install [email protected] --save-dev
  

• 再次打包, 就會發現dist檔案夾多了一個圖片檔案

  

• 我們發現webpack自動幫助我們生成一個非常長的名字

  • 這是一個32位hash值，目的是防止名字重復
  • 但是，真實開發中，我們可能對打包的圖片名字有一定的要求
  • 比如，將所有的圖片放在一個檔案夾中，跟上圖片原來的名稱，同時也要防止重復

• 所以，我們可以在options中添加上如下選項：

  • img：檔案要打包到的檔案夾
  • name：獲取圖片原來的名字，放在該位置
  • hash:8：為了防止圖片名稱沖突，依然使用hash，但是我們只保留8位
  • ext：使用圖片原來的擴展名

• 但是，我們發現圖片并沒有顯示出來，這是因為圖片使用的路徑不正確
  • 默認情況下，webpack會將生成的路徑直接回傳給使用者
  • 但是，我們整個程式是打包在dist檔案夾下的，所以這里我們需要在路徑下再添加一個dist/

1.4.4 ES6 語法處理

• 如果你仔細閱讀webpack打包的js檔案，發現寫的ES6語法并沒有轉成ES5，那么就意味著可能一些對ES6還不支持的瀏覽器沒有辦法很好的運行我們的代碼，

• 在前面我們說過，如果希望將ES6的語法轉成ES5，那么就需要使用 babel

  • 而在webpack中，我們直接使用babel對應的loader就可以了，

   npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

• 配置webpack.config.js檔案

 {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }

• 重新打包，查看bundle.js檔案，發現其中的內容變成了ES5的語法

1.5 webpack中配置Vue

1.5.1 引入vue.js

• 后續專案中，我們會使用Vuejs進行開發，而且會以特殊的檔案來組織vue的組件，

• 所以，下面我們來學習一下如何在我們的webpack環境中集成Vuejs

• 現在，我們希望在專案中使用Vuejs，那么必然需要對其有依賴，所以需要先進行安裝

  • 注：因為我們后續是在實際專案中也會使用vue的，所以并不是開發時依賴

  npm install vue --save
  

• 那么，接下來就可以按照我們之前學習的方式來使用Vue了

1.5.2 打包專案-報錯資訊

• 修改完成后，重新打包，運行程式：
  • 打包程序沒有任何錯誤(因為只是多打包了一個vue的js檔案而已)
  • 但是運行程式，沒有出現想要的效果，而且瀏覽器中有報錯

• 這個錯誤說的是我們使用的是runtime-only版本的Vue，什么意思呢？

• 這里我只說解決方案：Vue不同版本構建，后續我具體講解runtime-only和runtime-compiler的區別，

• 所以我們修改webpack的配置，添加如下內容即可

• resolve:{
          alias:{
              'vue$':'vue/dist/vue.esm.js'
          }
      }
  

1.5.3 el和template 的區別

區別一：

• 正常運行之后, 我們來考慮另一個問題:

  • 如果我們希望data中的資料顯示在界面中, 就必須修改 index.html
  • 如果我們后面自定義了組件, 也必須修改 index.html 來使用組件
  • 但是 html 模板在之后的開發中, 并不希望手動的來頻繁修改 ,是否可以做到呢?

• 定義template屬性:

  • 在前面的vue實體中, 我們定義el屬性, 用于和index.html 中的 #app進行系結, 讓vue實體之后可以管理它其中的內容

  • 這里, 我們可以將div元素中的 {{message}} 內容刪掉, 只保留一個基本的id 為div 的元素

  • 但是如果我依然希望在其中顯示 {{message}} 的內容, 應該怎么處理?

  • 我們可以在 vue實體中 定義一個 template 屬性, 代碼如下:

    new Vue({
        el: '#app',
        template: `
         <div>
           <h2>{{msg}}</h2>
           <p>{{name}}</p>
           <button @click="btnClick">點擊</button>
    	</div>
        `,
        data: {
            msg: 'Hello Vue',
            name: '劉俊熙'
        },
        methods:{
            btnClick(){
                console.log(123456);
            }
        }
    });
    

**區別二: **

• 重新打包, 運行程式, 顯示一樣的結果和HTML代碼結構
• 那么, el 和 template 模板的關系是什么?
  • 在我們之前的學習中, 我們知道 el 用于指定Vue要管理的DOM, 可以幫助決議其中的指令、事件監聽等等
  • 而如果Vue實體中同時制定了 template, 那么 template 模板的內容會替換掉掛載的對應 el 的模板
• 這樣做有什么好處呢?
  • 這樣做之后我們就不需要在以后的開發中再次操作index.html , 只需要在template中寫入對應的標簽即可
• 但是, 書寫template模塊非常麻煩怎么辦呢?
  • 可以將 template模板中的 內容進行抽離
  • 會分成三部分書寫: template 、script、style, 結構變的非常清晰

1.5.4 .vue檔案的封裝處理

• 但是一個組件以一個js物件的形式進行組織和使用的時候是非常不方便的

  • 一方面撰寫template模塊非常的麻煩
  • 另外一方面如果有樣式的話, 我們寫在哪里比較合適呢?

• 現在, 我們以一種全新的方式來組織一個vue的組件

• 但是, 這個時候這個檔案可以被正確加載嗎?

  • 必然不可以, 這種特殊的檔案以及特殊的格式, 必須有人幫助我們處理
  • 誰來處理呢? vue-loader 以及 vue-template-compiler

• 安裝 vue-loader 和 vue-template-compiler

  注意: vue-template-compiler 的版本要和 vue.js的版本保存一致
  npm install [email protected] [email protected] --save-dev
  

• 修改webpack.config.js 的組態檔:

// D:\wamp64\www\webpack\04-webpack配置Vue\src\vue\app.vue
<template>
  <div>
    <h2 >{{ msg }}</h2>
    <p>{{ name }}</p>
    <button @click="btnClick">點擊</button>
    <Cpn></Cpn>
  </div>
</template>

<script>
import Cpn from './Cpn.vue'


export default {
  name: "app",
  data() {
    return {
      msg: 'Hello Vue',
      name: '劉俊熙'
    }
  },
  methods: {
    btnClick() {
      console.log(123456);
    }
  },
  components: {
    Cpn
  }
}
</script>

<style scoped>
.title {
  color: green;
}
</style>

// D:\wamp64\www\webpack\04-webpack配置Vue\src\main.js
import Vue from 'vue';
// import App from './vue/app'
import App from './vue/app.vue'
//  使用vue 開發



 new Vue({
    el: '#app',
    template:'<App></App>',
     components:{
         App
     }

});

打包后運行代碼

1.6 plugin 的使用

1.6.1 認識plugin

• plugin 是什么?
  • plugin 是插件的意思, 通常是用于某個現有的框架進行擴展
  • webpack中的插件, 就是對webpack現有功能的各種擴展, 比如 打包優化、檔案壓縮等等
• loader 和 plugin區別
  • loader 主要用于轉換某些型別的模塊, 它本身是一個轉換器
  • plugin是插件, 它是對webpack 本身的擴展, 是一個擴展器
• plugin 的使用程序:
  • 步驟一: 通過npm安裝需要使用的plugins(某些weboack已經內置的插件不需要安裝)
  • 步驟二: 在webpack.config.js中的plugins中配置插件
• 下面, 我們就來看看可以通過哪些插件對現有的webpack打包程序進行擴容, 讓我們的webpack變的更加好用

1.6.2 添加著作權的Plugin

• 先來使用一個最簡單的插件, 為打包的檔案添加著作權宣告

  • 該插件名字叫 BannnerPlugin, 屬于 webpack 自帶的插件

• 按照下面的方式來修改 webpack.config.js 的檔案:

  /**
   * Created by 13362 on 2021/4/25.
   */
  const path = require('path');
  const webpack = require('webpack');
  module.exports = {
    	....
      plugins:[
          new webpack.BannerPlugin('long_mao_bu_re')
      ]
  };
  

• 重新打包程式: 查看bundle.js 檔案的頭部, 看到如下資訊

1.6.3 打包HTML的plugin

• 目前, 我們的index.html 檔案是存放在專案的根目錄下的

  • 在真實發布專案時, 發布的dist 檔案夾重點內容, 但是dist 檔案夾中如果沒有index.html檔案, 那么打包的js 等檔案也就沒有意義了
  • 所以, 我們需要將index.html 檔案打包到dist 檔案夾中, 這個時候就可以使用 HtmlWebpackPlugin插件

• HtmlWebpackPlugin插件可以為我們做這些事情

  • 自動生成一個index.html檔案 ( 可以指定模板來生成)
  • 將打包的js 檔案, 自動通過script標簽插入到body中

• 安裝HtmlWebpackPlugin插件

  npm install [email protected] --save-dev
  

• 使用插件, 修改webpack.config.js檔案中plugins部分的內容如下

  • 這里的 template 表示根據什么模板來生成 index.html
  • 另外, 我們需要在洗掉之前在 output 中添加的 publicPath屬性
  • 否則插入的script 標簽中的src 可能會有問題

1.6.4 js壓縮的Plugin

• 在專案發布之前, 我們必然需要對js 等檔案進行壓縮處理

  • 這里, 我們就對打包的js檔案進行壓縮
  • 我們使用一個第三方的插件 uglifyjs-webpack-plugin, 并且版本號指定 1.1.1, 和CLI2保持一致

  npm install [email protected] --save-dev
  

• 修改webpack.config.js 檔案, 使用插件:

  

• 查看打包后的bunlde.js檔案，是已經被壓縮過了，

1.6.5 搭建本地服務器

• webpack 提供了一個可選的本地開發服務器, 這個本都服務器基于node.js搭建, 內部使用express 框架, 可以實作我們想要的讓瀏覽器自動重繪顯示我們修改后的結果

• 不過它只是一個單獨的模塊, 在webpack中使用之前需要先安裝他

  npm install [email protected] --save-dev
  

• devserver也是作為webpack中的一個選項, 選項本身可以設定如下屬性:

  • contentBase: 為哪一個檔案夾提供本地服務, 默認是根檔案, 我們這里要填寫 ./dist
  • port: 埠號
  • inline: 頁面實時重繪
  • historyApiFallback: 在 SPA頁面中, 依賴HTML5的history模式

• webpack.config.js檔案配置修改如下

  

• 我們可以再配置另一個scripts:

  • --open 引數表示直接打開瀏覽器

    

標籤：其他

上一篇：繩驅動上肢外骨骼機器人開發

下一篇：電腦裝機你需要避開的一些坑