写文章

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

我心飞翔 分类：vue

起步

  • 创建项目目录 
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

从0到1 Webpack搭建Vue3开发、生产环境
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
vue3依赖 @vue/compiler-sfc

配置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参考文档

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

一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu

回复

我来回复

  • 暂无回复内容