构建工具
打包工具称为构建工具
- 使用模块化开发主要面临两个问题:1.浏览器兼容性问题 2.模块化过多时,加载问题。
- 使用构建工具,对代码进行打包,将多个模块打包成一个文件。这样一来及解决了兼容性问题,又解决了模块过多的问题
- 作用:构建工具可以将我们使用esm规范编写的代码转换为旧的js语法(解决了兼容性问题)
1.webpack
webapck简介
webpack只负责项目打包,其他功能需要在webpack.config.js配置文件里进行设置。
webpack适用于大型,复杂的项目,它可以处理多种不同类型的文件,并根据需求进行转换,压缩,打包。webpack唯一不好的就是配置比较复杂,需要花费一定的时间和精力进行学习和调试。
webpack配置八大模块
-
Entry 必选项
指定读取入口文件(项目开始的文件) -
output 必选项
配置代码打包后的地址
打包后的.js就是普通的js文件,.mjs就是es模块的文件 -
mode webpack4以后必填
-
devServer 非必填
开发模式配置 -
modules 非必填 loader编写的地方(用于预处理文件,文件加载器)
使用css-loader可以处理js中的样式
使用style-loader,让css样式生效
编译ts,需要ts-loader
编译vue,需要vue-loader
使用babel-loader,将新的js语法转换为旧的js,以提高代码的兼容性。
… -
plugins 非必填
插件(**用于增强功能,扩展器 **) -
optimization 非必填
优化相关 -
resolve 非必填
提供一些简化功能(别名,文件后缀名省略等等)
https://www.webpackjs.com/configuration/resolve/
#安装识别css样式
#添加 -D表示开发依赖
yarn add style-loader css-loader -D
#添加 -D表示开发依赖
yarn add @babel/core @babel/preset-env -D
#添加 -D表示开发依赖
#为webpack打包后的js指定模板
yarn add html-webpack-plugin -D
单入口--> runtime+vendor+核心业务+异步模块
多入口--> runtime+vendor+每个入口的核心业务代码+common
webpack.config.js配置文件
const minicss = require("mini-css-extract-plugin")
module.exports = {
mode:"production",//none,development(开发模式),production(生产模式)
entry:{
app:"./app.js"//根据你的项目,自行配置入口文件
},
output:{
path:__dirname+"/dist",
chunkFilename: "[name].js",
filename: 'assets/js/[name].[chunkhash:4].bundle.js',
},
optimization:{},
devServer:{
hot: true, // 打开热更新开关
historyApiFallback:true
},
resolve:{
extensions: ['.vue','.js', '.ts', '.css'],
alias: {
"@": resolve("src"),
},
},
modelu:{
rules:[
//css样式
{
test:/\.css$/i,
use:[minicss.loader,"style-loader","css-loader"]
},
//图片生效
{
test: /\.(png|jpe?g|gif)$/,
type: 'asset/resource',
generator: {
filename: 'assets/img/[hash][ext]'
}
},
{
test: /\.vue$/,
use: 'vue-loader'
},
//label把es6转为es5,兼容性
{
test: /\.less$/i,
use: [
// compiles Less to CSS
minicss.loader,
'style-loader',
'css-loader',
'less-loader',
],
},
{
test:/\.m?js$/,
exclude:/(node_modules|bower_components)/,
use:{
loader:"babel-loader",
options:{
presets:["@babel/preset-env"]
}
}
},
//webpack的typeScript加载器
{
test: /\.(j|t)sx?$/,
exclude: /node_modules/,
use:[
'babel-loader',
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],// 重要
transpileOnly: true,// 重要 取消类型检测 直接进行编译
happyPackMode: false,
}
}
]
}
},
//打包输出文件
output: {
filename: 'assets/js/[name].[contenthash:6].js',
path: path.resolve(__dirname, './dist')
},
//webpack扩展功能
plugins: [
new VueLoaderPlugin(),
//为webpack打包后的js指定模板
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './public/index.html')
})
new minicss({
filename:"test.bundle.css"
}),
new minimizer()
],
optimization: {
//代码分割
splitChunks: {
chunks: "all",//all,async,initial
cacheGroups:{
vendor:{
test:/[\\/]node_modules[\\/]/,
filename: "vendor.[chunkhash:4].js",
chunks: "all",
minChunks: 1
},
common:{
filename: "common.[chunkhash:4].js"
chunks: "all",
miniChunks:2,//重复出现2次以上,拆分为独立的模块
minSize: 0//大于0byte文件才拆分出来
}
}
},
runtimeChunk: {//运行时的chunk文件
name:"runtime"
}
},
devServer: {
hot: true, // 打开热更新开关
historyApiFallback:true
},
]
}
}
- devtool
devtool:"inline-source-map" //设置代码映射,查看源码,方便调试
webpack配置项技巧
- 1.require.context(批量引入指定文件夹下的所有文件)
- 2.resolve
2.1 alias-别名,提供路径的简写
2.2 Extensions-扩展省略,定义可省略的扩展名
webpack的package.json配置
- package.json
devDependencies 项目开发时用的(开发依赖)
dependencies项目依赖
{
"name": "沉默小管",//项目名称
"version": "0.0.1",//版本
"description": "沉默小管",//项目描述
"author": "沉默小管",//作者
"license": "MIT",
"scripts": {//运行脚本
"watch": "webpack --watch",
"dev": "webpack server --open --mode=development",
"build": "webpack --mode=production"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src/**/*.{js,vue}": [
"eslint --fix",
"git add"
]
},
"keywords": [],//项目关键词
"dependencies": {},//项目依赖
"devDependencies": { },//开发时依赖
"engines": {//启动引擎版本
"node": ">=8.9",
"npm": ">= 3.0.0"
},
"browserslist": [//设置兼容列表
"> 1%",
"last 2 versions"
]
}
2.vite
相较于webpack,vite采用了不同的运行方式。开发时,并不对代码打包,而是直接采用ES模块的方式来运行项目。在项目部署时,再对项目进行打包。他比webpack少了分析依赖关系的环节。因此,vite的开发速度更快,也适合小型,简单的项目。文章来源:https://www.toymoban.com/news/detail-729009.html
- 基本使用
1.安装开发依赖vite
2.vite的源码目录就是项目根目录
3.开发命令:
vite 启动开发服务器
vite build打包代码
vite preview 浏览打包后代码
未完待续…
✨ 踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下
📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管
📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管
📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网
📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn
🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545
👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!
⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!
✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!
如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教文章来源地址https://www.toymoban.com/news/detail-729009.html
到了这里,关于【vue3】webpack和vite介绍与使用【超详细】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!