webpack基本概述:
webpack是一个 静态模块打包工具 ，作用是 分析 、 压缩 、 打包 代码, 提高打开网站的速度
webpack-使用前-环境准备
初始化包环境
安装依赖包
配置scripts (自定义命令)
yarn运行
js代码被打包的流程
配置webpack插件 控制html打包
下载: yarn add html-webpack-plugin -D
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
],
配置 webpack 插件 控制css打包
下载: yarn add css-loader style-loader -D
{
test: /.css$/i,
use: ["style-loader", "css-loader"],
},
配置 webpack 插件 控制less打包
下载: yarn add less less-loader -D
{
test: /.less$/i,
use: ["style-loader", "css-loader", "less-loader"],
},
配置asset 控制文件或者图片/音频/视频打包
{
test: /.(png|jpg|gif|jpeg|bmp)$/i,
type: 'asset',
generator: {
filename: './images/[name][ext]'
}
},
转base64字符串好处/坏处
好处: 减少网络请求次数
坏处: 会增加30%体积
配置webpack 图标字体
{
test: /.(eot|svg|ttf|woff|woff2)$/i,
type: 'asset/resource',// 以文件输出
generator: {
filename: './font/[name][ext]'
}
},
