const path = require("path");
// 引入html-webpack-plugin插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 配置代码
module.exports = {
// 入口
entry: "./src/main.js",
// 出口
output: {
// 解析当前相对路径的绝对路径
path: path.join(__dirname, "./dist/"),
// 重命名生成后的文件名
filename: "index.js",
// 路径
publicPath: "/"
},
// 模式
mode: "development",
// 监听
watch: true,
// 编译配置
devServer: {
// 自动在浏览器运行
open: true,
// 热更新
hot: true,
// 是否压缩
compress: true,
// 端口
port: 3000,
// 指定编译后文件路径
contentBase: './src' ,
// 本地代理解决跨域问题
proxy:{
// 当请求以/api开头的地址时会将请求转发到http://192.168.****/api的服务器
'/api': 'http://192.168.*****'
}
// 如不想转发的服务器后追加/api
proxy: {
'/api': {
// 目标地址
target: 'http://192.168.*****',
// 路径重写 pathRewrite
pathRewrite: {
'^/api': ''
}
}
}
},
// 插件
plugins: [
new HtmlWebpackPlugin({
filename: "index.html", // 文件名
template: "./src/index.html" // 模板
}),
],
// 模块
module: {
rules: [
// css配置loader
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
// less配置loader
{ test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
// sass配置loader
{
test: /\.s(a|c)ss$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
// img配置loader
{
test: /\.(jpg|jpeg|png|bmp|gif)$/,
use: {
loader: "url-loader",
options: {
limit: 5 * 1024,
outputPath: "images",
// [name]图片名 [hash:6]生成随机hash值 :6自取前四位 [ext]图片后缀
name: "[name]-[hash:6].[ext]"
}
}
},
// 字体图标配置loader
{ test: /\.(woff|woff2|eot|svg|ttf)$/, use: "url-loader" },
{
test: /\.js$/,
use: {
loader: "babel-loader"
options: {
presets: ['@babel/env'],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-transform-runtime'
]
}
},
// 排除指定文件打包
exclude: /node_modules/
}
]
},
// source-map,开发时控制台报错信息指定行更准确
devtool: 'cheap-module-eval-source-map'
};
webpack基础的一些配置
最新推荐文章于 2023-06-02 12:40:50 发布