webpack打包，前端工程化（ES6模塊化和webpack打包）

2023-11-18 阅读 21 评论 0

摘要：文章目錄目標：目錄：1、模塊化相關規范1.1、模塊化概述1.2、瀏覽器端模塊化規范AMDCMD1.3、服務器端模塊化規范CommonJS1.4、大一統的模塊化規范-ES6模塊化1.Node.js中通過 **babel** 體驗ES6模塊化1.5、ES6模塊化的基本語法默認導出與默認導入按需導入與按需導

文章目錄

- 目標：
- 目錄：
- 1、模塊化相關規范
- - 1.1、模塊化概述
  - 1.2、瀏覽器端模塊化規范
  - - AMD
    - CMD
  - 1.3、服務器端模塊化規范
  - - CommonJS
  - 1.4、大一統的模塊化規范-ES6模塊化
  - - 1.Node.js中通過 **babel** 體驗ES6模塊化
  - 1.5、ES6模塊化的基本語法
  - - 默認導出與默認導入
    - 按需導入與按需導出
    - 直接導入并執行模塊代碼
- 2、webpack
- - 2.1、當前web開發面臨的困境
  - 2.2、webpack概述
  - 2.3、webpack的基本使用
  - - 創建列表隔行變色項目
    - 在項目中安裝和配置webpack
    - 配置打包的入口與出口
    - 配置webpack的自動打包功能
    - 配置html-webpack-plugin生成預覽頁面
    - 配置自動打包相關的參數
  - 2.4、webpack中的加載器
  - - 通過loader打包非js模塊
    - loader的調用過程如圖所示：
    - 2.5、webpack中加載器的基本使用
    - 打包處理css文件
    - 打包處理less文件
    - 打包處理scss文件
    - 配置postCSS自動添加css的兼容前綴
    - 打包樣式表中的圖片和字體文件
    - 打包處理js文件中的高級語法
- 3、Vue單文件組件
- - 3.1、傳統組件的問題和解決方案
  - 3.2、Vue單文件組件的基本用法
  - 3.3、webpack中配置vue組件的加載器
  - 3.4、在webpack項目中使用vue
  - 3.5、webpack打包發布

webpack打包，

目標：

能夠知道有哪些模塊化的相關規范
　　能夠使用webpack
　　能夠使用Vue單文件組件

1、模塊化相關規范

1.1、模塊化概述

傳統開發模式的主要問題
命名沖突
文件依賴
通過模塊化解決上述問題
模塊化就是把單獨的一個功能封裝到一個模塊（文件）中，模塊之間相互隔離，但是可以通過特定的接口公開內部成員，也可以依賴別的模塊。
模塊化開發的好處：

方便代碼的重用，從而提升開發效率，并且方便后期的維護。

1.2、瀏覽器端模塊化規范

AMD

