/*
1、Commonjs规范 ==>在node中运行的
2、输出output 必须是绝对路劲
path:path.resolve 解析当前路相对路劲为绝对路劲
path:path.join(__dirname,'./dist') join 拼接路劲 __dirname 当前文件的跟文件路劲+'所定义的相对路劲'
*/
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode:'development', //默认为production(生产模式) 参数=>development(开发模式) 区别在于是否进行压缩打包
entry:'./src/js/index.js',
output:{
path:path.resolve('./dist'), //输出文件的路劲(绝对路径)
filename:'bundle.js' //输出文件名 ==>就是打包好了输出,让浏览器解析
},
devServer:{
open:true,
port:8090,
compress:true,
// contentBase:'./src',
hot:true,
},
plugins:[
new HtmlWebpackPlugin({
filename:'index.html', //输出文件名 ==>切换至其他的文件名最终生成的也是内存中的文件
template:'./index.html', //模板文件
}),
],
module:{
rules:[
{
test:/\.css$/,
// //webpack读取loader时，是从右到左的读取,会将css的文件交给最右(下)侧得loader处理
// //loader得执行顺序时链式调用
// //css-loader解析css文件,style-loader解析数据放在html渲染页面
use:['style-loader','css-loader',]
},
{
test:/\.less$/,
// //webpack读取loader时，是从右到左的读取,会将css的文件交给最右(下)侧得loader处理
// //loader得执行顺序时链式调用
// 转换过程 less-loader 将less文件转化为css文件 style-loader解析css文件 css-loader进行渲染
use:['style-loader','css-loader','less-loader']
},
{
test:/\.s(a|c)ss$/,
use:['style-loader','css-loader','sass-loader']
},
{
test:/\.(jpg|jpeg|png|bmp|gif)$/,
use:{
loader:'url-loader', //url-loader 是基于file-loader 封装的所以俩个loader都需要下载
option:{
limit:3*1024, //这个参数去配置当图片资源内容小于3kb时就以base64的字符串的输出(减少服务器的请求)
outputPath:'image', //输出文件路劲 =>输出在项目的根目录下=>直接保存文件名即可。
name:'[name]-[hash:6].[ext]', //name=>原文件名+hash:前6位 +默认扩展名
}
}
},
{
test:/\.(woff|woff2|eot|svg|ttf)$/,
use:['url-loader']
},
]
}
}
