构建工具
打包工具称为构建工具
使用模块化开发主要面临两个问题: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的开发速度更快，也适合小型，简单的项目。
基本使用 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}{评论，你的意见是我进步的财富！}
评论，你的意见是我进步的财富！ 如果有不懂可以留言，我看到了应该会回复 如有错误，请多多指教
好文阅读
您阅读本篇文章共花了：
发表评论