1.webpack是, 静态模块打包工具, 分析翻译, 压缩, 打包代码
⚫
支持所有类型文件的打包
⚫
支持less/sass => css
⚫
支持ES6/7/8 => ES5
⚫
压缩代码, 提高加载速度
webpack作用是?
➢
识别
,
翻译
,
压缩
,
打包代码
2.webpack-使用前-环境准备
webpack本质: node环境下的包
1. 初始化包环境
yarn init
2. 安装依赖包
yarn add webpack@5.31.2 webpack-cli@4.6.0 -D
3. 配置scripts (自定义命令)
scripts: {
"build": "webpack"
}
使用webpack, 需要做哪些准备?
➢ 初始化包环境,
得到
package.json
文件
➢ 下载webpack
和
webpack-cli
包
➢ 配置自定义命令,
为打包做准备
3.webpack-插件-自动生成html文件
配置文档: https://webpack.docschina.org/plugins/html-webpack-plugin/
1.
下载插件
yarn add html-webpack-plugin@5.3.1 -D
2.webpack.config.js配置
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// ...省略其他代码
plugins: [
new HtmlWebpackPlugin({
// 以此为基准生成打包后html文件
template: './public/index.html'
})
]
}
4.webpack-加载器-处理css文件
1.安装依赖
yarn add css-loader@5.2.1 style-loader@2.0.0 -D
2.webpack.config.js 配置
module.exports = {
// ...其他代码
module: { // 如何处理项目中不同模块文件
rules: [ // 规则
{
test: /\.css$/, // 匹配所有的css文件
// use数组里从右向左运行
// 先用 css-loader 让webpack能够识别 css 文件的内容并打包
// 再用 style-loader 将样式, 把css插入到dom中
use: [ "style-loader", "css-loader"]
}
]
}
}
5.webpack-加载器-处理less文件
下载
yarn add less@4.1.1 less-loader@8.1.0 -D
webpack.config.js 配置
module: {
rules: [
// ...省略其他
{
test: /\.less$/, // 匹配.less结尾文件
// 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
use: [ "style-loader", "css-loader", 'less-loader']
}
]
}
6.webpack-加载器-处理图片文件
webpack.config.js填写
module: {
rules: [
// ...省略其他
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
// 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
// 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)
}
]
}