首页 > 其他分享 >webpack5 + vue3 从零配置项目

webpack5 + vue3 从零配置项目

时间:2024-11-10 14:18:33浏览次数:3  
标签:__ webpack5 vue 配置 loader webpack vue3 path js

前言

虽然在实际项目当中很少会从 0 到 1 配置一个项目,毕竟很多重复工作是没有必要的,脚手架将这些重复性的工作进行了整合,方便开发者使用。也正因如此,导致部分开发者过于依赖脚手架,却不清楚其内部的实现流程,因此通过从 0 到 1 去配置和搭建项目可以更好的理解开发中使用的脚手架都帮我们做了哪些事情。

准备工作

创建目录结构

这里直接使用 npm init vite@latest命令生成 vue3 最新的目录结构:

image.png

当然,需要对这个目录进行一些调整:

  • vite.config.js 换成 webpack.config.js:因为我们要基于 webpack5 对项目进行编译构建
  • 初始化新的 package.json:原本的 package.json 依赖了一些我们不需要的内容,因此直接删除重新初始化
  • 去除 index.html 中的 <script type="module" src="/src/main.js"></script>,因为这是 vite 需要的,但 webpack 并不需要

下面是调整后的目录结构:

image.png

安装基本依赖

下面列出了需要的一些基本依赖,其他的依赖在后面需要的时候在进行安装:

  • npm install vue@next
  • npm install webpack webpack-cli webpack-dev-server -D

webpack 进行基本配置

// webpack.config.js

const path = require('path')

module.exports = {
    entry: {
        path: './src/main.js'
    },
    output: {
        filename: 'assets/js/[name].[contenthash:6].js',
        path: path.resolve(__dirname, './dist')
    }
}

package.json 中创建脚本

// package.json

  "scripts": {
    "dev": "webpack server --mode=development",
    "build": "webpack --mode=production"
  }

针对不同文件类型进行配置 webpack

启动项目

完后以上准备工作之后,我们就可以通过 npm run dev 命令来启动项目,但是你会发现这样的错误:

在这里插入图片描述

其实就是 webpack 不能认识 .vue 文件,它需要我们提供一个 loader 对其进行处理,这个 loader 就是官方文档中提到的:

其中 @vitejs/plugin-vue 这个是 vite 才需要的,因此我们只需要 vue-loader@next@vue/compiler-sfc

注意:vue-loader 默认是处理 vue2 的,这里使用的是 vue3,所以要安装 vue-loader@next

webpack中处理 .vue 文件

首先通过 npm install vue-loader@next @vue/compiler-sfc -D 安装需要的依赖,然后在 webpack.config.js 中进行配置:

// webpack.config.js

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
   entry: {
       path: './src/main.js'
   },
   module: {
       rules: [
           {
               test: /\.vue$/,
               use: 'vue-loader'
           }
       ]
   },
   output: {
       filename: 'assets/js/[name].[contenthash:6].js',
       path: path.resolve(__dirname, './dist')
   },
   plugins: [
     new VueLoaderPlugin(),
   ]
}

配置完成之后,我们在通过 npm run dev 启动项目,不出意外的你将得到下面的错误:

在这里插入图片描述

显然 webpack 也不认识 <style></style> 中样式相关的内容,这一点大家都知道,那肯定是要使用 style-loadercss-loader

webpack中处理 <style></style> 样式相关的内容

首先通过 npm install style-loader css-loader -D 安装需要的依赖,然后在 webpack.config.js 中进行配置:

// webpack.config.js

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: {
    path: './src/main.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  output: {
    filename: 'assets/js/[name].[contenthash:6].js',
    path: path.resolve(__dirname, './dist'),
  },
  plugins: [
      new VueLoaderPlugin(),
  ]
}

配置完成之后,又一次通过 npm run dev 启动项目,不出意外的你将又一次得到下面的错误:

意思就是说 webpack 仍然无法识别图片类型的文件,如:.(png|jpg|jpeg|gif) 等,那么到了这里相信你灵光一闪,想到了需要使用 file-loader/url-loader,但在这我们不需要配置这两个 loader,因为我们使用的是 webpack5 ,是时候使用其中 资源模块(asset module) 的模块类型了.

配置 webpack 资源模块

废话不多说,直接上官方文档使用说明:

下面就是配置后的 webpack.config.js 内容:

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  entry: {
    path: './src/main.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[hash][ext]'
        }
      }
    ],
  },
  output: {
    filename: 'assets/js/[name].[contenthash:6].js',
    path: path.resolve(__dirname, './dist'),
  },
  plugins: [
      new VueLoaderPlugin()
  ]
}

这时候在通过 npm run dev 启动项目,发现终于没有报错了:

此时访问页面内容:

是不是会觉得

别慌问题不大,其实就是没有给 webpack 打包后的 js 代码指定模板.

为 webpack 指定模板

熟悉 webpack 的你肯定猜到要是用 html-webpack-plugin 插件,首先通过 npm install html-webpack-plugin -D 安装依赖,然后配置 webpack.config.js 文件:

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    path: './src/main.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[hash][ext]'
        }
      }
    ],
  },
  output: {
    filename: 'assets/js/[name].[contenthash:6].js',
    path: path.resolve(__dirname, './dist'),
  },
  plugins: [
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({
          template: path.resolve(__dirname, './index.html')
      })
  ]
}

此时,在重新通过 npm run dev 启动项目并访问页面:

image.png

至此,终于成功配置了一个简单的基于 vue3webpack5 的项目.

优化配置文件

通过 F12 打开页面控制台,你会看到这么一段警告信息:

