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

    起步

    • 创建项目目录

    mkdir webpack-vue3-demo

    • 1

    • 初始化 package.json

    npm init -y

    • 1

    参考文档

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

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

    • 1

    • 创建配置文件

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

    • 1
    • 2
    • 3
    • 4
    • 5

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

    npm install touch-cli -g

    • 1

    • 创建入口文件

    mkdir src
touch main.js

    • 1
    • 2

    • 创建脚本

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    • 安装 @babel系列

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

    • 1

    配置babel-loader

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    创建babel配置文件 设置预设

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    需要安装corejs依赖

    npm install core-js --save

    • 1

    core-js参考文档

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

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

    • 1
    • 2

    不需要安装vue-template-compiler
    vue3依赖 @vue/compiler-sfc

    配置vue-loader

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    // main.js
import {createApp} from "vue";
import App from './App'

const app = createApp(App)

app.mount('#app')

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    
<template>
  <h1>{{msg}}h1>
template>
<script setup>
import {ref} from "vue";

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    • 安装 html-webpack-plugin

    npm i html-webpack-plugin -D

    • 1

    配置

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    根目录创建入口html模板

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

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

    • 本地启动

    npm run start

    • 1

    • 处理CSS

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

    • 1

    配置loader

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

    • 处理静态资源

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    • postcss系列

    npm install postcss-loader autoprefixer -D

    • 1

    修改处理css相关配置

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    postcss配置文件

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    autoprefixer参考文档

    • browserslist配置

    参考文档

    • 抽取css

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

    npm install mini-css-extract-plugin -D

    • 1

    配置

    // 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'
		})
	]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

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

    output: {
	clean: true
}

    • 1
    • 2
    • 3

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

    • 压缩css js

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

    • 1

    配置

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

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

    我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：link

  • 相关阅读:
    理论STL——vector篇（小Z 著）
    【第八期】Apache DolphinScheduler 每周 FAQ 集锦
    Python项目实战 —— 04. 淘宝用户行为分析
    Vue-引入ElementUI&&use底层原理
    【CI/CD1】jenkins，actions，daocloud
    禁用AMQP配置中的明文身份验证机制（包含Springboot结果测试+踩坑）
    华为：数据治理方法论
    编程入门之学哪种编程语言？
    项目二：学会使用python爬虫请求库（小白入门级）
    关于 Docker
  • 原文地址：https://blog.csdn.net/qq_43447509/article/details/128115355