构建工具
打包工具称为构建工具
- 使用模块化开发主要面临两个问题: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"]
}
}
},
{
test:/\.tsx?$/,
loader:"ts-loader",
options: {
configFile: path.resolve(process.cwd(), 'tsconfig.json'),
appendTsSuffixTo: [/\.vue$/]
},
}
},
//打包输出文件
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 浏览打包后代码