const path=require(“path”);
const {CleanWebpackPlugin}=require(“clean-webpack-plugin”);
const HtmlWebpackPlugin=require(“html-webpack-plugin”);
const {DefinePlugin}=require(“webpack”) ; //webpack内置的插件
const CopyWebpackPlugin=require(‘copy-webpack-plugin’);
const {VueLoaderPlugin}=require(“vue-loader/dist/index”)
module.exports={
mode:“development”,
devtool:“source-map”,
entry:“./src/main.js”,
output:{
path:path.resolve(__dirname,“./build”),
filename:“js/bundle.js” //将js文件放到js里面
},
module:{
rules:[
{
test:/.js$/,
loader:“babel-loader”
// use:
// {
// loader:“babel-loader”,
// options:{
// // plugins:[
// // “@babel/plugin-transform-arrow-functions”,
// // “@babel/plugin-transform-block-scoping”
// // ],
// // presets:[
// // “@babel/preset-env”
// // ]
// }
// }
},
{
test:/\.(less|css)$/,
//1.loader语法糖
// loader:"css-loader"
//2.完整写法
use:[
"style-loader",
"css-loader",
"less-loader",
"postcss-loader"
// {
// loader:"postcss-loader",
// options:{
// postcssOptions:{
// plugins:[
// require("autoprefixer")
// ]
// }
// }
// }
]
},
// {
// test:/\.less$/,
// use:[
// "style-loader",
// "css-loader",
// "less-loader"
// ]
// },
// {
// test:/\.(jpe?g|gif|png|svg)$/,
// use:[
// {
// loader:"url-loader",
// options:{
// // outputPath:"img", //放到哪个文件夹下
// name:"img/[name]_[hash:6].[ext]",//文件名
// limit:120*1024,
// esModule:false, //关闭url-loader es6 模块化,使用commonjs解析
// }
// }
// ],
// type:"javascript/auto"//不会出现2张图片
// },
// {
// test:/\.(jpe?g|svg|gif|png)$/,
// type:"asset",
// generator:{
// filename:"img/[name]_[hash:6][ext]"
// },
// parser:{
// dataUrlCondition:{
// maxSize:120*1024,
// }
// }
// },
{
test:/\.(jpe?g|png|gif|svg)$/,
type:"asset",
generator:{
filename:"img/[name]_[hash:6][ext]"
},
parser:{
dataUrlCondition:{
maxSize:20*1024
}
}
},
{
test:/\.(eot|ttf|woff2?)$/,
type:"asset/resource",
generator:{
filename:"font/[name]_[hash:6][ext]"
}
},
{
test:/\.vue$/,
loader:"vue-loader"
}
]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:‘./public/index.html’,
title:“哈哈哈哈”
}),
new DefinePlugin({
BASE_URL:“‘./’”,
VUE_OPTIONS_API:true,
VUE_PROD_DEVTOOLS:false,
VUE_PROD_HYDRATION_MISMATCH_DETAILS:false
}),
new CopyWebpackPlugin({
patterns:[
{
from:“public”,
globOptions:{
ignore:[
“**/index.html”
]
}
}
]
}),
new VueLoaderPlugin()
]
}