Vue.js學習系列四 —— Webpack學習實踐

這兩周一直想寫webpack的知識點，卻發(fā)現(xiàn)webpack其實要將webpack說的具體內(nèi)容還是挺多的。而且稀土掘金上一搜webpack有好多人都有去寫webpack的知識點，所以本文中不再去重復別人的東西了，就簡單記錄一下我對webpack的理解。并按照老規(guī)矩附上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是如何打包的~（轉(zhuǎn)譯會在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

然后我們會發(fā)現(xiàn)項目中多了一個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>

最后輸出正確結(jié)果

hello app
hello~~

二、webpack.config.js

1. 定義

webpack.config.js文件是webpack的默認配置文件。之前我們使用命令行$ webpack entry.js output.js來實現(xiàn)打包，其實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數(shù)組中可以有多個對象，每個對象就是一個加載器。下面是babel-loader的最簡單配置方式

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

對象中的test是正則表達式，用于搜索后綴為.js的文件。loader是所用加載器名稱。

4. 使用babel來轉(zhuǎn)譯ES6代碼

下面我們來一步步使用babel-loader將ES6語法用于項目中。
webpack打包的文件默認是不支持ES6的，我們需要用babel轉(zhuǎn)譯。

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文件，文件內(nèi)容為

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

4.4 使用ES6

import good from './good.js'

三、分析vue-cli

說了這么多，我的最終目的還是為了學習Vue.js。所以在對webpack有了一定的理解之后，就發(fā)現(xiàn)其實vue-cli并不是那么深不可測。

1. 結(jié)構分析

  • build —— 項目構建文件夾
  • build.js —— 打包構建腳本（npm run build）
  • check-versions.js —— npm和node版本的查詢
  • dev-client.js ——
  • dev-server.js —— 開發(fā)調(diào)試腳本（npm run dev）
  • utils.js —— 工具類
  • webpack.base.config.js —— Webpack配置文件
  • webpack.dev.config.js —— 開發(fā)版本W(wǎng)ebpack配置文件，與webpack.base.config.js合并成完整的配置文件。
  • webpack.prod.config.js —— 生產(chǎn)版本W(wǎng)ebpack配置文件，與webpack.base.config.js合并成完整的配置文件。
  • config —— 配置文件夾，保存有各種配置參數(shù)（文件路徑、服務器端口、功能開關）
  • src —— 代碼文件夾
  • static
  • .gitkeep —— 作用是將文件所在文件夾保留在git版本控制中。文件類型和.gitignore差不多。
  • .babelrc —— babel配置文件
  • .editorconfig —— 編輯配置，確保使用各種編輯器時能有相同的編輯格式。
  • .gitignore —— git忽略文件
  • index.html —— 頁面，最終顯示在這個html中
  • package.json —— npm配置文件，包含了項目的信息、腳本、依賴庫等重要信息。

2. 創(chuàng)建簡易cli

理解完vue-cli的某些功能后，不難發(fā)現(xiàn)我們自己也可以搭建簡易的vue-cli了。
官方的腳手架中除了有webpack打包，還包含了node腳本、開發(fā)和生產(chǎn)模式的切換、ESLint配置等功能。我們暫時不需要，將項目簡化來更好的理解webpack。

2.1 package.json

讓我們來自己建立一個cli，首先創(chuàng)建一個空文件夾。

$ 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配置文件中的部分內(nèi)容是從官方的 webpack.base.config.js 中復制出來的。正如我項目結(jié)構中所說的，vue-cli中的 webpack.base.config.js 是基礎的配置文件。vue-cli中的 webpack.dev.config.js 和 webpack.prod.config.js 分別代表了開發(fā)和生產(chǎn)版本的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 文件夾中所有內(nèi)容也直接復制過來。
復制按成后進行webpack打包。

$ webpack

打包完成就會出現(xiàn)一個在 dist 目錄下有一個 bundle.js 文件。有了打包文件，我們還需要創(chuàng)建一個 index.html 來顯示效果，這個之后再說。
所以，最后的項目結(jié)構如下圖

項目結(jié)構

