1.初始化項(xiàng)目
yarn init -y
?
?2.安裝依賴
yarn add -D webpack@5.75.0 webpack-cli@5.0.0
3.新建index.js
說明：寫入下面的一句話
console.log("hello webpack");
4.執(zhí)行命令
說明：如果沒有安裝webpack腳手架就不能執(zhí)行yarn webpack（webpack-cli）
yarn webpack?
?5. 打包后生成dist文件夾
6.修改package.json
說明：為yarn webpack起別名
{
"devDependencies": {
"webpack": "5.75.0",
"webpack-cli": "5.0.0"
},
"scripts": {
"build":"webpack"
}
}
?7.打包
?yarn build
?8.新建webpack.config.js
說明：注釋寫在了代碼里面了文章來源：http://www.zghlxwxcb.cn/news/detail-627379.html
const path=require("path")
module.exports={
mode:"production" , //設(shè)置打包模式,生產(chǎn)模式也就是項(xiàng)目上線配置,development模式是開發(fā)著模式
entry:"./src/index.js", //入口文件 默認(rèn) ./src/index.js,多個(gè)打包文件用數(shù)組包裹，也可以對(duì)象寫(可以指定打包后的文件)
output:{
// 配置打包后的地址
path:path.resolve(__dirname,"dist"), // __dirname表示表示當(dāng)前模塊文件夾的路徑 必須要絕對(duì)路徑
filename:"main.js" , //打包后文件名
clear:true, //自動(dòng)清理打包目錄 filename: '[name].js', [name]表示任意文件名
}
}
文章來源地址http://www.zghlxwxcb.cn/news/detail-627379.html
到了這里，關(guān)于Webpack5新手入門簡單配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![很合適新手入門使用的Python游戲開發(fā)包pygame實(shí)例教程-01[開發(fā)環(huán)境配置與第一個(gè)界面]](https://imgs.yssmx.com/Uploads/2024/01/823365-1.gif)
