10. vue之webpack打包詳解

一、什麼是webpack

webpack官網給出的定義是

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

 

 

如上圖: 中間的藍色塊就是webpack. 他會將左邊各種文件打包成右側html能夠解析的文件. 

總結:

webpack是一個靜態的打包模塊. 
這裡涉及兩個概念: 打包和模塊

 

1. 什麼是模塊?

上一篇文章, 說了什麼是模塊化, 詳見: //www.cnblogs.com/ITPower/p/14466964.html
模塊化有很多規範, commonJs規範, AMD規範, CMD規範, ES6規範等
在ES6之前, 要想使用模塊化開發,就要藉助其他的工具, 而且開發完成以後, 還需要處理各種依賴,並將其進行整合打包.

webpack可以讓我們進行模塊化開發, 他提供了平台, 並且會幫助我們處理各模塊之間的依賴關係.
webpack最終會幫我們將js, css, 圖片, json文件等打包為合適的格式, 以供瀏覽器使用.
在webpack中上述文件類型都可以被當做模塊來使用.

2. 什麼是打包?

就是將webpack中各種模塊資源進行打包合併成一個或多個包. 並且在打包的過程中, 可以對資源進行處理, 如:壓縮圖片, 將scss轉成css, 將ES6語法轉成ES5等可以被html識別的文件類型.

 

二. webpack打包工具的安裝

webpack打包工具依賴nodejs. nodejs環境依賴各種包, 這些包使用npm進行管理. npm是什麼呢? npm就是用來管理node下的各種包的

接下來看看webpack如何安裝?

第一步: 安裝nodejs

在官網下載nodejs://nodejs.org/zh-cn/ 安裝好以後可以查看nodejs的版本

node -v

我當前的版本是 v12.16.2

默認安裝nodejs的時候, 就會自動安裝npm, 所以, npm不用單獨安裝

第二步: 安裝webpack

我使用的webpack版本是3.6.0, 因為我當前使用的vue的版本是2, vue2依賴的webpack版本是3.6.0

首先查看本機是否已經安裝了webpack, 使用命令查詢

 webpack --version

如果沒有安裝, 則安裝全局的webpack

npm install webpack@3.6.0 -g

-g:表示的是global  全局的意思

webpack需要全局安裝, 也需要局部安裝. 

我們在終端或者IDE的terminal中使用webpack都是使用的全局的webpack,當我們在項目下使用package.json scripts webpacks, 這時候使用的是局部安裝的.

那什麼是全局webpack ,什麼是本地webpack呢?

我們通常都會安裝兩個webpack, 一個是全局的一個是本地的.
全局的指的是電腦上安裝的webpack包, 所有項目都可以使用
本地webpack是指當前項目的webpack包. 通常全局webpack版本會比較高, 而我的項目是老項目, 使用的是老版本的
webpack打包的, 這時如果使用全局的webpack打包就會報錯, 所以, 需要安裝一個和項目匹配的本地的webpack包

 

在這裡, 我們先值安裝全局的, 後面使用到本地的了, 再來安裝本地的webpack.

 

三. webpack的基本使用

webpack下通常包含兩個文件夾， 一個是src， 一個是dist

  • src下都會有一個main.js, 作為主js文件.
  • dist存放打包後的文件

 

 

 

在webpack中,我們會使用兩種類型的模板來定義: 分別是commonJs語法, 和ES6語法.

  • 在main.js引用mathUtil.js, 使用commonjs語法
  • 在main.js引用dataUtil.js, 使用ES6語法

 下面, 我們創建一個mathUtil.js 和 dataUtil.js兩個js文件, 分別使用commonJs語法和ES6語法來創建.

  • – 在main.js引用mathUtil.js, 使用commonJs語法

  • – 在main.js引用dataUtil.js, 使用ES6語法

項目結構如下:

1)  使用commonJs語法

第一步: 在mathUtil.js中export, 使用commonJs模塊的寫法 : module.exports ={add, sub}

function add(num1, num2) {
    return num1 + num2
}


function sub(num1, num2) {
    return num1 - num2
}

// 使用commonJs導出模塊
module.exports={add, sub}

這裡使用的是commonJs的語法導出方法

第二步: 在main.js中引用mathUtil.js中導出的變量 const {add, sub} = require(“文件名”)

const{add, sub} = require("./mathUtil.js")

console.log(add(10, 20))
console.log(sub(20, 10))

 

第三步: 使用webpack語句打包 : webpack ./src/main.js ./dist/bundle.js

 

首先進入到當前項目的根目錄下, 然後輸入命令

webpack ./src/main.js ./dist/bundle.js

意思是: 將src目錄下的main.js進行打包, 打包好的文件放在dist目錄下, 並命名為bundle.js

