vue项目基础webpack配置

本文详细介绍了Webpack的基本配置方法,包括入口文件、输出设置、模块解析规则等,并演示了如何加载不同类型的资源文件,如CSS、图片及LESS等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

// 页面引入css
// import ‘@/assets/css/a.css’
// 引入img
//
// var a=require("@/assets/img/b.png")
const path = require(‘path’)
module.exports = {
mode:‘production’,
entry:{
index:path.join(__dirname,"/src/index.js")
},
output:{
publicPath: ‘’,//设置公共路径
path:path.join(__dirname,“lib”),//输出的文件夹
filename:“abc.js”,//输出的js文件名
},
resolve:{
alias:{
‘@’:path.resolve(__dirname,‘src’)//@代替src路径
},
extensions:["*",".js",".vue",".json"]
},
module:{
rules:[{
test:/.vueKaTeX parse error: Expected 'EOF', got '}' at position 40: …-loader' }̲,{ te…/,
use:[
‘style-loader’,
‘css-loader’
]
},{
test:/.(png|jpg|svg)?$/,
use:[{
loader:‘url-loader’,//url-loader和faile-loader引用一个即可
options:{
esModule:false,//这个属性不加会使页面引入的img[object Module]这种形式
}
}]
},{
test:’/.less/’,
use:[
‘style-loader’,
‘css-loader’,
‘less-loader’
]
}]
}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值