Webpack5 搭建Vue（基础版）

系列文章目录

---

---

前言（进阶版本如下）

1. 一般情况下，大家都是通过使用VueCLI去搭建项目 或者 直接接手开发并维护现有的项目。
2. 所以今天就想着把之前搭建项目的经历总结一下
3. ：Webpack搭建Vue进阶版

第一步：准备工作

1. 初始化项目

//执行下代码，然后一路 【回车】就可以了。
npm init 

2. 准备工作（安装依赖）

依赖说明如下

1. 创建项目文件夹 ：
   【静态文件夹：public】、【code文件夹：src】、【webpack配置：webpack.config.js】

2. 安装webpack、webpack-cli ：
   ①：主要是进行 enrty、output、mode、module(loader匹配规则)、devServe、plugin 等模块。

3. 安装 css-loader、style-loader
   （在module中配置，可参考webpack官网）

4. 安装 webpack-dev-server
   （本地服务器）

5. 安装 html-webpack-plugin
   （生成HTML模板）

6. 安装@babel/core 、@babel/preset-env、babel-loader
   （转译成js语言）

7. 安装@vue/compiler-sfc、vue-loader、vue-template-compiler
   （script标签、vue文件:https://vue-loader.vuejs.org/guide/#vue-cli）

依赖code如下：

可以在这里一步到位！！！！

一定要注意依赖的版本问题！！！！！！！！！！！

 "dependencies": {
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.2",
    "vue": "^3.2.36",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.3"
  },
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/preset-env": "^7.21.5",
    "babel-loader": "^9.1.2",
    "vue-loader": "^17.0.1",
    "vue-template-compiler": "^2.7.14",
    "webpack": "^5.82.0"
  }

依赖安装如下图：

第二步：编写webpack.config.js

1. 配置字段说明

entry：入口
output：打包后的出口
mode：开发环境
module：配置loader
devServe：本地服务器
plugins：配置插件

2. webpack.config.js完整配置如下（有解释说明）

1. 这里一定要注意，不明白的地方可以去查看webpack，不要跟着感觉走！！！！！！

//导入path模块
const path = require("path");
//导入模版插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//导入Vue-loader（插件和loader都要配置）
const { VueLoaderPlugin } = require("vue-loader");

//这一步大家都很详细
/* 
  entry：入口
  output：打包后的出口
  mode：开发环境
  module：配置loader
  devServe：本地服务器
  plugin：配置插件
*/
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js", //①、避坑
  },
  mode: "development",
  module: {
    //②.问题二：单词拼写错误（致命）
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
  plugin: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      filename:'index.html'
    }),
    new VueLoaderPlugin(),
  ],
  //可以配置自动打开（也可以通过指令控制）
  devServer: {
    static: "./public",
  },
};

---

第三步：src下的文件

1.main.js

import { createApp } from 'vue'
import App from './App.vue'


createApp(App).mount('#app')

2.app.vue文件

<template>
    <div>webpack5搭建vue3教程</div>
    //这里是我自己的npm包，你们可以不管
    <DateTime></DateTime>
  </template>
  <script>
  import {DateTime} from 'test-components-date'
  export default {
    name:'App',
    components:{DateTime}

  }
  </script>
  <style>
  
  </style>

第四步：问题汇总(关于第二步出现的问题)

1.打包文件名称问题（需要分片处理）

个区块将资产发送到相同的文件名index.js

2. 拼写问题

3. 模版插件的使用问题等（这里就不一一列举了！！！）

总结（进阶版 如下链接）

希望对想了解配置过程的‍（‍）有帮助

Webpack搭建Vue进阶版

这期间有去了解过，网上的其他人写的一些搭建过程。个人感觉：对初学者一点也不友好，要么复杂的看不懂，要么就是逻辑梳理太乱了。希望总结的这篇文章可以帮助到初学的大家。（后面还会，更新Webpack搭建Vue-CLI进阶版）