亚洲性爱一区,久久嫩草精品视频

一前端工程化

小白眼中的前端開發(fā) vs 實際的前端開發(fā)

layui: https://layui.gitee.io/v2/docs/element/nav.html

什么是前端工程化

前端工程化的解決方案

早期的前端工程化解決方案：
? grunt（ https://www.gruntjs.net/ ）
? gulp（ https://www.gulpjs.com.cn/ ）

目前主流的前端工程化解決方案：
? webpack（ https://www.webpackjs.com/ ）
? parcel（ https://zh.parceljs.org/ ）// 開發(fā)第三方包用的多

二 webpack 的基本使用

什么是 webpack

創(chuàng)建列表隔行變色項目

在項目中安裝 webpack

在終端運(yùn)行如下的命令，安裝 webpack 相關(guān)的兩個包：
npm install webpack@5.42.1 webpack-cli@4.7.2 -D

在項目中配置 webpack

4.1 mode 的可選值

4.2 webpack.config.js 文件的作用

4.3 webpack 中的默認(rèn)約定

在 webpack 4.x 和 5.x 的版本中，有如下的默認(rèn)約定：
① 默認(rèn)的打包入口文件為 src -> index.js
② 默認(rèn)的輸出文件路徑為 dist -> main.js
注意：可以在 webpack.config.js 中修改打包的默認(rèn)約定

4.4 自定義打包的入口與出口

三 webpack 中的插件

webpack 插件的作用

webpack-dev-server

webpack-dev-server 可以讓 webpack 監(jiān)聽項目源代碼的變化，從而進(jìn)行自動打包構(gòu)建。

2.1 安裝 webpack-dev-server

運(yùn)行如下的命令，即可在項目中安裝此插件：
npm install webpack-dev-server@3.11.2 -D

2.2 配置 webpack-dev-server
① 修改 package.json -> scripts 中的 dev 命令如下：

② 再次運(yùn)行 npm run dev 命令，重新進(jìn)行項目的打包
③ 在瀏覽器中訪問 http://localhost:8080 地址，查看自動打包效果
注意：webpack-dev-server 會啟動一個實時打包的 http 服務(wù)器

2.3 打包生成的文件哪兒去了？
① 不配置 webpack-dev-server 的情況下，webpack 打包生成的文件，會存放到實際的物理磁盤上
? 嚴(yán)格遵守開發(fā)者在 webpack.config.js 中指定配置
? 根據(jù) output 節(jié)點指定路徑進(jìn)行存放
② 配置了 webpack-dev-server 之后，打包生成的文件存放到了內(nèi)存中
? 不再根據(jù) output 節(jié)點指定的路徑，存放到實際的物理磁盤上
? 提高了實時打包輸出的性能，因為內(nèi)存比物理磁盤速度快很多
2.4 生成到內(nèi)存中的文件該如何訪問？
webpack-dev-server 生成到內(nèi)存中的文件，默認(rèn)放到了項目的根目錄中，而且是虛擬的、不可見的。
? 可以直接用 / 表示項目根目錄，后面跟上要訪問的文件名稱，即可訪問內(nèi)存中的文件
? 例如 /bundle.js 就表示要訪問 webpack-dev-server 生成到內(nèi)存中的 bundle.js 文件

html-webpack-plugin

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通過此插件自定制 index.html 頁面的內(nèi)容。
需求：通過 html-webpack-plugin 插件，將 src 目錄下的 index.html 首頁，復(fù)制到項目根目錄中一份！

3.1 安裝 html-webpack-plugin
運(yùn)行如下的命令，即可在項目中安裝此插件：
npm install html-webpack-plugin@5.3.2 -D
3.2 配置 html-webpack-plugin

3.3 解惑 html-webpack-plugin
① 通過 HTML 插件復(fù)制到項目根目錄中的 index.html 頁面，也被放到了內(nèi)存中
② HTML 插件在生成的 index.html 頁面，自動注入了打包的 bundle.js 文件

devServer 節(jié)點

在 webpack.config.js 配置文件中，可以通過 devServer 節(jié)點對 webpack-dev-server 插件進(jìn)行更多的配置，
示例代碼如下：

注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必須重啟實時打包的服
務(wù)器，否則最新的配置文件無法生效！

四 webpack 中的 loader

loader 概述

在實際開發(fā)過程中，webpack 默認(rèn)只能打包處理以 .js 后綴名結(jié)尾的模塊。其他非 .js 后綴名結(jié)尾的模塊，
webpack 默認(rèn)處理不了，需要調(diào)用 loader 加載器才可以正常打包，否則會報錯！
loader 加載器的作用：協(xié)助 webpack 打包處理特定的文件模塊。比如：
? css-loader 可以打包處理 .css 相關(guān)的文件
? less-loader 可以打包處理 .less 相關(guān)的文件
? babel-loader 可以打包處理 webpack 無法處理的高級 JS 語法