Require.js(http://www.require.cn/)

在這里插入圖片描述

CMD

Sea.js(https://seajs.github.io/seajs/docs/)

在這里插入圖片描述

1.3、服務器端模塊化規范

CommonJS

模塊分為單文件模塊與包
模塊成員導出：module.exports和exports
模塊成員導入：require(‘模塊標識符’)

1.4、大一統的模塊化規范-ES6模塊化

在ES6模塊化規范誕生之前，JavaScript社區已經嘗試提出了AMD、CMD、CommonJS等模塊化規范。
但是，這些社區提出的模塊化標準，還是存在一定的差異性與局限性、并不是瀏覽器與服務器通用的模塊化標準，例如：
AMD和CMD適用于瀏覽器端的JavaScript模塊化
CommonJS適用于服務器端的JavaScript模塊化
因此，ES6語法規范中，在語言層面上定義了ES6模塊化規范，是瀏覽器與服務器通用的模塊化開發規范。
ES6模塊化規范中定義：

每個js文件都是一個獨立的模塊
導入模塊化成員使用import關鍵字
暴露模塊化成員使用export關鍵字

1.Node.js中通過 babel 體驗ES6模塊化

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
npm install --save @babel/polyfill
項目跟目錄創建文件babel.config.js
babel .config .js 文件內容如右側代碼
通過npx babel-node index.js執行代碼
babel.config.js

在這里插入圖片描述

1.5、ES6模塊化的基本語法

默認導出與默認導入

默認導出語法
```
export default 默認導出的成員
```

默認導入語法

import 接收名稱 from '模塊標識符'

//當前文件模塊為m1.js
//定義私有成員a和c
let a = 10
let c = 20
//外界訪問不到變量d，因為它沒有暴露出去
let d = 30
function show(){}//將模塊中的私有成員暴露出去，供其他模塊使用
export default{a,c,show
}

默認導入語法import 接收名稱 from ‘模塊標識符’

//導入模塊成員
import m1 from './m1.js'
console.log(m1)
//打印輸出結果為：
//{a:10,c:20,show:[Function:show]}

注意：每個模塊中，只允許使用唯一的一次export default，否則會報錯！

實例：

模塊文件 m1.js

let a = 10
let c = 20
let d = 30function show(){console.log('1111111111111')
}// 1. 如果不導出的話，會輸出 空對象{}// 2. 導出模塊  - 只能導出一次
export default {a,c,show
}// 3. 導出2次會報錯  Only one default export allowed per module. (16:0)
// export default {
//     a,
//     c,
//     show
// }

引用模塊文件 index.js

// 導入 m1模塊
import m1 from './m1'
// 使用 m1模塊
console.log(m1)

在終端的運行命令

npx babel-node index.js

按需導入與按需導出

按需導出語法export let s1 = 10

//當前文件模塊為m1.js
//向外按需導出變量s1
export let s1 = 'aaa'
//向外按需導出變量s2
export let s2 = 'ccc'
//向外按需導出方法say
export function say = function(){}

按需導入語法 import {s1} from ‘模塊標識符’

//導入模塊成員，可以通過as給導入的成員起別名
import {s1,s2 as ss2,say} from './m1.js'
console.log(s1)//打印出aaa
console.log(ss2)//打印出ccc
console.log(say)//打印出{Function:say}

注意：每個模塊中，可以使用多次按需導出

在這里插入圖片描述

直接導入并執行模塊代碼

有時候，我們只想單純執行某個模塊中的代碼，并不需要得到模塊中向外暴露的成員，此時，可以直接導入并執行模塊代碼

//當前文件模塊為m2.js
//在當前模塊中執行一個for循環操作
for(let i = 0;i<3;i++){
console.log(i)
}//直接導入并執行模塊代碼
import './m2.js'

2、webpack

2.1、當前web開發面臨的困境

文件依賴關系錯綜復雜
靜態資源請求效率低
模塊化支持不友好
瀏覽器對高級JavaScript特性兼容程度較低
…

2.2、webpack概述

webpack是一個流行的前端項目構建工具（打包工具），可以解決當前web開發中所面面臨的困境。
webpack提供了友好的模塊化支持，以及代碼壓縮混淆、處理js兼容問題、性能優化等強大的功能，從而讓程序員把工作的重心放到具體的功能實現上，提高了開發效率和項目的可維護性。
目前絕大多數企業中的前端項目，都是基于webpack進行打包構建的。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-RIuxn2B4-1612441706181)(img/image-20210123093922182.png)]

2.3、webpack的基本使用

創建列表隔行變色項目

1、新建項目空目錄，并運行npm init -y命令，初始化包管理配置文件package.json
　　2、新建src源代碼目錄
　　3、新建src->index.html首頁
　　4、初始化首頁基本的結構
　　5、運行npm install jquery -s命令，安裝jQuery
　　6、通過模塊化的形式，實現列表隔行變色效果

在項目中安裝和配置webpack

