2. 程式人生 > >Vue.js學習系列四——Webpack打包工具的使用（裝修中……）

Vue.js學習系列四——Webpack打包工具的使用（裝修中……）

阿新 • • 發佈：2019-01-03

這兩週一直想寫webpack的知識點，卻發現webpack其實要說的很具體內容挺多的。而且稀土掘金上一搜webpack有好多人都有去寫webpack的知識點，所以本文中不再去重複別人的東西了，就簡單記錄一下我對webpack的理解。並按照老規矩附上demo以及我收藏的幾篇不錯的webpack入門文章以供學習參考~

一、什麼是webpack

1. webpack是蝦米？

webpack是一個模組打包工具。
用vue專案來舉例：瀏覽器它是隻認識js，不認識vue的。而我們寫的程式碼字尾大多是.vue的，在每個.vue檔案中都可能html、js、css甚至是圖片資源；並且由於元件化，這些.vue檔案之間還有錯綜複雜的關係。所以專案要被瀏覽器識別，我們就要使用webpack將它們打包成js檔案以及相應的資原始檔。
或者這麼理解，我們以vue專案的形式編寫專案邏輯，瀏覽器以他理解的方式來執行專案。webpack把我們的vue專案想表達的所有意圖傳遞給瀏覽器讓瀏覽器去執行。
PS：webpack功能不止於此，但這個功能是讓我們專案能跑起來的必要條件！（個人理解，如有錯誤，還請批評指正）

2. 來個demo理解下

這裡我們來理解下webpack是如何打包的~（轉譯會在loaders中提到）。首先我們寫兩個最簡單的js
hello.js

console.log("hello~~")

app.js

console.log("hello app");
require("./hello.js")

app.js中匯入了hello.js，它們之間有匯入關係。我們假如直接將app.js放到html中是會報錯的。

hello app
Uncaught ReferenceError: require is not defined at app.js:2

如果我們要維持這種關係我們就必須使用打包工具進行打包。在命令列中輸入：

// 安裝webpack
$ npm install webpack -g
// 打包app.js
$ webpack app.js bundle.js

然後我們會發現專案中多了一個bundle.js檔案，我們在html中匯入這個js檔案。
index.html

<!DOCTYPE html>
<html>
  <head>
    <title>demo01</title>
  </head>
  <body>
    <h1>demo01</h1>
    <script src="bundle.js"
 
></script>
  </body>
</html>

最後輸出正確結果

hello app
hello~~

二、webpack.config.js

1. 定義

webpack.config.js檔案是webpack的預設配置檔案。之前我們使用命令列$ webpack entry.js output.js來實現打包，其實webpack可以有更多的打包配置，這些配置都是在webpack.config.js中完成的。下面是一個簡單的webpack.config.js。

const webpack = require("webpack")

module.exports = {
  entry: {
    entry: "./app/entry.js",
  },
  output:
  {
    path: __dirname + "/dist",
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
    ]
  }
}

個人覺得這三個東西是最最重要的了，所以必須單獨說說這三個配置。其他配置都可以去查閱資料慢慢來。

2. entry&output

entry是配置webpack的入口檔案，上面的程式碼中我們將app目錄下的entry.js作為入口檔案。webpack會將與entry.js有關的資源都進行打包。
output是出口檔案，即打包好的檔案的存放地址和檔名。

這裡有幾種檔案的輸入輸出情況。引用自Webpack 2 入門教程。

2.1 單檔案，單輸出

const webpack = require("webpack");
module.exports = {
  context: __dirname + "/src",
  entry: {
    app: "./app.js",
  },
  output: {
    path: __dirname + "/dist",
    filename: "[name].bundle.js",
  },
};

2.2 多檔案，單輸出

const webpack = require("webpack");
module.exports = {
  context: __dirname + "/src",
  entry: {
    app: ["./home.js", "./events.js", "./vendor.js"],
  },
  output: {
    path: __dirname + "/dist",
    filename: "[name].bundle.js",
  },
};

2.3 多檔案，多輸出

const webpack = require("webpack");
module.exports = {
  context: __dirname + "/src",
  entry: {
    home: "./home.js",
    events: "./events.js",
    contact: "./contact.js",
  },
  output: {
    path: __dirname + "/dist",
    filename: "[name].bundle.js",
  },
};