webpack是自動打包工具, 所以, 我們只需要打包main.js, 他會自動檢查main.js是否引用了其他文件. 如果有自動將其打包.

 

打包以後, 會生成一個bundle.js.  

第四步: 在index.html中引入bundle.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./dist/bundle.js" ></script>
</head>
<body>

</body>
</html>

引入以後, 就是普通的html代碼了, 我們可以向訪問其他html一樣,訪問這個頁面.

 

2) 使用ES6語法

第一步: 在dateUtil.js中導出, 使用ES6寫法: export {var1, var2}

function priceUnit(price) {
    return "$" + price.toFixed(2)
}

export {priceUnit}

 

第二步: 在main.js中引用dateUtil.js中導出的變量 import {var1, var2} from “文件地址”

import {priceUnit} from "./dataUtil"

console.log(priceUnit(25))

 

第三步: 使用webpack語句打包 : webpack ./src/main.js ./dist/bundle.js

webpack ./src/main.js ./dist/bundle.js

第四步: 在index中引用bundle.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./dist/bundle.js" ></script>
</head>
<body>

</body>
</html> 

四. webpack配置文件

1. 如何使用webpack命令直接打包

剛剛我們打包的時候, 使用的是

webpack ./src/main.js ./dist/bundle.js

那麼, 如果在項目下, 可不可以直接使用webpack, 而不用每次都指定文件呢? 這樣可以方便很多
當然是可以的, 我們需要在項目根目錄下創建一個文件: webpack.config.js 這個名字是固定的

這個js就是要告訴我們哪裡是webpack的入口, 哪個是webpack的出口

webpack.config.js

module.export={
    entry: './src/main.js',
    output: {
        path: '/dist',
        filename: '/bundle.js'
    }
}

 

  • entry用來指定入口, 指定一個路徑
  • output用來指定出口. 需要注意的是: 出口是一個對象, 由兩部分組成: path和filename

 

然後我們在終端輸入webpack打包. 打包會報錯, 報錯信息提示很明確: 

The provide value "./dist" is not an absolute path!

意思是說path應該是已經絕對路徑. 也就是dist的絕對路徑

 

思考: 我們能直接寫一個絕對路徑么? 比如: /Users/workspace/vue-study/webpack的配置/src/main.js 這樣可以么?
這樣肯定不太好, 因為我一旦將文件文在其他目錄下, 這個地址就變了.

webpack可以幫助我們獲取當前項目的絕對路徑
我們const path = require(“path”)來獲取相對目錄. 可是當前目錄下沒有path的包, path是node下東西, 需要通過npm init來初始化,

2. 初始化項目npm init

初始化命令

npm init

初始化完成以後, 就會創建一個叫package.json的文件

通常, 我們需要使用node的東西, 或者單獨依賴node環境的話, 都會執行npm init, 生成package.json

3. 安裝模塊

如果package.json裏面依賴其他模塊, 需要使用npm install的安裝一下, 然後就會在當前文件夾中安裝一些東西

npm install
  • const path = require(“path”)這裡的path就是node給我們生成的, 我們可以直接使用.

然後我們的output中path就可以這麼寫: 

path.resovle(__dirname, "dist")
  • _dirname是一個全局變量, resolve是一個函數, 可以將兩個部分的內容拼在一塊, 這樣生成以後就是一個絕對路徑

4. 使用npm run來啟動項目

下面來看一下package.json