2.4 index.html

現(xiàn)在，到了呈現(xiàn)效果的時候了。

<!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>

很簡單，創(chuàng)建一個id為app的div元素用于顯示Vue組件內(nèi)容，然后將打包好的bundle.js引用進去。
現(xiàn)在，到項目目錄中找到 index.html 頁面，瀏覽器打開就可以看到效果啦~

效果圖

注：簡易cli項目的源碼在 VueStudyDemos\WebpackDemos\demo5中

四、相關資料推薦

這里推薦一下我學習webpack中發(fā)現(xiàn)的一些好的網(wǎng)站，分享一下。
https://github.com/webpack-china/awesome-webpack-cn
http://blog.guowenfh.com/2016/03/24/vue-webpack-01-base/

寫在最后

拖了一個春節(jié)，終于把webpack的博客給寫出來了。感覺在寫完博客之后對webpack的理解深刻了許多，再次證明了“教是最好的學”這個理論。
新的一年，我要堅持好好寫博客，享受分享帶來的快樂。
之后計劃學習一下eslint以及一些測試工具。然后試著用element和mint做兩個小demo分享出來。然后了解一下node的相關知識。

Vue.js學習系列

鑒于前端知識碎片化嚴重，我希望能夠系統(tǒng)化的整理出一套關于Vue的學習系列博客。

Vue.js學習系列一 —— vue-router2學習實踐筆記（附DEMO）
Vue.js學習系列二 —— vuex學習實踐筆記（附DEMO）
Vue.js學習系列三 —— axios和網(wǎng)絡傳輸相關知識的學習實踐
Vue.js學習系列四 —— Webpack打包工具的使用
Vue.js學習系列五 —— 從VUE-CLI來聊聊ESLint
Vue.js學習系列六 —— Vue單元測試Karma+Mocha學習筆記
Vue.js學習系列七 —— Vue服務器渲染Nuxt學習
Vue.js學習系列八 —— Vue源碼學習之State學習

Vue.js學習系列項目地址

本文源碼已收入到GitHub中，以供參考，當然能留下一個star更好啦-。
https://github.com/violetjack/VueStudyDemos

關于作者

VioletJack，高效學習前端工程師，喜歡研究提高效率的方法，也專注于Vue前端相關知識的學習、整理。
歡迎關注、點贊、評論留言~我將持續(xù)產(chǎn)出Vue相關優(yōu)質(zhì)內(nèi)容。

新浪微博： http://weibo.com/u/2640909603
掘金：https://gold.xitu.io/user/571d953d39b0570068145cd1
CSDN: http://blog.csdn.net/violetjack0808
簡書： http://www.itdecent.cn/users/54ae4af3a98d/latest_articles
Github： https://github.com/violetjack

打個廣告

鏈家上海研發(fā)中心招聘前端、后端、測試。
機會不多，需要內(nèi)推機會的請將簡歷發(fā)送至 dingxiaojie001@ke.com。

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 前言 webpack2和vue2已經(jīng)不是新鮮東西了，滿大街的文章在講解webpack和vue，但是很多內(nèi)容寫的不是...
    技術宅小青年閱讀 6,672評論 4贊 43
  • 1. 新建一個文件夾,命名為 webpack-cli , webpack-cli 就是你的項目名,項目名建議使用小...
    魯大師666閱讀 1,640評論 1贊 3
  • 無意中看到zhangwnag大佬分享的webpack教程感覺受益匪淺，特此分享以備自己日后查看，也希望更多的人看到...
    小小字符閱讀 8,359評論 7贊 35
  • 寫在開頭 先說說為什么要寫這篇文章, 最初的原因是組里的小朋友們看了webpack文檔后, 表情都是這樣的: (摘...
    Lefter閱讀 5,432評論 4贊 31
  • 小白鞋是春天買來的 因為迫切想要擁有 忘記看尺碼就快速下單了 所以經(jīng)過了很大波折 才收到這雙 心愛的小白鞋 愛到 ...
    天野丟閱讀 214評論 2贊 1

友情鏈接更多精彩內(nèi)容