Webpack5 搭建Vue（基础版）

满脑子技术的前端工程师

已于 2023-09-05 19:32:49 修改

阅读量1.4k

点赞数 1

分类专栏： Webpack和Vite打包工具文章标签： vue.js webpack javascript 前端

于 2023-05-12 17:13:44 首次发布

本文链接：https://blog.csdn.net/weixin_46022934/article/details/130645456

版权

Webpack和Vite打包工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

系列文章目录

前言（进阶版本如下🔗）

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

第一步：准备工作

1. 初始化项目

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

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

依赖说明如下

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

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

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

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

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

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

安装@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完整配置如下（有解释说明）

这里一定要注意，不明白的地方可以去查看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>