从0到1 Webpack搭建Vue3开发、生产环境

news2024/10/7 4:32:37

起步

  • 创建项目目录

mkdir webpack-vue3-demo

  • 初始化 package.json

npm init -y

参考文档

  • 安装 webpack webpack-cli webpack-dev-server webpack-merge

npm install webpack webpack-cli webpack-dev-server webpack-merge --save-dev

  • 创建配置文件

mkdir build
cd build
touch webpack.base.js
touch webpack.dev.js
touch webpack.prod.js

如果执行第三个命名报如下错误 需要全局安装下touch-cli
请添加图片描述

npm install touch-cli -g

  • 创建入口文件

mkdir src
touch main.js

  • 创建脚本

#package.json
{
	"scripts": {
		"start": "webpack-dev-server --config build/webpack.dev.js",
		"build": "webpack --config build/webpack.prod.js"
	}
}

  • 安装 @babel系列

npm install @babel/core @babel/preset-env babel-loader --save-dev

配置babel-loader

// webpack.base.js
module: {
		rules: [
			{
				test: /\.js$/,
				loader: "babel-loader",
				exclude: /node_modules/
			}
		]
	}

创建babel配置文件 设置预设

配置文件参考文档
预设配置项参考文档

// babel.config.js
module.exports = {
	presets: [
		[
			"@babel/preset-env",
			{
				useBuiltIns: "usage",
				corejs: "3.26"
			}
		]
	]
}

需要安装corejs依赖

npm install core-js --save

core-js参考文档

useBuiltIn属性默认false
entry替换core-js的导入 只导入目标环境模块所需的内容
usage添加到每个文件导入的顶部 用于该文件中使用的、目标环境不支持的特性

  • 安装vue

npm install vue -S
npm install vue-loader -D

不需要安装vue-template-compiler

配置vue-loader

module: {
		rules: [
			{
				test: /\.vue$/,
				loader: "vue-loader"
			}
		]
	},
	plugins: [
		new VueLoaderPlugin()
	]

// main.js
import {createApp} from "vue";
import App from './App'

const app = createApp(App)

app.mount('#app')

<!-- App.vue -->
<template>
  <h1>{{msg}}</h1>
</template>
<script setup>
import {ref} from "vue";

const msg = ref('启动成功')
</script>
<style scoped></style>

  • 安装 html-webpack-plugin

npm i html-webpack-plugin -D

配置

plugins: [
		new VueLoaderPlugin(),
		new HtmlWebpackPlugin({
			template: path.resolve(__dirname, '../index.html'),
			filename: "index.html",
			title: 'title'
		})
	]

根目录创建入口html模板

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>

用来生成 index.html 可指定一个模板 打包后的js文件会自动引入

  • 本地启动

npm run start

  • 处理CSS

npm install less less-loader css-loader vue-style-loader -D

配置loader

module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					'vue-style-loader',
					'css-loader'
				]
			},
			{
				test: /\.less$/,
				use: [
					'vue-style-loader',
					'css-loader',
					'less-loader'
				]
			}
		]
	}

  • 处理静态资源

module: {
		rules: [
			{
				test: /\.(jpe?g|png|gif|svg)/,
				type: "asset",
				generator: {
					filename: 'img/[name].[hash:8][ext][query]'
				},
				parser: {
					dataUrlCondition: {
						maxSize: 4 * 1024
					}
				}
			}
		]
	}

  • postcss系列

npm install postcss-loader autoprefixer -D

修改处理css相关配置

{
				test: /\.css$/,
				use: [
					'vue-style-loader',
					'css-loader',
					'postcss-loader',
				]
			},
			{
				test: /\.less$/,
				use: [
					'vue-style-loader',
					'css-loader',
					'postcss-loader',
					'less-loader'
				]
			},

postcss配置文件

// postcss.config.js
module.exports = {
	plugins: [
		require('autoprefixer')
	]
}

autoprefixer参考文档

  • browserslist配置

参考文档

  • 抽取css

mini-css-extract-plugin 代替 extract-text-webpack-plugin 

npm install mini-css-extract-plugin -D

配置

// webpack.prod.js
module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
				]
			},
			{
				test: /\.less$/,
				use: [
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					'less-loader'
				]
			},
		]
	}
plugins: [
		new MiniCssExtractPlugin({
			filename: 'css/[name].[chunkhash:8].css'
		})
	]

  • 重复打包自动删除旧的打包文件

output: {
	clean: true
}

webpack5内置 不需要再安装 clean-webpack-plugin

  • 压缩css js

npm install css-minimizer-webpack-plugin terser-webpack-plugin -D