大家可以動手實踐一下，很好理解。打包出來的單個或者多個檔案直接可以在html中使用。

<script src="./dist/entry.js"></script>

3. loaders

loader是webpack的載入器，可以幫我們處理各種非js檔案。如css樣式，vue、jsx、weex等字尾的程式碼，JPG、PNG圖片等。所以我們一般會在package.json中看到各種*-loader。這些就是各類資源的loader載入器。
在module的loaders陣列中可以有多個物件，每個物件就是一個載入器。下面是babel-loader的最簡單配置方式

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
      },
    ]
  }

物件中的test是正則表示式，用於搜尋字尾為.js的檔案。loader是所用載入器名稱。

4. 使用babel來轉譯ES6程式碼

下面我們來一步步使用babel-loader將ES6語法用於專案中。
webpack打包的檔案預設是不支援ES6的，我們需要用babel轉譯。

4.1 安裝babel

這個配置其實我是抄的vue-cli，個人對babel用法還不是很熟。
在package.json中新增依賴。

  "devDependencies": {
    ...
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "webpack": "^1.14.0"
    ...
  }

npm安裝

$ npm install

4.2 在webpack.config.js中新增babel-loader的配置

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
      },
    ]
  }

4.3 新增.babelrc

在專案根目錄下新增.babelrc檔案，檔案內容為

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

4.4 使用ES6

import good from './good.js'

三、分析vue-cli

說了這麼多，我的最終目的還是為了學號Vue.js。所以在對webpack有了一定的理解之後，就發現其實vue-cli並不是那麼深不可測。

1. 結構分析

  • build —— 專案構建資料夾
    • build.js —— 打包構建指令碼（npm run build）
    • check-versions.js —— npm和node版本的查詢
    • dev-client.js ——
    • dev-server.js —— 開發除錯指令碼（npm run dev）
    • utils.js —— 工具類
    • webpack.base.config.js —— Webpack配置檔案
    • webpack.dev.config.js —— 開發版本Webpack配置檔案，與webpack.base.config.js合併成完整的配置檔案。
    • webpack.prod.config.js —— 生產版本Webpack配置檔案，與webpack.base.config.js合併成完整的配置檔案。
  • config —— 配置資料夾，儲存有各種配置引數（檔案路徑、伺服器埠、功能開關）
  • src —— 程式碼資料夾
  • static
    • .gitkeep —— 作用是將檔案所在資料夾保留在git版本控制中。檔案型別和.gitignore差不多。
  • .babelrc —— babel配置檔案
  • .editorconfig —— 編輯配置，確保使用各種編輯器時能有相同的編輯格式。
  • .gitignore —— git忽略檔案
  • index.html —— 頁面，最終顯示在這個html中
  • package.json —— npm配置檔案，包含了專案的資訊、指令碼、依賴庫等重要資訊。

2. 建立簡易cli

理解完vue-cli的某些功能後，不難發現我們自己也可以搭建簡易的vue-cli了。
官方的腳手架中除了有webpack打包，還包含了node指令碼、開發和生產模式的切換、ESLint配置等功能。我們暫時不需要，將專案簡化來更好的理解webpack。

2.1 package.json

讓我們來自己建立一個cli，首先建立一個空資料夾。

$ mkdir demo05
$ cd demo05

初始化npm

$ npm init

然後複製vue-cli中的依賴庫到package.json中（直接複製啦，具體依賴庫的作用就不提啦~之後會寫部落格補上的）。

  "dependencies": {
    "vue": "^2.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "friendly-errors-webpack-plugin": "^1.1.2",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "json-loader": "^0.5.4",
    "semver": "^5.3.0",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "shelljs": "^0.7.4",
    "url-loader": "^0.5.7",
    "vue-loader": "^10.0.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  },

2.2 webpack.config.js

這裡的webpack配置檔案中的部分內容是從官方的 webpack.base.config.js 中複製出來的。正如我專案結構中所說的，vue-cli中的 webpack.base.config.js 是基礎的配置檔案。vue-cli中的 webpack.dev.config.js 和 webpack.prod.config.js 分別代表了開發和生產版本的webpack配置檔案，他們與 webpack.base.config.js 合併成最後的webpack配置檔案。這裡我們只要找到 webpack.base.config.js 即可。
下面是完整配置程式碼。

var path = require("path")
var projectRoot = path.resolve(__dirname, '../')

module.exports = {
  // 入口檔案
  entry: "./src/main.js",
  // 輸出檔案
  output: {
    filename: "./dist/bundle.js"
  },
  // 別名
  resolve: {
    extensions: ['', '.js', '.vue', '.json'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'src': path.resolve(__dirname, '../src'),
      'assets': path.resolve(__dirname, '../src/assets'),
      'components': path.resolve(__dirname, '../src/components')
    }
  },
  module: {
    // 載入器
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
      }
    ]
  },
}

