所有打包工具是基于node运行的
1. Webpack
内置模块
- path
- extname: 后缀名
- basename: 文件名
- dirname:文件的父级文件夹路径
- join(x,y): 路径拼接，
- resolve(): 返回绝对路径
安装
npm webpack webpack-cli -D
webpack-cli: 识别命令行中 webpack 的命令,如果只是在js文件中使用webpack,则不用
webpack的运行依赖webpack-cli
基本配置
webpack.config.js固定名字
const path = require('path')
module.exports = {
mode:'development', // 默认是生产环境
context:'', // 默认值是webpack启动路径，
entry:'./src/main.js', // 入口 相对于context
output: {
filename:'bundle.js'
path:path.resolve(__dirname,'./build')
},
module: {
rules:[ // 配置loader 解析配置文件
{
test:/\.css$/,
use:[
// 执行顺序是从列表的左边向右解析
{loader:'style-loader'} // 插入到页面中
{loader:'css-loader'}, // 只负责解析
{
loader:'postcss-loader',
options:{
postcssOptions:{
plugins:[
'autoprefixer'
]
}
}
}
]
}
]
}
}
指定配置文件：package.json中可以通过stripts:
loader
webpack对除了js文件以外的文件，不支持处理
loader: 处理模块,对源码进行转换
常用loader:
-
css-loader: 只负责css解析
-
style-loader: 将css插入页面中
-
less-loader: 解析less文件成css
-
postcss-loader:通过js进行转换样式的工具，如浏览器前缀，css样式的重置
-
autoprefixer: 浏览器前缀插件
可以通过 postcss.config.js 进行配置，
module.exports = { plugins:[ // 'autoprefixer' 'postcss-preset-env' ] } -
postcss-preset-env: 将很多插件预设好了
-
-
babel-loader: 将ES6转为ES5
-
@babel/preset-env// babel.config.js module.exports = { //plugins:[ // @babel/plugin-xxxxxxxx //] presets:[ @babel/preset-env ] }
-
资源模块
webpack5 之前在处理资源的时候，需要使用各种loader: raw-loader,url-loader,file-loader,
webpack5之后，可以直接使用资源模块类型 asset module type
资源模块类型：
- asset/resource： 发送一个单独的文件并导出URL , 与file-loader对应
- asset/inline：导出一个资源的 data URL ，与url-loader对应
- asset/source：导出资源的源码，与raw-loader对应
- asset：在导入一个data URL 和发送一个单独的文件之间自动选择，url-loader 配置资源体积限制实现
// webpack.config.js
...
rules:[
...
{
test:/\.(png|jpe?g|gif|svg)$/ig,
type:'asset',
generator:{
// 占位符
// name 文件名
// ext 扩展名
// hash hash:2 前两位
filename:'img/[name].[hash:6][ext]'
},
parser:{
dataUrlCondition:{
maxSize: 60*1024
}
}
}
]
extensions和alias配置
extensions: 文件扩展名配置
如果是文件，当不写扩展名时，尝试去extensions中查找
如果是文件夹，去当前文件夹下查找index.js
alias: 配置别名
module.exports = {
//...
resolve: {
extensions: ['.js', '.json', '.wasm','vue','ts'],
},
alias:{
utils:path.resolve(__dirname,'./utils')
}
};
插件 Plugin
loader用来转换特定类型的模块，plugin可以用于执行更加广泛的任务，如打包优化，资源管理，环境变量注入等
-
clean-webpack-plugin: 清除打包文件 -
html-webpack-plugin: -
DefinePlugin: 内置的
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {DefinePlugin} = require('webpack')
module.exports = {
//...
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title:'自定义模板'，
template:'./index.html'
})
new DefinePlugin({
"BASE_URL":'"./"'
})
]
};
// index.html
Mode配置
- production: 默认
- none：不使用任何默认优化选项
- development：
开启本地服务器
想要自动完成编译和展示
-
webpack watch mode -
webpack-dev-server{ ... scripts:{ 'serve':'webpack serve --config webpack.config.js' } } // npm run serve -
webpack-dev-middle
模块热更新（HMR）
应用程序运行过程中，添加、替换、删除模块，无需重新刷新整个页面
{
...
devServer:{
hot: true // 默认是true
}
}
// 指定哪个模块需要HMR
if (module.hot){
module.hot.accept('./utils.js')
}
devServer配置
{
devServer:{
port:8888, // 端口号
host:'0.0.0.0', // 其他都可访问
open:true, // 是否要自动打开浏览器
compress:true// 是否对文件进行压缩
}
}
环境配置
Vue脚手架早期：
webpack.dev.config.js：开发环境
webpack.pro.config.js：生产环境
webpack.comm.config.js: 公共部分，
使用webpack-merge 将公共部分和私有部分合并， merge(coom,{自定义})
分包
vue3 中使用import函数导入模块自动分包
const Home = () => import(/webpackChunkName: 'home'/, './views/Home.vue')