Webpack5 搭建Vue项目(进阶版)

Webpack5 搭建Vue项目(进阶版)

提示:中间隔了好长时间,我胡汉三又回来继续更新了!!!😂😂😂


文章目录


前言

提示:文章涉及的一些内容仅供参考:

大多数情况下,大家在项目开发的过程中,基本很少去说让开发人员去自助的搭建一个Vue项目。基本都是使用现成的一些模版项目,直接在上面进行一个二次的开发(当然这样也是最节省时间!!!!!)


一、进阶版本有哪些特点?

1. 首先进阶版本对【开发环境】和【线上环境】的配置进行了区分。
2. 本文的【示例】主要是代理服务器的一个体现(主要是有这样的思想,也方便后续想要对项目进行懒加载,分包等优化配置进行环境区分。便于管理项目)

这里就不做过多的赘述了,大家可以看下面的第二步骤

二、主要的文件代码如下

1.设置一个公共配置 webpack.common文件

代码如下(示例):

javascript 复制代码
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文件

代码如下(示例):

javascript 复制代码
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文件

javascript 复制代码
const {merge}=require('webpack-merge')

const common =require('./webpack.common.js')

module.exports=merge(common,{
    mode:'production'
})

三、配置 package.json文件

1.代码如下

javascript 复制代码
    // dev 代表的就是开发环境
    "dev":"webpack serve --config ./webpack.dev.js",
    //build 代表的是线上环境
    "build":"webpack --config ./webpack.prod.js"

总结如下(一定要看)

根据上面的思路,我们可以确定。如果后续我们的项目体积太大,就可以在prod.js中去配置对应的 webpack plugin去满足我们的项目分包,懒加载等打包的操作

1. 后续会去更新,如何在自己的项目中集成 eslint 和 prettier 工具去管理咱们项目的代码规范问题2. 集成到Git的生命周期中的代码提交监测和修复的功能

相关推荐
小小爱大王2 小时前
AI 编码效率提升 10 倍的秘密:Prompt 工程 + 工具链集成实战
java·javascript·人工智能
半生过往2 小时前
2025 前端动效实战指南:Vue Bits & React Bits 深度拆解(功能 / 复用 / 高频问题处理)
前端·vue.js·react.js
程序员包打听2 小时前
Vitest 4.0 重磅发布:Browser Mode 正式稳定,前端测试进入新纪元
前端
BumBle2 小时前
UniApp 多页面编译优化:编译时间从10分钟到1分钟
前端
星链引擎3 小时前
大语言模型的技术突破与稳定 API 生态的构建
前端
还是大剑师兰特3 小时前
TypeScript 面试题及详细答案 100题 (71-80)-- 模块与命名空间
前端·javascript·typescript
BumBle3 小时前
使用 SortableJS 实现vue3 + Element Plus 表格拖拽排序
前端·vue.js·element
玉宇夕落3 小时前
HTML5 音乐敲击乐静态界面
前端
海在掘金611273 小时前
告别"拼写错误":TS如何让你的代码"字字精准"
前端
用户47949283569153 小时前
什么是XSS攻击,怎么预防,一篇文章带你搞清楚
前端·javascript·安全