当前位置: 首页 > news >正文

webpack5 + vue3 从零配置项目

前言

虽然在实际项目当中很少会从 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.jsconst 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.jsconst 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.jsconst 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 的项目.

http://www.lryc.cn/news/484745.html

相关文章:

  • Queuing 表(buffer表)的优化实践 | OceanBase 性能优化实践
  • ./mysqld: error while loading shared libraries: libaio.so.1: cannot open sha
  • Qt主线程把数据发给子线程,主线程会阻塞吗
  • 前后端、网关、协议方面补充
  • 如何在Mac上切换到JDK 17开发环境
  • 深入探索 TypeScript:从基础到高级特性
  • Leetcode:118. 杨辉三角——Java数学法求解
  • SHELL脚本(Linux)
  • 单元测试、集成测试、系统测试、验收测试、压力测试、性能测试、安全性测试、兼容性测试、回归测试(超详细的分类介绍及教学)
  • 低代码集成多方API的简单实现
  • 【测试框架篇】单元测试框架pytest(1):环境安装和配置
  • Python数据分析NumPy和pandas(二十九、其他Python可视化工具)
  • Unity中HDRP设置抗锯齿
  • Spring Boot实现文件上传与OSS集成:从基础到应用
  • Python学习26天
  • linux startup.sh shutdown.sh (kkFileView)
  • [MySQL]隐式类型转换
  • 面经总结1
  • Oracle19C AWR报告分析之Instance Efficiency Percentages (Target 100%)
  • 数据结构--数组
  • nrm的安装及使用
  • 【MatLab手记】 --从0到了解超超超详过程!!!
  • 从零创建vue+elementui+sass+three.js项目
  • Linux通过使用scp和sftp发送或拉取文件
  • Jtti:服务器总是自动重启怎么办?
  • 北京大学c++程序设计听课笔记101
  • 一键生成本地SSL证书:打造HTTPS安全环境
  • Unity类银河战士恶魔城学习总结(P124 CharacterStats UI玩家的UI)
  • 速盾:cdn 支持 php 吗?
  • 在linux中使用nload实时查看网卡流量