{
  "name": "meet",
  "version": "1.0.0",
  "description": "剛剛我們打包的時候, 使用的是webpack ./src/main.js ./dist/bundle.js 那麼, 如果在項目下, 可不可以直接使用webpack, 而不用每次都指定文件呢? 可以的, 我們需要在項目根目錄下創建一個文件, webpack.config.js 這個名字是固定的 這個js就是要告訴我們哪個是webpac的入口, 哪個是webpack的出口 通過module.export={     entry: './src/main.js',     output: {         path: '/dist',         filename: '/bundle.js'     } } 來告訴我們入口和出口在哪裡. entry用來指定入口, 指定一個路徑 output用來指定出口. 出口是一個對象",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

通常我們啟動項的時候會使用npm run serve啟動項目, npm run build構建項目. 當執行這個命令的時候, 就會去package.json中的script標籤中找build命令和serve命令.

執行npm run build讓其執行webpack打包就可以在script中增加”build”:”webpack”

{
  "name": "meet",
  "version": "1.0.0",
  "description": "剛剛我們打包的時候, 使用的是webpack ./src/main.js ./dist/bundle.js 那麼, 如果在項目下, 可不可以直接使用webpack, 而不用每次都指定文件呢? 可以的, 我們需要在項目根目錄下創建一個文件, webpack.config.js 這個名字是固定的 這個js就是要告訴我們哪個是webpac的入口, 哪個是webpack的出口 通過module.export={     entry: './src/main.js',     output: {         path: '/dist',         filename: '/bundle.js'     } } 來告訴我們入口和出口在哪裡. entry用來指定入口, 指定一個路徑 output用來指定出口. 出口是一個對象",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"
}

 

然後就可以使用npm run webpack來打包了. 但是這裡打包是全局打包. 因為我們之前只安裝了一個全局的webpack.
但如果項目使用的版本和全局的不一樣, 怎麼辦呢? 我們還可以使用局部的wenpack打包.

5. 全局webpack和局部webpack有什麼區別呢?

我們通常都會安裝兩個webpack,

  • 一個是全局的
  • 一個是本地的.

全局的指的是電腦上安裝的webpack包, 所有項目都可以使用
本地webpack是指當前項目的webpack包.

通常全局webpack版本會比較高, 而我的項目是老項目, 使用的是老版本的
webpack打包的, 這時如果使用全局的webpack打包就會報錯, 所以, 需要安裝一個和項目匹配的本地的webpack包

6. 安裝本地webpack命令

npm install webpack@3.6.0 --save-dev
  • –save-dev: 這個參數的含義表示開發時依賴.

這裡有兩個概念:

  • 1. 開發時依賴
  • 2. 運行時依賴

對於打包來說, 我們只有在開發環境才會打包, 開發好以後要上線了會將其構建成html代碼, 放到服務器上運行,
放到服務器以後, 就不需要打包了, 所以, 打包只需要在開發時使用, 是一個開發時依賴

本地webpack安裝好以後, 會在package.json中看到devDependencies屬性, 這就是開發時依賴

本地webpack安裝好以後, 使用npm run build進行打包. 那是使用的全局webpack打包的還是本地webpack打包的呢?
本地安裝好webpack以後會多出一個文件夾node_modules, 這裡是默認在本地裝的包, 其中有一個是webpack, 使用這裏面的webpack
就表示使用的局部webpack打包. 而當我們在終端, 或者ide的terminal中執行webpack命令都是全局的

如果想要使用局部webpack打包, 可以使用npm run build. 這時就是去package.json的script腳本中找build命令了.

package.json中腳本命令執行的順序:

  • 首先, 在本地的路徑中找命令
  • 然後, 本地沒有, 再去全局中找命令

在這裡首先回去本地找有沒有這個命令, 如果沒有就去全局找

 

 五.使用webpack打包css文件

webpack主要是用來打包的, 我們之前都是打包了js代碼文件, 那如果還有css, 圖片, 或者一些高級轉換,如將ES6轉換成ES5,將scss, less轉成css, 將.vue文件轉換成js文件怎麼辦呢?

webpack單獨是不能完成轉換的,需要藉助loader.

1. 什麼是紹loader?

webpack 可以使用 loader 來預處理文件。這允許你打包除 JavaScript 之外的任何靜態資源。

loader是webpack中一個非常核心的概念, loader有很多種, 不同的內容需要使用不同的loader來加載.

2. loader的使用

我們首先來創建一個css文件, 然後將css文件引入到項目中

第一步: 創建main.css文件

body{
    background-color: #085e7d;
}

第二步: 將main.css文件引入到main.js中

require("./css/main.css")

這是使用commonJs的寫法引入的. 引入css以後, 不需要任何返回值, 所以, 我們可以不用寫成  “let 變量名 = require(文件路徑)”

第三步: 執行npm run build, 會報異常

 

 這個異常的意思是, 缺少合適的loader. 因為我們引入了css, 但是還沒有引入解析css的loader.

css需要兩個loader :

  • 一個是css-loader
  • 另一個是style-loader

css-loader: 只負責加載css文件, style-loader: 負責將樣式加載到Dom中

第四步: 通過npm安裝loader

我們的目標是安裝loader, 可以去官網找到對應的loader. css文件對應的loader.

官網地址: www.webpackjs.com

 

 找到css-loader的用法

 

 

安裝命令

npm install --save-dev css-loader

第五步: 在webpack.config.js中的modules關鍵字下配置

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

        ]
    }

 

第六步: 安裝style-loader

安裝方法和css是一樣的.  可以通過查詢官網找到方法

安裝style-loader命令

npm install --save-dev style-loader

然後在將style-loader放在css-loader的前面

module: {
    rules: [
        {
            test: /\.css$/,
            // css-loader: 只負責加載css文件
            // style-loader: 負責將樣式加載到Dom中
            // 注意: 使用loader加載的時候, 是從右向左加載的. 所以, 先加載css-loader, 在加載style-loader
            use: ['style-loader','css-loader' ]
        }

    ]
}

 

