舊項目的問題

作用域問題

• return 拋出賦給變量

如何解決代碼拆分問題

• module.exports()拋出模塊
• require()接受模塊

如何讓游覽器支持node模塊

下一代構建工具 Vite

主角 ：webpack

• 它可以幫助我們打包javascript的應用程序，
• 同時支持es的模塊化以及commonjs
• 可以擴展支持很多的靜態資源打包，圖片，字體，樣式等
• 只能理解js和json這樣的文件
• 出色的功能：除了引入js還可以使用內置的資源模塊

引用千峰教育一個圖：

安裝webpack

安1：npm init -y
安2：npm install webpack webpack-cli --save-dev
安3： npm install html-webpack-plugin -D

• 執行完前兩個會產生三個文件，第三個是為了自動引入資源
  

1，mode的選項

  mode: 'none', //不展示編譯時候的警告，還可以選擇'development'

2，使用source map 精準定位錯誤行數

• 當我們游覽器報錯，點擊報錯內容時，發現報錯的指向不是源文件時候，不好排除錯誤

 devtool: 'inline-source-map', //可以精準的鎖定出錯位置行數,并且打包出的文件不再是亂碼

3，使用watch mode(觀察模式)，自動運行

• 每次編譯代碼，都需要手動運行npx webpack會顯得很麻煩
• 運行 npx webpack --watch
• 但還有點問題，現在弄完還需要游覽器再刷新一下，如何自動刷新游覽器！

4，使用webpack-dev-server工具，自動刷新

• 安4. npm install webpack-dev-server -D
• 配置里面添加

 devServer: {static: './dist', //需要熱模塊更新的文件},

自定義webpack配置初始化代碼

在本地開發環境里安裝，所以加-D

// path.resolve(_dirname,'./dist')，獲取文件的絕對路徑，參數一，代表當前文件的物理路徑，參數2是基于這個路徑下的文件路徑
const path = require('path');
// HtmlWebpackPlugin，可以自動引入資源文件
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {// 入口文件的地址entry: './src/index.js',output: {// 指定輸出文件的文件名filename: 'budle.js',// 指定輸出路徑,這個要設置為絕對路徑,：webpack.config.js配置文件中----" dirname " 必須為兩個下劃線“_ _”，否則打包報錯path: path.resolve(__dirname, './dist'),// 打包前清理上一次無用的打包內容clean: true,},// 不展示編譯時候的警告，還可以選擇'development'mode: 'none',// 可以精準的鎖定出錯位置行數,并且打包出的文件不再是亂碼devtool: 'inline-source-map',plugins: [// 創建一個插件的實例對象new HtmlWebpackPlugin({template: './index.html', // 模板filename: 'app.html', // 輸出的文件名,inject: 'body', // 自定義標簽的放置位置,默認在head}),],//運行路徑devServer: {static: './dist', //需要熱模塊更新的文件},
};

webpack處理資源模塊（asset module）

• 資源模塊的類型，稱之為asset module type
• 四種類型

asset/resource

• 會發送一個單獨的文件并導出URL

output: {filename: 'budle.js',path: path.resolve(_dirname, './dist'), clean: true, // assetModuleFilename: 'images/test.png'//方法2：定義資源模塊的輸出包名//但是，不能每個文件名都叫這個名，所以要根據文件的內容來生成一個哈希的字符串,生成后綴名assetModuleFilename: 'images/[contenthash].[ext]', },
moduleS: {//加載資源模塊rules: [{test: /\.png$/,type: 'asset/resource', //資源類型generator: {//方法1，優先級高filename: 'images/[contenthash][ext]', //修改生成的文件的文件名},},],},

asset/inline

• 會導出一個資源的Data URL，但不會產生打包文件
• 一般生成的就是游覽器可查看的base64格式的路徑

{test: /\.svg$/,type: 'asset/inline', //資源類型},

asset/source

• 會導出資源的源代碼，但不會產生打包文件

{test: /\.txt$/,type: 'asset/source', //資源類型},

asset

• 會在導出一個Data URL和發送一個單獨的文件之間自動進行選擇
• 自動的在resource和inline之間進行選擇，小于8kb的文件，將會
  視為inline模塊，否則會被視為resource模塊類型

管理資源（loader）

• 為了解決webpack只能理解js和json這樣的文件，理解不了其他文件的問題
• 支持鏈式調用且逆加載

css-loader

npm install css-loader -D
npm install style-loader -D //會幫助我們把css放置到頁面上

• 配置一下

{test: /\.css$/,use: ['style-loader', 'css-loader'],//順序不能顛倒
},

• 想要加載less，sass等這樣的css文件
• npm install less-loader less -D
• 配置完需要重新啟動一下

{test: /\.(css|less)$/,use: ['style-loader', 'css-loader'，'less-loader'],//順序不能顛倒
},

抽離style里代碼，并壓縮

• 目前，上面的css和頁面在一起
• 想要將style里面的這些代碼抽離出來
• npm Install mini-css-extract-plugin -D
• 依賴webpack5環境，接下來開始配置
• 步驟一：導入

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//MiniCssExtractPlugin，把css提取到單獨的文件中

• 步驟二：實例化一下

• 并且可以修改存放文件名
  
  

• 步驟三：添加loader
  

• 步驟四：文件打包了，但沒有壓縮

• 解決思路

• npm install css-minimizer-webpack-plugin -D

• 步驟一：導入

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
//壓縮css文件

• 步驟二：在優化的配置里面配置
  
• 步驟三：
  

知識點補充，在css里面加載圖片資源

知識點補充，加載fonts字體

• 像字體這樣的其他資源如何可以接收并加載任何文件，然后將其輸出到構建目錄

• 步驟一，配置
  

• 步驟二.
  

知識點補充，加載csv,tsv,xml數據

• 可以使用csv-loader和xml-loader
• npm install csv-loader xml-loader -D
  
• 步驟二：在使用的js文件中引入要使用的文件即可

import Xml from './assets/data.xml';
import Csv from './assets/data.csv';

自定義JSON模塊parser

• 替代特定的webpack loader，可以將任何toml，yaml或json5文件作為JSON模塊導入
• npm install toml yaml json5 -D
  
• 步驟三，正常引入使用即可
  
  

使用babel-loader轉換js文件

• npm install babel-loader @babel/core @babel/preset-env -D
• 因為webpack只能做js模塊化的打包，并不能轉化js里的代碼，所以babel-loader轉換
• 將ES6轉換成低版本的游覽器能夠識別的ES代碼
• 注意點;這樣寫會將nodemodule中的js也編譯，所以需要排除一下
• 使用exclude屬性
  

regeneratorRuntime插件

• 運行上述babel-loader的項目，發現有報錯regeneratorRuntime

• regeneratorRuntime是webpack打包生成的全局輔助函數，由babel生成，用于兼容async/await的語法
  

• 最后，修改一下配置