1、運行npm install webpack webpack-cli -D命令，安裝webpack相關的包
　　2、在項目目錄中，創建名為webpack.config.js的webpack配置文件
　　3、在webpack的配置文件中，初始化如下基本配置：

? webpack.config.js文件（在根目錄中）

module.export = {mode: 'development' // mode用來指定構建模式 （開發階段mode的值為development；產品上線的時候mode的值為 ptoduct）
}

4、在package.json配置文件中的script節點下，新增dev腳本如下：

"script":{"dev":"webpack"//script節點下的腳本，可以通過npm run執行
}

在package.json文件中，加上 “dev”: “webpack”

在這里插入圖片描述

? 5、在終端中運行npm run dev命令，啟動webpack進行項目打包

打包完以后就可以運行.html文件了，如果項目文件有修改的話，要重新打包在終端中運行npm run dev命令，然后運行項目

列表隔行變色的實例：

index.html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="./index.js"></script> --><script src="../dist/main.js"></script>
</head>
<body><ul><li>這是第1個li</li><li>這是第2個li</li><li>這是第3個li</li><li>這是第4個li</li><li>這是第5個li</li><li>這是第6個li</li><li>這是第7個li</li><li>這是第8個li</li><li>這是第9個li</li></ul></body>
</html>

index.js 文件（只打包了.js文件）

