構建工具

當我們習慣了在node中編寫代碼的方式后，在回到前端編寫html、css、js這些東西會感覺到各種的不便。比如:不能放心的使用模塊化規范(瀏覽器兼容性問題)、即使可以使用模塊化規范也會面臨模塊過多時的加載問題。我們就迫切的希望有一款工具可以對代碼進行打包，將多個模塊打包成一個文件。這樣一來即解決了兼容性問題，又解決了模塊過多的問題。構建工具就起到這樣一個作用，通過構建工具可以將使用ESM規范編寫的代碼轉換為舊的JS語法，這樣可以使得所有的瀏覽器都可以支持代碼。

webpack介紹

src 是把所有的源碼放在了這個src 里面。
我們使用打包工具的前提是這個項目得是一個node項目，所以我們在使用webpack要先把項目初始一下 yarn init -y,會出現一個package.json,初始化就完事了。然后就安裝依賴 yarn add -D webpack webpack-cli. -D表示的是開發依賴，區分一下是開發的時候要用的還是運行的時候要用的。然后再項目中創建src 目錄，然后編寫代碼，index.js是默認主目錄，是入口文件。然后執行‘’yarn webpack 來對代碼進行打包，打包好觀察dist目錄。dist目錄就是打包后的版本。dist目錄里有個main.js，就是打包后的代碼，index.js是源碼。webpack-cli 是命令行工具，沒有安裝不能用yarn webpack打包。

配置文件簡介

webpack.config.js是給node.js看的，所以要遵循node的模塊化規范。怎么區分，src 以內的遵循前端規則，src以外的遵循node的開發規范。

entry

entry 是用來指定打包時的主文件（入口文件 ） 默認是 ./src/index.js。一般不改。

output

loader

webpack默認情況下,只會處理js文件，如果我們希望它可以處理其他類型的文件，則要為期引入loader。loader 讓 webpack 能夠去處理其他類型的文件（默認只能處理js文件），并將它們轉換為有效 模塊，以供應用程序使用，以及被添加到依賴圖中。
使用步驟：
1.安裝對應的loader： yarn add css-loader style-loader -D.
2.配置方式：

css-loader 只負責打包，style-loader 負責渲染生效【單一職責原則】
loader 執行順序為從后向前執行，因此use的數組順序不能調換

babel

在編寫js代碼時，經常需要使用一些js中的新特性，而新特性在舊的瀏覽器中兼容性并不好。此時就導致我們無法使用一些新的特性。babel就是這樣一個工具，可以將新的js語法轉換為舊的js，以提高代碼的兼容性。

使用步驟
1.安裝 npm install -D babel-loader @babel/core @babel/preset-env

2.配置

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

3.在package.json中設置兼容列表

插件

常用插件
html-webpack-plugin
這個插件可以在打包代碼后，自動在打包目錄生成html頁面
使用步驟：
1.安裝依賴 yarn add -D html-webpack-plugin
2.引入依賴 const HTMLPlugin = require(“html-webpack-plugin”)
3.配置插件

開發服務器（webpack-dev-server）

安裝：yarn add -D webpack-dev-server
啟動：yarn webpack server–open（–open 表示啟動服務器后自動打開瀏覽器）
配置 webpack-watch 執行，（在本地文件夾中訪問）代碼發生變化時自動更新打包。
可以在package.json中配置
1.先用yarn add-D webpack-dev-server 安裝一下
2.就可以啟動了，在命令行打yarn webpack server
3.就會把我們的代碼布置在一個服務器中
4.直接訪問這個地址就行了

注意：在執行開發服務器之后，一定要在手動的執行yarn webpack，然后才能把打包的東西放在服務器里，不然可能拿到的不是最新的

soureMap

devtool:“inline-source-map” 把我們的源碼和編譯后的這種代碼給我們做成了一個映射

vite

概念：
vite也是前端的構建工具
相較于webpack,vite采用了不同的運行方式：
開發時，不對代碼打包，而是采用ESM（ES模塊）的方式來運行項目
在項目部署時，再對項目進行打包
vite的速度比webpack要快很多，使用也很方便（都配置好了）
本質上vite和webpack是打包工具，只是webpack比較底層，需要自己手動去配置。
ESM必須通過url加載頁面（也就是通過服務器運行，不是本身文件）
基本使用：
1.安裝開發依賴 yarn add -D vite
2.vite的源碼目錄默認就是項目的根目錄
再頁面中引入js文件的時候要指定 type = ‘module’
修改路徑直接在script 標簽中修改src屬性正確即可（webpack需要配置）
3.開發命令：
vite 啟動開發服務器
vite bulid 打包代碼
vite preview 預覽打包后代碼
4.使用命令構建項目

5.使用插件

需要使用ES6的模塊化（export default）去暴露文件（區別webpack使用require）