webpack5部署vue3商业项目详细流程

web5deployVue3 目录

---

推荐阅读

• txm-原文

前言

• 造轮子理解原理
• 理解原理后，脚手架提高效率
• 利用webpack5搭建一个完整的vue3的开发环境

初始化目录

---

1. 初始化webpack.config.js

npm init -y
效果：

2. 安装webpack

npm install webpack webpack-cli -D

注意

1. -D等价于--save-dev，开发环境时所需依赖
2. -S等价于--save，生产环境时所需依赖
   

• 注意更改源

3. 初始化目录和文件

• 创建webpack.config.js文件用于编写webpack

// webpack.config.js
const path = require('path');

module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	}
}

• 创建src目录存放源代码

// src/index.js
console.log('test webpack');

• 修改package.json中的scripts字段

  "scripts": {
    "build": "webpack"
  },

• 打包js
  1. 项目根目录输入npm run build或者只输入webpack
  2. 打包成功后，会在项目的根目录创建一个dist文件夹，打包后的文件就是main.js

效果

总结

1. npm初始化
2. webpack
3. 修改package.json和webpack.config.js
4. npm run build or webpack

---

配置核心功能

---

问题

由于存在一些浏览器无法使用ES6+的高级语法，因此需要转换为ES5

1. 安装依赖

cnpm install @babel/core babel-loader @babel/preset-env -D

2. 修改webpack.config.js配置

// webpack.config.js
const path = require('path');

module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env']
					}
				}
			}
		]
	}
	
}

注意

如果不想将配置写在配置文件中，可以在根目录创建babel.config.js或者babelrc.js

---

处理样式

• webpack默认只能打包commonJS规范的js文件
• 处理其他文件都需要相对应的处理器进行处理

1. 安装依赖

cnpm install style-loader css-loader less less-loader -D

2. 修改webpack.config.js配置

// webpack.config.js
const path = require('path');

module.exports = {
	mode: 'development',
	entry: './src/index.js',
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['@babel/preset-env']
					}
				}
			},
			{
				test: /\.css$/,
				use: [
					'style-loader',
					'css-loader'
				]
			},
			{
				test: /\.less$/,
				use: [
					'style-loader',
					'css-loader',
					'less-loader'
				]
			}
		]
	}
	
}

注意

loader的配置有很多能优化的地方

---

处理图片等静态资源

除js文件的其他文件打包，webpack都需要特定的处理器进行处理

1. 安装依赖

npm install url-loader file-loader -D

2. 修改webapck.config.js配置

			{
				test: /\.(jpg|png|jpeg|gif|bmp)$/,
				use: {
					loader: 'url-loader',
					options: {
						limit: 1024,
						fallback: {
							loader: 'file-loader',
							options: {
								name: '[name].[ext]'
							}
						}
					}
				}
			},
			{
				test: /\.(mp4|ogg|mp3|wav)$/,
				use: {
					loader: 'url-loader',
					options: {
						limit:1024,
						fallback: {
							loader: 'file-loader',
							options: {
								name: '[name].[ext]'
							}
						}
					}
				}
			}

---

创建html文件

令打包的js文件自动插入到html模板中

1. 安装依赖

cnpm install html-webpack-plugin -D

2.修改webpack配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
// ...
	plugins: [
		new HtmlWebpackPlugin({
			template: './src/index.html',
			filename: 'index.html',
			title: 'vue3 + TS -> web App'
		})
	]

注意

配置动态网页标题时，需要将模板中的