首先聲明這是vue3+webpack；
在：
[零基礎(chǔ)學(xué)習(xí)Vue+webpack]之vue+webpack項目的基礎(chǔ)依賴項的安裝詳解（1）：http://www.itdecent.cn/p/0fa12aa731ff
中已經(jīng)對vue+webpack的基礎(chǔ)依賴項進行了安裝和講解，這篇文章繼續(xù)對項目的依賴項進行完善。
首先在package.json文件中的scripts加上"start": "webpack"；
然后執(zhí)行package.json中scripts的"start": "webpack"
也就是在編輯器vsCode的終端中輸入：npm run start
圖1
會出現(xiàn)如上圖提示，然后按照提示輸入：yes
如果出現(xiàn)了如下圖報錯：
圖2
可能就是本地的node版本與webpack不匹配，這時可以將node升級或者將webpack降級即可，本項目是更改的webpack，
webpack對應(yīng)的版本分別改成以下版本：（其中多加了webpack-cli和webpack-dev-server）
? ? "webpack": "^4.46.0",
? ? "webpack-cli": "^3.3.11",
? ? "webpack-dev-server": "^3.11.0"
圖3
如果沒有報錯，那么直接安裝webpack-cli、webpack-dev-server這兩個依賴即可；
然后刪除node_modules這個依賴項文件夾（或者將已經(jīng)下載的依賴項用命令進行卸載也行，卸載的命令是：npm uninstall 【需要卸載的依賴】）之后，
在終端中輸入：npm install
重新安裝package.json中的依賴項及其版本；
然后重新在終端中輸入：npm run start
執(zhí)行完成之后，項目中多出了一個dist的文件夾，里面包含了一個main.js的文件；
main.js 在該文件中可以找到在src文件夾下index.js中代碼，因為在沒有設(shè)置webpack的配置文件時，默認(rèn)就是打包的src/index.js這個文件；
此時表示能夠成功打包項目但是終端會提示未設(shè)置mode的警告；
如下圖：
圖4
這時就需要設(shè)置配置文件了，新建開發(fā)環(huán)境和生產(chǎn)環(huán)境的配置文件，分別為：
開發(fā)環(huán)境：webpack.dev.config.js? （在本地做項目開發(fā)的過程中使用的配置文件）
生產(chǎn)環(huán)境：webpack.prod.config.js（項目已完成并上線使用的配置文件）
然后對開發(fā)環(huán)境的配置文件進行編寫；
在webpack.dev.config.js文件中加入以下代碼：
module.exports = {
? ? mode:'development',
}
其中的'mode'選項沒有被設(shè)置的情況下，webpack將為這個值回退到'production'。
而'mode'設(shè)置選項有（開發(fā)）'development'和（生產(chǎn)）'production'兩種，為每個環(huán)境啟用默認(rèn)值。
你也可以把它設(shè)置為'none'來禁用任何默認(rèn)行為；
這里我們設(shè)置為'development'，因為目前項目屬于開發(fā)過程之中；
如下圖：
圖5
接著在package.json中的scripts對象中加入：
"dev-build-server": "webpack --config ./webpack.dev.config.js --progress"
表示根據(jù)webpack.dev.config.js這個配置文件進行打包；
在終端中輸入：npm run dev-build-server
進行再次打包，如下圖：
圖6
這是就不會出現(xiàn)之前的警告提示了；
以上是webpack對默認(rèn)文件進行打包，并且打包到默認(rèn)路徑的過程；
接下去就是對vue代碼進行打包的相關(guān)配置：
首先在package.json的devDependencies中加入以下代碼：
? ? "babel-loader": "^8.0.5",
? ? "@babel/core": "^7.17.8",
? ? "@babel/preset-env": "^7.16.11",
? ? "style-loader": "^1.2.1",
? ? "css-loader": "^3.5.3",
? ? "html-webpack-plugin": "^4.3.0",
? ? "vue-loader": "^16.0.0-beta.4",
? ? "@vue/compiler-sfc": "^3.2.33",
其中
babel-loader：這個loader主要作用是在Webpack打包的時候，用Babel將ES6的代碼轉(zhuǎn)換成ES5版本的。
@babel/core：作用是把 js 代碼分析成 ast ，方便各個插件分析語法進行相應(yīng)的處理。有些新語法在低版本 js 中是不存在的，如箭頭函數(shù)，rest 參數(shù)，函數(shù)默認(rèn)值等，這種語言層面的不兼容只能通過將代碼轉(zhuǎn)為 ast，分析其語法后再轉(zhuǎn)為低版本 js。
@babel/preset-env：在官網(wǎng)介紹是一款自動管理瀏覽器版本和babel語法轉(zhuǎn)換插件映射的一款工具。
style-loader：將所有的計算后的樣式加入頁面中,html頁面中插入css代碼。
css-loader：解析CSS樣式，可以用模塊的方式手動對象形式寫樣式，style-loader自動處理了這個注入。
html-webpack-plugin：將vue或者react編譯打包后的文件直接注入到html模板中。
vue-loader：是一個webpack的loader，是vue文件的一個加載器，主要用來處理vue組件文件，配合 webpack以及相關(guān)loader，來進行編譯模版、scoped CSS和熱重載。
@vue/compiler-sfc：@vue/compiler-sfc 替換掉了 vue-template-compiler，是vue3需要的依賴項。
以上這幾個庫簡單一點來說就是將vue的代碼解析轉(zhuǎn)化成瀏覽器能讀取并能實現(xiàn)效果顯示的工具。
接著在終端中輸入：npm install
下載以上加入的庫，使用npm install的好處就是一次性下載package.json所寫的依賴項，不用一個一個的去下載；
接下去就是繼續(xù)對webpack.dev.config.js文件進行配置：
代碼如下：
const path = require('path');
const { VueLoaderPlugin }=require("vue-loader")
var HtmlWebpackPlugin = require('html-webpack-plugin');? ? ? ? // 把打包后的文件直接注入到html模板中
module.exports = {
? ? mode:'development',? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 設(shè)置開發(fā)模式
? ? output:{
? ? ? ? path:path.resolve(__dirname,'./build/development'),? ? // 動態(tài)獲取出口路徑(絕對路徑)-文件編譯后的位置
? ? ? ? filename:'bundle.js'? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 出口文件名
? ? },
? ? module: {
? ? rules: [
{
test: /\.(js)$/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env'],
}
},
exclude: /node_modules/
},{
test:/\.(css)$/,
use:[{
loader:"style-loader"? ? ? ? ? ? ? ? ? // 將所有的計算后的樣式加入頁面中,html頁面中插入css代碼
},{
loader:"css-loader",? ? ? ? ? ? ? ? ? ? // 解析CSS樣式,可以用模塊的方式手動對象形式寫樣式,style-loader自動處理了這個注入
},//能夠使用類似@import 和 url(...)的方法實現(xiàn) require()的功能
]
},{
? ? ? ? ? ? ? ? test:/\.(vue)$/,
? ? ? ? ? ? ? ? use:{
? ? ? ? ? ? ? ? ? ? loader:"vue-loader"
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ],
},
? ? plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({ ? ? ? ? ? ? ? ? ? ? ? ? // 把打包后的文件直接注入到html模板中
title:'平臺',
template:path.join(__dirname, "./src/index.html"),? // 指定模板頁面
filename: 'index.html',? ? ? ? ? ? ? ? ? ? ? ? ? ? // 模板的名稱
inject: 'body',? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 將編譯的vue的js文件注入到模板頁面的body內(nèi)
})
],
}
加上以上代碼，vue項目編碼的相關(guān)配置就設(shè)置的差不多了，而以上代碼也有對關(guān)鍵對象屬性做對應(yīng)的注釋，如果有看不懂的可以留言交流；
接下去就可以開始正式的寫vue代碼了。
這篇文章先講到這里，下篇文章更精彩。
關(guān)注公眾號（月影WEB），了解更多的前后端知識；
歡迎大家關(guān)注互相交流學(xué)習(xí)；