其中 __VUE_OPTIONS_API____VUE_PROD_DEVTOOLS__ 对应的值都是 Boolean 类型,分别代表的是:

  • __VUE_OPTIONS_API__:表示是否支持 options api 的写法,默认是 true
  • __VUE_PROD_DEVTOOLS__:表示生产包是否要继续支持 devtools 插件,默认是 false

即便它们都有默认值,可以不进行设置,但是 Vue 希望我们自己去设置这两个配置,毕竟如果完全拥抱 Vue3 的话,写法上没有必要在使用 options api 的格式,这样在打包的时候,包的体量上也会有所减少.

const path = require('path')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { DefinePlugin } = require('webpack')

module.exports = {
  entry: {
    path: './src/main.js',
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader',
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[hash][ext]',
        },
      },
    ],
  },
  output: {
    filename: 'assets/js/[name].[contenthash:6].js',
    path: path.resolve(__dirname, './dist'),
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
    }),
    new DefinePlugin({
      __VUE_PROD_DEVTOOLS__: false,
      __VUE_OPTIONS_API__: false,
    }),
  ],
}

最后

首先通过 npm run build 查看打包后生成为目录结构:

image.png

目前存在的不足:

  • js 文件没有进行抽取,现在所有的 js 内容都会默认打包到 main.hash.js
  • css 样式相关的内容没有进行抽取,现在的样式全部以 <style></style> 标签的形式插入在 html 文件中
  • 没有对 css 进行兼容处理
  • 没有对 js 进行兼容处理
  • 没有很好的区分各个环境,如:开发、测试、生产

当然也有对应的处理方式:

  • 通过 webpackoptimization 选项配置,抽离对应的 js
  • 通过 mini-css-extract-plugin 插件来抽离对应的 css
  • 通过 postcsscss 进行处理
  • 通过 babeljs 进行处理
  • 针对公共配置部分进行抽取,或者通过环境变量去合成最终的配置项
  • ···

以上的这些就不在一一进行配置,在需要时在进行相应配置即可.

至此,我们成功的将基于 vite + vue3 项目转换成了基于 webpack5 + vue3 的项目.

标签:__,webpack5,vue,配置,loader,webpack,vue3,path,js
From: https://blog.csdn.net/weixin_43822185/article/details/143652979

相关文章

  • 储能辅助火电机组二次调频控制策略及容量优化配置研究(Matlab代码和Simulink仿真)
         ......
  • 使用configparser 读 or 写 配置文件
    config.ini文件[config]username=2024222222password=123456time=202320241num1=1id1=018819num2=1id_1=018818读取配置文件defread_ini():file='config.ini'con=configparser.ConfigParser()con.read(file,encoding='u......
  • ExtentReport报告配置
    添加依赖<dependency><groupId>org.testng</groupId><artifactId>testng</artifactId><version>6.10</version></dependency><dependency><g......
  • 驱动开发系列27 - Linux Kernel 内核调试环境配置
    目录一:概述二:名词解释      1.什么是busybox?它有什么作用?内核调试为什么需要它?     2.什么是initramfs?它有什么作用?它是怎么制作出来的?      3.什么是qemu?它有什么作用?它是怎么安装的?     4.kernel(内核)如何下载与编......
  • devc++配置opengl库
    由于VisualStudio太占内存,所以用老古董devc++配图形学的环境。用到的文件下载链接Step1:建项目首先打开dev点文件--新建--项目--Multimedia--OpenGLc++/c都行(我这里用的c++)名称最好用英文,然后确定,保存的地方也最好没有中文路径Step2:添加库文件找到DEV-C++的安装目录(右键......
  • 词典编译配置文件概述
    概述《汉文博士》允许使用者自己编写词典文件。本文简要讲述了词典编译过程和相关配置文件的编写方法。读者需具备XML和正则表达式的基础知识。词典编译器《汉文博士》的词典编译器可在“文件”菜单中点击“词典编译器”调出。编译前,需点击“加载”按钮指定配置文件。选定配......
  • 思科交换机配置命令归纳
    1、基本命令switch> 用户模式switch>enable 进入特权模式switch# 特权模式switch#configure terminal 进入配置模式switch(config)# 配置模式switch(config)#enable password [需要设置的密码] 设置特权模式密码为[需要设置的密码]switch(config)#enable secret [需要......
  • 在 termux 中配置 rust 写 wasm 的环境
    最近我开始学用rust写wasm。不用说,我是一个非常好学的人。所以我想随时随地都能学习wasm。刚好我手机上有个termux,我就开始琢磨在termux上配个环境。没想到还不是一件很容易的事。所以写这篇文章记录一下。安装rust很明显需要先安装rust。但是termux上好像没......
  • Vue3.5新增的baseWatch让watch函数和Vue组件彻底分手
    Vue3.5版本中新增的`baseWatch`函数确实让`watch`函数与Vue组件彻底分手。这一变化的主要目的是使`watch`函数的实现与Vue组件及其生命周期解耦,从而使得`watch`函数更加灵活和独立。具体来说,`baseWatch`函数的引入使得开发者可以在不依赖Vue组件的情况下使用`watch`功能,这为......
  • Vue3 - 详细实现将多个文件批量导出为ZIP压缩包格式并下载功能,vue3将文件批量下载打包
    前言Vue2版本,请访问这篇文章。在vue3|nuxt3项目开发中,详解实现把多个文件组合成一个ZIP压缩包格式下载到用户本地,将文件批量下载打包成zip格式并自定义压缩包命名名称,vue3批量下载文件并导出为压缩包的功能,如何将后端返回的二进制文件流打包成zip格式,支持任意文件......