配置

optimization: {
		minimize: true,
		minimizer: [
			new TerserPlugin(),
			new CssMinimizerPlugin()
		],
}

terser参考文档
css-minimizer参考文档

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/52097.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vscode配置git和c++

vscode配置git和c++

vscode配置git和cvscode配置c1.必要配置2.可选配置配置git1.命令行使用git2.IDE使用git3.一点补充过滤文件设置别名之前一直在用vscodepython做实验&#xff0c;现在想利用vscode复习下c和git顺便做做力扣。vscode配置c 1.必要配置 由于vscode只是个编辑器&#xff0c;所以首…
阅读更多...
JVM之运行时数据区 面试相关

JVM之运行时数据区 面试相关

JVM创建对象的方式创建对象的步骤内存布局对象访问定位![请添加图片描述](https://img-blog.csdnimg.cn/fa106bd4936440b28e1c359d57ba4d25.png)直接内存创建对象的方式 new 常见方式 Xxx静态方法 XxxBuilder/XxxFactory的静态方法Class的newInstance() 反射&#xff0c;只能空…
阅读更多...
魔兽世界开服架设服务器搭建教程

魔兽世界开服架设服务器搭建教程

魔兽世界开服架设服务器搭建教程 准备工具&#xff1a; 1、装有windows98/2000/xp/2003系统、内存至少256M的电脑一台 2、魔兽服务器端一个 3、服务器一台&#xff08;魔兽世界对服务器的配置要求并不是很高&#xff0c;CPU 16核 、16线程 带宽最好是选择50M的&#xff0c;游戏…
阅读更多...
美食杰项目 -- 发布菜谱（七）

美食杰项目 -- 发布菜谱（七）

目录前言&#xff1a;具体实现思路&#xff1a;步骤&#xff1a;1. 展示美食杰发布菜谱页效果2. 引入element-ui3. 代码总结&#xff1a;前言&#xff1a; 本文给大家讲解&#xff0c;美食杰项目中 实现发布菜谱页的效果&#xff0c;和具体代码。 具体实现思路&#xff1a; 按…
阅读更多...
骑行运动耳机哪个好，列举五款适合在骑行过程中佩戴的耳机

骑行运动耳机哪个好，列举五款适合在骑行过程中佩戴的耳机

谈起耳机&#xff0c;人们第一印象应该是传统的入耳式耳机&#xff0c;这种耳机在音质以及体积上确实占据了一定的优势&#xff0c;但还是存在着不少的缺点&#xff0c;特别是佩戴的过程中会让我们的耳道保持堵塞状态&#xff0c;导致中耳炎等疾病的频频发生&#xff0c;而这两…
阅读更多...
ASEMI-KBL410是什么元器件，kbl410整流桥参数

ASEMI-KBL410是什么元器件，kbl410整流桥参数

编辑-Z 俗话说&#xff0c;时势造英雄&#xff0c;整流桥大军中有一款整流桥KBL410有哪些你所不知道的&#xff1f;KBL410是什么元器件&#xff1f;kbl410整流桥参数是多少&#xff1f; KBL410参数描述 型号&#xff1a;KBL410 封装&#xff1a;KBL-4 电性参数&#xff1a;…
阅读更多...
Day16--购物车页面-演示效果并创建编译模式

Day16--购物车页面-演示效果并创建编译模式

提纲挈领&#xff1a; 我的操作&#xff1a;
阅读更多...
ARC113D题解

ARC113D题解

ARC113D - Sky Reflector 题目大意 有一个nnn行mmm列的表格&#xff0c;你可以在每个表格中填入一个111到kkk之间的整数&#xff0c;定义序列A,BA,BA,B如下&#xff1a; 对于每一个i1,2,…,ni1,2,\dots,ni1,2,…,n&#xff0c;AiA_iAi​是第iii行的最小值对于每一个j1,2,…,…
阅读更多...
强化学习：Actor-Critic、SPG、DDPG、MADDPG

强化学习：Actor-Critic、SPG、DDPG、MADDPG

马尔可夫决策过程&#xff08;MDP&#xff09; MDP 由元组 (S,A,P,R,γ)(S, A, P, R, \gamma)(S,A,P,R,γ) 描述&#xff0c;分别表示有限状态集、有限动作集、状态转移概率、回报函数、折扣因子 。与马尔可夫过程不同&#xff0c;MDP的状态转移概率是包含动作的&#xff0c;即…
阅读更多...
Express 7 指南 - 开发中间件

Express 7 指南 - 开发中间件

Express Express 中文网 本文仅用于学习记录&#xff0c;不存在任何商业用途&#xff0c;如侵删 文章目录Express7 指南 - 开发中间件7.1 概述7.2 例子7.2.1 中间件函数 myLogger7.2.2 中间件函数 requestTime7.2.3 中间件函数 validateCookies7.3 可配置的中间件7 指南 - 开发…
阅读更多...
中断系统中的设备树__Linux对中断处理的框架及代码流程简述

中断系统中的设备树__Linux对中断处理的框架及代码流程简述

1 异常向量入口: arch\arm\kernel\entry-armv.S .section .vectors, "ax", %progbits .L__vectors_start: W(b) vector_rst W(b) vector_und W(ldr) pc, .L__vectors_start 0x1000 W(b) vector_pabt W(b) vector_dabt W(b) …
阅读更多...
14 【接口规范和业务分层】

14 【接口规范和业务分层】

14 【接口规范和业务分层】 1.接口规范-RESTful架构 1.1 什么是REST REST全称是Representational State Transfer&#xff0c;中文意思是表述&#xff08;编者注&#xff1a;通常译为表征&#xff09;性状态转移。 它首次出现在2000年Roy Fielding的博士论文中&#xff0c;R…
阅读更多...
教程九 在Go中使用Energy创建跨平台GUI应用 - Go绑定变量JS调用

教程九 在Go中使用Energy创建跨平台GUI应用 - Go绑定变量JS调用

介绍 Energy Go中定义的变量、结构和函数绑定&#xff0c;在JS中使用。 在Energy中不只可以调用 JS 和 事件机制&#xff0c;也可以通过Go绑定在Go中定义的一些变量函数在JS中调用&#xff0c;在使用的时候就如同在JS调用本身定义的函数一样方便。 运行此示例&#xff0c;需…
阅读更多...
Flutter FlutterActivity找不到

Flutter FlutterActivity找不到

Flutter FlutterActivity找不到1.大多数报错应该都是这个样子2.接下来找到我们自己安装的 flutterSDK 路径我放在下面 flutterSdk\flutter_windows_3.3.4-stable\flutter\bin\cache\artifacts\engine\android-arm 3.这个界面大家应该都很熟悉吧(这是快捷键 ctrlshiftalts) …
阅读更多...
力扣刷题记录163.1-----684.冗余连接

力扣刷题记录163.1-----684.冗余连接

目录一、题目二、代码三、运行结果一、题目 二、代码 class Solution { public://并查集 基本步骤 初始化 并 查 判断int n1001;int father[1001];//并查集初始化void init(){for(int i0;i<n;i){father[i]i;}}//并查集查找int find(int u){return ufather[u] ? u : …
阅读更多...
AI 作画领域中的“神笔马良”是怎样炼成的？

AI 作画领域中的“神笔马良”是怎样炼成的？

本文由行者AI携手亚马逊云科技共同推出 刷爆朋友圈的 AIGC 是什么&#xff1f; AI Generated Content (AIGC&#xff0c;利用人工智能技术来生成内容)&#xff0c;是继专业生产内容&#xff08;PGC, Professional-generated Content&#xff09;、用户生产内容&#xff08;UGC…
阅读更多...
万字详细总结 Promise（期约）及其方法

万字详细总结 Promise（期约）及其方法

万字详细总结 Promise&#xff08;期约&#xff09;及其方法 ES6之前的异步编程 异步行为是 javascript 的基础操作。我们在开发的过程中往往需要执行一个操作并得到一个结果&#xff08;例如从后端请求数据&#xff09;&#xff0c;但是由于 javascript 是单线程&#xff0c…
阅读更多...
[附源码]Python计算机毕业设计Django个性化名片网站

[附源码]Python计算机毕业设计Django个性化名片网站

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
视频播放 (二) 自定义 MediaPlayer

视频播放 (二) 自定义 MediaPlayer

1. 说明 1.1 使用Mediaplayer和surfaceView进行视频播放&#xff0c;并实现&#xff1a;感应生命周期、支持无缝续播、宽高比适配以及全屏模式 1.2 创建一个播放控制View&#xff0c;并以ViewModel驱动 2. 配置信息 2.1 AndroidManifest.xml 添加网络权限 <uses-permission…
阅读更多...
Docker入门-上篇

Docker入门-上篇

Docker容器技术的使用&#xff0c;现在它已经不仅仅只是运维人员的专属技能了&#xff0c;对于我们开发人员同样需要具备&#xff0c;在很多中小公司中云环境的项目搭建和项目部署依然还是我们开发人员干的事&#xff0c;所以多学一门技术总是没错的。 1.Docker介绍 Docker最…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023