Webpack5 搭建Vue项目（进阶版）
提示：中间隔了好长时间，我胡汉三又回来继续更新了！！！😂😂😂
前言
提示：文章涉及的一些内容仅供参考：
大多数情况下，大家在项目开发的过程中，基本很少去说让开发人员去自助的搭建一个Vue项目。基本都是使用现成的一些模版项目，直接在上面进行一个二次的开发（当然这样也是最节省时间！！！！！）
一、进阶版本有哪些特点？
1. 首先进阶版本对【开发环境】和【线上环境】的配置进行了区分。2. 本文的【示例】主要是代理服务器的一个体现（主要是有这样的思想，也方便后续想要对项目进行懒加载，分包等优化配置进行环境区分。便于管理项目）
这里就不做过多的赘述了，大家可以看下面的第二步骤
二、主要的文件代码如下
1.设置一个公共配置 webpack.common文件
代码如下（示例）：
const path =require('path')
const HtmlWebpackPlugin =require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
module.exports={
entry:'./src/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].bundle.js',
clean: true,
},
module:{
rules:[
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins:[new HtmlWebpackPlugin({
template:'./public/index.html',
title:'webpackTest',
filename:'index.html'
}),new VueLoaderPlugin()]
}
2.设置一个【dev】config文件
代码如下（示例）：
const {merge}=require('webpack-merge')
const common =require('./webpack.common.js')
module.exports=merge(common,{
mode:'development',
devServer:{
static: './public',
open:true,
}
})
该处使用的url网络请求的数据。
3.设置一个【prod】config文件
const {merge}=require('webpack-merge')
const common =require('./webpack.common.js')
module.exports=merge(common,{
mode:'production'
})
三、配置 package.json文件
1.代码如下
// dev 代表的就是开发环境
"dev":"webpack serve --config ./webpack.dev.js",
//build 代表的是线上环境
"build":"webpack --config ./webpack.prod.js"
总结如下（一定要看）
根据上面的思路，我们可以确定。如果后续我们的项目体积太大，就可以在prod.js中去配置对应的 webpack plugin去满足我们的项目分包，懒加载等打包的操作文章来源：https://www.toymoban.com/news/detail-704458.html
1. 后续会去更新，如何在自己的项目中集成 eslint 和 prettier 工具去管理咱们项目的代码规范问题 和 2. 集成到Git的生命周期中的代码提交监测和修复的功能文章来源地址https://www.toymoban.com/news/detail-704458.html
到了这里，关于Webpack5 搭建Vue项目（进阶版）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
