vue项目基础webpack配置

strongbuger

于 2021-06-09 15:52:17 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/strongbuger/article/details/117745328

本文详细介绍了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:/.vue $KaTeX parse error: Expected 'EOF', got '}' at position 40: \dots-loader' }̲,{ te\dots$ /,
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’
]
}]
}