webpack5搭建Vue3項目（一）
我們在項目中使用yarn 來代替npm， 因為yarn 要比npm快。
- 初始化項目 yarn init
首先我們創建一個名為webpack5-vue3的文件夾，然后按住shift + 鼠標右鍵，選擇在當前位置打開終端。在終端中輸入命令yarn init -y
- 安裝webpack webpack-cli webpack-dev-server webpack-merge； 命令為
yarn add webpack webpack-cli webpack-dev-server webpack-merge -D - 編寫webpack配置文件,在當前目錄新建一個名為webpack.config.js的文件，當我們在命令行執行webpack時，webpack就會去讀取默認文件webpack.config.js文件的配置；
const path = require('path')
const resolve = (filePath) => {
return path.resolve(__dirname, filePath)
}
module.exports = env => ({
mode: env,
entry: {
main: resolve('src/main.js')
},
output: {
filename: 'js/[name].js',
path: resolve('servers/dist')
}
})
同時我們需要在package.json中設置運行的腳本命令,在scripts中添加如下的代碼
"scripts": {
"build": "webpack --mode=development"
},
根據上面的配置， 我們需要在當前文件夾下創建一個src文件夾，在src文件夾中創建一個main.js文件，這時候的文件目錄應該是這樣的。
這時候我們在命令行中執行 npm run build 就會在當前目錄中創建一個servers/dist文件夾，里面有一個main.js的文件。
簡單的配置到此就結束了， 接下來的內容
- ES6 -> ES5 loader的配置
- Vue3 在webpack中的配置
- typescript 在webpack中的配置
- css 、img、font等靜態資源的配置
- 打包配置、treeshaking的配置、分環境配置等，這里是終章吧；
github地址: https://github.com/ComponentTY/webpack5-vue3 給個星吧大佬，我們一起努力好嗎，感謝大佬。