2.3 新增必要檔案

由於使用git、babel，所以我將vue-cli中的 .gitignore 和 .babelrc 直接複製過來。
還有，由於懶得寫邏輯程式碼，這裡我將 src 資料夾中所有內容也直接複製過來。
複製按成後進行webpack打包。

$ webpack

打包完成就會出現一個在 dist 目錄下有一個 bundle.js 檔案。有了打包檔案，我們還需要建立一個 index.html 來顯示效果，這個之後再說。
所以，最後的專案結構如下圖


專案結構

2.4 index.html

現在，到了呈現效果的時候了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo3</title>
  </head>
  <body>
    <div id="app">
    </div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

很簡單，建立一個id為app的div元素用於顯示Vue元件內容，然後將打包好的bundle.js引用進去。
現在，到專案目錄中找到 index.html 頁面，瀏覽器開啟就可以看到效果啦~


效果圖

注：簡易cli專案的原始碼在 VueStudyDemos\WebpackDemos\demo5中

四、相關資料推薦

寫在最後

在這裡，首先祝大家新年快樂。拖了一個春節，終於把webpack的部落格給寫出來了。感覺在寫完部落格之後對webpack的理解深刻了許多，再次證明了“教是最好的學”這個理論，推薦朋友們都去試著將所掌握的知識寫出來，會有新的收穫的喲。新的一年，堅持寫部落格，享受分享帶來的快樂。
之後計劃學習一下eslint以及一些測試工具。然後試著用element和mint做兩個小demo分享出來。然後瞭解一下node。系統的學習Vue.js的知識。
最後，感謝你看完這篇部落格，如果有什麼建議或者意見，可以在下方評論或者傳送簡信給我。

Vue.js學習系列

Vue.js學習系列專案地址（專案暫時有點亂，之後會進行整理優化。）

關於作者

相關推薦

Vue.js學習系列四——Webpack打包工具的使用（裝修中……）

這兩週一直想寫webpack的知識點，卻發現webpack其實要說的很具體內容挺多的。而且稀土掘金上一搜webpack有好多人都有去寫webpack的知識點，所以本文中不再去重複別人的東西了，就簡單記錄一下我對webpack的理解。並按照老規矩附上demo以及我收藏的幾

Vue.js 學習足跡(四)

文章目錄 程式設計導航 多檢視 巢狀路由 模擬手機類目巢狀 axios 程式設計導

Vue.js學習系列（三十）-- Vue.js樣式繫結（一）

class 與 style 是 HTML 元素的屬性，用於設定元素的樣式，我們可以用v-bind來設定樣式屬性。Vue.js v-bind 在處理 class 和 style 時，專門增強了它。表示式的結果型別除了字串之外， 1. Vue.js class 1.1 繫結

Vue.js學習系列（二十一）--修飾符

   在事件處理程式中呼叫event.preventDefault() 或 event.stopPropagation()是非常常見的需求。儘管我們可以在methods 中輕鬆實現這點，但更好的方式是：methods 只有純粹的資料邏輯，而不是去處理 DOM 事件細節。 為

Vue.js學習系列六——Vue單元測試Karma+Mocha學習筆記

在使用vue-cli建立專案的時候，會提示要不要安裝單元測試和e2e測試。既然官方推薦我們使用這兩個測試框架，那麼我們就動手去學習實踐一下他們吧。 簡介 Karma Karma是一個基於Node.js的JavaScript測試執行過程管理工

機器學習系列：k 近鄰法（k-NN）的原理及實現

  本內容將介紹機器學習中的 k k k 近鄰法（

原始碼學習系列之SpringBoot自動配置（篇一）

原始碼學習系列之SpringBoot自動配置原始碼學習（篇一） ok，本部落格嘗試跟一下Springboot的自動配置原始碼，做一下筆記記錄，自動配置是Springboot的一個很關鍵的特性，也容易被忽略的屬性，因為這個屬性被包括在@SpringBootApplication註解裡，所以不去跟一下原始碼都不知