為什麼需要將style-loader放在前面呢? 

其實在解析css的過程中, 先用到的是css-loader, 然後使用到的是style-loader. 但是webpack.config.js在解析的時候, 是從右往左解析的. 

第七步: 打包

npm run build

打包以後報錯: 

css (node:93638) UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function

遇到這個問題, 說明版本不合適, 我們使用的webpack是3.6.0的版本, 打包的時候, 我們需要重新制定一下css-loader和style-loader的版本號

打開package.json, 找到devDependencies

"devDependencies": {
    "css-loader": "^2.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^3.6.0",
  }

指定css-loader和style-loader的版本號分別是2.1.1和2.0.0

再次打包, 成功!
 

 六. webpack打包less文件

 其實我們知道如何打包css文件了, 那麼打包less文件方法是類似的 

第一步: 定義一個less文件

我們定義一個less文件, 起個名字common.less

@fontsize: 24px;
@fontcolor: #5112b8;

body {
  font-size: @fontsize;
  color: @fontcolor;
}

第二步: 將less文件import引入到main.js中

require("./css/special.less")

 

第三步: 安裝less組件, 應該安裝哪些組件呢? 可以看//cn.vuejs.org/v2/guide/

查詢官網: www.webpackjs.com

 

 

安裝組件命令

npm install --save-dev less-loader less

添加規則

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }]
    }
};

 

注意: 順序不能改變

第四步: 重新打包.

npm run build

 

 七. webpack打包圖片文件

下面來看看webapck是如何打包圖片的

第一步: 在css中引入一個圖片文件

比如: 我引入了一個背景圖

 

 

 

然後將圖片作為背景引入到main.css中

body{
    background: url("../img/123.jpeg");
}

第二步: 將main.css文件通過import引入到main.js中

require("./css/main.less")

 我們知道webpack是自動打包工具, 在打包main.js的時候, 他會看裏面都引入了哪些內容. 他發現引入了main.css, 就是去自動加載並解析css對應的模塊. 在css中引入了圖片, 就會去自動加載並解析圖片對應的模塊. 

第三步: 安裝解析圖片的組件

查詢官網: www.webpackjs.com

我們看到background是通過url引入的, 首先需要url-loader模塊. 

安裝組件命令

npm install --save-dev url-loader

添加規則

{
    test: /\.(png|jpg|gif|jpeg)$/,
    use: [ {
        loader: 'url-loader',
        options: {
            limit: 8000,
        }
    }]
}

我們發現這次引入的時候有一個options參數, 這個參數限制了圖片的大小. 

注意: 

  • 當加載的圖片, 小於limit時, 會將圖片編譯成base64字符串形式. — 不需要文件, 因為他是一個base64字符串
  • 當加載的圖片, 大於limit是, 需要使用file-loader模塊來加載. — 當文件來處理, 就需要打包成文件, 需要file-loader

當以文件的形式加載的時候, 需要指定一個打包路徑. 否則加載的文件目錄是根目錄, 結果會找不到文件, 因為我們的文件最終打包到dist下面了.

 

module.exports={
    // 入口
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        publicPath:"dist/"
    }
...
}

我們可以在output位置增加publicPath:”dist/” 以後, 所有的路徑類的文件在打包編譯的時候, 都會打包到這個路徑下面

八. webpack打包–將ES6打包成ES5 

 為什麼需要將es6打包成es5呢? 因為上述方式的webpack打包後, 並沒有將ES6的語法轉換成ES5的, 比如:

 

 這會有什麼問題呢?

有些瀏覽器可能不認識. 因為不是所有的瀏覽器都兼容ES6, 但基本所有的瀏覽器都兼容ES5的語法. 因此我們需要將ES6的語法轉換成ES5的語法

 方法和上面是一樣的.

 第一步: 安裝組件

打包ES6到ES5需要的組件是bebal

查詢官網需要安裝哪些組件: www.webpackjs.com

 

 安裝命令:

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

我們這裡安裝的是babel-loader的7的版本. babel-preset的版本是es2015

 第二步: 配置babel-loader組件

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

這個配置裏面指定了exclude, 排除哪些目錄: 這裡排除了node_modules目錄, 因為這個目錄下的文件我們不需要打包. 是node編譯需要的內容. 

presets屬性,用來指定將es6轉換成es5需要的版本. 我們這裡直接填es2015就可以了.

第三步: 打包

npm run build

這次在去看bundle.js文件, 裏面就沒有es6的語法了

 

Tags:

VirMach 便宜 VPS

QNews

QNews