import $ from 'jquery'$(function () {// 奇數$('li:odd').css('backgroundColor', 'red')// 偶數$('li:even').css('backgroundColor', 'lightblue')})

在這里插入圖片描述

配置打包的入口與出口

1、webpack的4.x版本中默認約定：
　　2、打包的入口文件為src -> i ndex.js
　　3、打包的輸出文件為dist -> main.js
　　4、如果要修改打包的入口與出口，可以在webpack.config.js中增加如下配置信息：

const path = require('path')//導入node.js中專門操作路勁的模塊
module.export = {entry:path.join(_dirname,'./src/index.js'),//打包入口文件的路徑output:{path:path.join(_dirname,'./dist'),//輸出文件的存放路徑filename:'bundle.js'//輸出文件名稱}
}

實例：

在配置文件webpack.config.js文件中，重置打包的入口和出口：

const path = require('path')module.exports = {// 編譯模式mode: 'development',/* -------------- 配置打包文件的入口與出口 （要先引入path模塊）--------------- */entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路徑output: {path: path.join(__dirname, './dist'), // 輸出文件的存放路徑filename: 'bundle.js'  // 輸出文件的名稱}
}

npm run dev打包

在.index.html文件中，重新導入打包后的輸出文件：bundle.js

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="./index.js"></script> --><!-- 引入打包（npm run dev）后的輸出文件/dist/main.js --><!-- <script src="../dist/main.js"></script> --><!-- 引入打包（npm run dev）后的輸出文件/dist/bundle.js --><script src="../dist/bundle.js"></script></head>
<body><ul><li>這是第1個li</li><li>這是第2個li</li><li>這是第3個li</li><li>這是第4個li</li><li>這是第5個li</li><li>這是第6個li</li><li>這是第7個li</li><li>這是第8個li</li><li>這是第9個li</li></ul></body>
</html>

運行index.html文件

配置webpack的自動打包功能

運行npm install webpack-dev-server -D命令，安裝支持項目自動打包的工具
修改package.json -> scripts中的dev命令如下：

"scripts":{"dev":"webpack-dev-server"
}

在這里插入圖片描述

將src -> index.html中，script腳本的引用路徑，修改為"/buldle.js"
運行npm run dev命令，重新進行打包

運行：

在瀏覽器中訪問http://localhost:8080地址，查看自動打包效果
　　注意：
　　　　webpack-dev-server會啟動一個實時打包的http服務器
　　　　webpack-dev-server打包生成的輸出文件，默認放到了項目根目錄中，而且是虛擬的、看不見的

配置html-webpack-plugin生成預覽頁面

作用：打開網址后可以直接看到運行效果，不用再去找運行文件了

配置的步驟：

1、運行npm install html-webpack-plugin -D命令，安裝生成預覽頁面插件
　　2、修改webpack.config.js文件頭部區域，添加如下配置信息：

//導入生成預覽頁面的插件，得到一個構造函數
const HtmlWebpackPlugin = require('html-webpack-plugin')
//創建插件的實例對象
const htmlPlugin = new HtmlWebpackPlugin({template:'./src/index.html',//指定要用到的模板文件filename:'index.html'//指定生成的文件名稱，該文件存在于內存中，在目錄中不顯示
})

3、修改webpack.config.js文件中向外暴露的配置對象，新增如下配置節點：

module.exports = {plugins:[htmlPlugin]//plugins數組是webpack打包期間會用到的一些插件列表
}

在瀏覽器中輸入 http://localhost:8080/ 就可以看到運行結果了。

配置自動打包相關的參數

在打包npm run dev后, 會自動打開瀏覽器運行，不需要手動輸入網址。

//package.json中的配置
//--open打包完成后自動打開瀏覽器頁面
//--host配置ip信息
//--port配置端口
"scripts":{"dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
},

在這里插入圖片描述

2.4、webpack中的加載器

通過loader打包非js模塊

在實際開發過程中，webpack只能打包處理以.js后綴名結尾的模塊，其它非.js后綴名結尾的模塊，webpack默認處理不了，需要調用loader加載器才可以正常打包，否則會報錯！
loader加載器可以協助webpack打包處理特定的文件模塊，比如：

less-loader可以打包處理.less相關的文件
sass-loader可以打包處理.scss相關的文件
url-loader可以打包處理css中與url路徑相關的文件

loader的調用過程如圖所示：

在這里插入圖片描述

2.5、webpack中加載器的基本使用

在這里插入圖片描述

css、LESS、scss、PostCSS、JavaScript、Image/Font、Vue

打包處理css文件

運行npm i style-loader css-loader -D命令，安裝處理css文件的loader
在webpack.config.js的module->rules數組中，添加loader規則如下：

//所有第三方文件模塊的匹配規則
module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']} // 順序：style-loader ， css-loader 是不能改變的// 先調用 css-loader ，再調用style-loader，把執行結果給webpack]
}

在這里插入圖片描述

在編輯好css文件后，在index.js（自定義）文件中引入該less文件，然后打包，自動運行

其中，test表示匹配的文件類型，use表示對應要調用的loader
注意：
　　use數組中指定的loader順序是固定的
　　多個loader的調用順序是從后往前調用的

打包處理less文件

1、運行npm i less-loader less -D命令
　　2、在webpack.config.js的module->rules數組中，添加loader規則如下：

//所有第三方文件模塊的匹配規則
module:{rules:[{test:/\.less$/,use:['style-loader','css-loader','less-loader']}]
}

在編輯好less文件后，在index.js（自定義）文件中引入該less文件，然后打包，自動運行

打包處理scss文件

運行npm i sass-loader node-sass -D命令
在webpack.config.js的module->rules數組中，添加loader規則如下：

//所有第三方文件模塊的匹配規則
module:{rules:[{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}]
}

在編輯好scss文件后，在index.js（自定義）文件中引入該lscss文件，然后打包，自動運行

配置postCSS自動添加css的兼容前綴

解決不同瀏覽器中的兼容問題。

1、運行npm i postcss-loader autoprefixer -D命令
　　2、在項目根目錄中創建postcss的配置文件postcss.config.js,并初始化如下配置：

const autoprefixer = require('autoprefixer')//導入自動添加前綴的插件
module.exports = {plugins:[autoprefixer]//掛載插件
}

3、在webpack.config.js的module->rules數組中，修改css的loader規則如下：

//所有第三方文件模塊的匹配規則
module:{rules:[{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}]
}

打包樣式表中的圖片和字體文件

運行npm i url-loader file-loader -D命令
在webpack.config.js的module->rules數組中，添加loader規則如下：

module:{rules:[{test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use: 'url-loader?limit=11847'// limit用來指定圖片的大小 // 如果limit的值大于或等于圖片大小，會轉為base64圖片；// 如果limit的值小于圖片的大小，會轉為路徑}]
}

其中？之后是loader的參數項。
limit用來指定圖片的大小，單位是字節（byte），只有小于limit大小的圖片，才會被轉為base64圖片。

在這里插入圖片描述

打包處理js文件中的高級語法

安裝babel轉化器相關的包：npm i babel-loader @babel/core @babel/runtime -D
安裝babel語法插件相關的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
在項目根目錄中，創建babel配置文件babel.config.js并初始化基本配置如下：

module.exports = {presets:['@babel/preset-env'],plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

在webpack.config.js的module->rules數組中，添加loader規則如下：

//exclude為排除項，表示babel-loader不需要處理node_modules中的js文件
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}

3、Vue單文件組件

3.1、傳統組件的問題和解決方案

問題：
　　　　全局定義的組件必須保證組件名稱不重復
　　　　字符串模板缺乏語法高亮，在HTML有多行的時候，需要用到丑陋的
　　　　不支持CSS，意味著當HTML和JavaScript組件化時，CSS明顯被遺漏
　　　　沒有構建步驟限制，只能使用HTML和ES5 JavaScript，而不能使用預處理器（如：Babel）
　　解決方案：
　　　　爭對傳統組件問題，Vue提供了一個解決方案——使用Vue單文件組件。

3.2、Vue單文件組件的基本用法

單文件組件的組成結構

template：組件的模板區域
script：業務邏輯區域
style：樣式區域

示例：

<template>
//這里用于定義Vue組件的模板內容    
</template><script>
//這里用于定義Vue組件的業務邏輯
export default{data(){return {}},//私有數據methods:{}//處理函數
//...其他業務邏輯
}
</script>// 組件的私有樣式 scoped
<style scoped>
//這里用于定義組件的私有樣式
</style>

實例 App.vue單文件組件：

<template><div><h1>這是 APP 組件</h1></div>
</template><script>//這里用于定義Vue組件的業務邏輯export default {data() {return {};}, //私有數據methods: {}, //處理函數//...其他業務邏輯};
</script><style scoped>h1 {color: brown;}
</style>

3.3、webpack中配置vue組件的加載器

1、運行npm i vue-loader vue-template-compiler -D命令
2、在webpack.config.js配置文件中，添加vue-loader的配置項如下：

const VueLoaderPlugin = require('vue-loader/lib/plugin')module.export = {plugins:[//...其他插件new VueLoaderPluign()//請確保引入這個插件],module:{rules:[//...其他規則{test:/\.vue$/,use:'vue-loader'}]}}

3.4、在webpack項目中使用vue

1、運行npm i vue -S安裝vue
2、在src->index.js入口文件中，通過import Vue from 'vue’來導入vue構造函數
3、創建vue的實例對象，并指定要控制的el區域
4、通過render函數渲染App根組件
示例：

//1、導入Vue構造函數
import Vue from 'vue'
//2、導入App根組件
import App from './components/App.vue'const vm = new Vue({//3、指定vm實例要控制的頁面區域el:'#app',//4、通過render函數，把指定的組件渲染到el區域中render:h=>h(App)
})

3.5、webpack打包發布

上線之前需要通過webpack將應用進行整體打包，可以通過package.json文件配置打包命令：

//在package.json文件中配置webpack打包命令
//該命令默認加載項目根目錄中的webpack.config.js配置文件
"scripts":{//用于打包的命令"build":"webpack -p",//用于開發調試的命令"dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000",
},

在這里插入圖片描述