原始碼學習系列之SpringBoot自動配置（篇二）

原始碼學習系列之SpringBoot自動配置（篇二）之HttpEncodingAutoConfiguration 原始碼分析 繼上一篇部落格原始碼學習系列之SpringBoot自動配置（篇一）之後，本部落格繼續跟一下SpringBoot的自動配置原始碼 ok，先複習一下上一篇的內容，從前面的學習，我們知道了S

Vue-小demo、小效果 合集（更新中...）

lin auto isa hover json () add ole bce （騰訊課堂學習小demo：https://ke.qq.com/course/256052） 一、簡單的指令應用 ——打擊滅火器 圖片素材點擊騰訊課堂的鏈接獲取 html： 1 &

工作中總結的工具（更新中）

FeloneHelper 下面都是工作中總結的工具，全部集合在utils裡面，一般都在程式碼中做了使用示例，直接把程式碼跑一遍，然後按下面的流程複製到自己專案就可以用。專案用的是AndroidStudio 3.1.3 ，高於這個版本的應該都可以正常跑起來。有目

走進官方手冊系列 --- 關於LSN的研究（更新中）

https://dev.mysql.com/doc/refman/5.6/en/glossary.html#glos_lsn https://www.devarticles.com/c/a/MySQL/How-Logs-Work-On-MySQL-With-InnoDB-T

Webpack打包工具學習使用

從後往前 try name modules pos amd plugins 項目打包 lena 　　Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際

vue.js學習筆記（四）--變化檢測問題

部落格地址：https://fisher-zh.github.io Vue追蹤變化是通過把一個普通 JavaScript 物件傳給 Vue 例項的 data 選項，Vue將遍歷此物件所有的屬性，並使用 Object.defineProperty 把這些屬性全部轉為 g

Vue學習之四(webpack+專案搭建)

過濾器 區域性過濾器:寫在元件的物件中 和data同級.filter() 全域性過濾器: 元件定義外部Vue.filters() webpack學習 是什麼? 前端資源化模組化管理和打包工具; 按照依賴關係打包生成符合生產環境的靜態資源;

Vue學習系列(四)——理解生命週期和鉤子

 前言     在上一篇中，我們對平時進行vue開發中遇到的常用指令進行歸類說明講解，大概已經學會了怎麼去實現資料繫結，以及實現動態的實現資料展示功能，運用指令，可以更好更快的進行開發。而在這一篇中，我們將通過例項，探究vue的生命週期。     萬物皆有靈，

Vue.js 學習筆記之四：Vue 元件基礎

到目前為止，這個系列的筆記所展示的都是一些極為簡單的單頁面 Web 應用程式，並且頁面上通常只有幾個簡單的互動元素。但在實際生產環境中，Web 應用程式的使用者介面往往是由多個複雜的頁面共同組成的。這時候，我們就需要開始注意程式碼的可複用性了，針對這個問題，Vue.js 框架提出的解決方案就是先將使用者介面上

Vue.js學習之生命周期

ted eight http 初始 機會 編譯 log console eat 每個 Vue 實例在被創建之前都要經過一系列的初始化過程。例如，實例需要配置數據觀測(data observer)、編譯模版、掛載實例到 DOM ，然後在數據變化時更新 DOM 。在這個過程中

vue.js 學習記錄(二)

分離 理解 foo 選項 這也 lsp 生效 html標簽 tro 原文連接：http://www.cnblogs.com/keepfool/p/5625583.html 組件 #註冊組件 Vue.component(‘my-component‘, { // 選項

vue.js學習筆記

bsp 系統 特性 學習 數據綁定 學習筆記 開始 問題 mvvm模式 1、vue.js的目的 Vue的產生主要是解決三個問題 1.1、主要解決的是數據綁定的問題 1.2、主要是構建大型的單頁面程序，解決app頁面卡頓的問題 1.3、支持組件式開發，采用積木式編程

JS學習十四天----server端運行JS代碼

times 接口 2.6 cal dynamic 支持 benchmark target log server端運行JS代碼 話說,當今不在client使用JS代碼才是稀罕事.因為web應用的體驗越來越豐富,client用JS實現的邏輯也越來越多,這造成的結果就是