一、打包工具
作用
- 开发时，如果使用了框架(vue、react)，es6模块化语法，less，sass等css预处理器进行开发，我们则需要将这些代码并以成浏览器能识别的js、css语法才能运行
- 打包工具还能压缩代码、做兼容性处理、提升代码性能
分类
- Grunt
- Dlup
- Parcel
- Webpack
- Rollup
- Vite
- …
二、Webpack
介绍
- 静态资源的打包工具
- 将一个或多个文件作为打包的入口，将整个项目的所有文件编译组合成一个或多个文件输出出去，输出的文件就是编译好的文件，可以在浏览器中运行，webpack输出的文件叫bundle
功能
- 开发模式：编译es模块语法
- 生产模式：编译es模块化语法，压缩js代码
基础打包js资源
初始化package.json
npm init -y
安装依赖
npm i webpack webpack-cli -D
运行webpack打包文件
// 开发模式
// ./src/main.js为打包的入口文件路径，将main.js文件和该文件中引用的其他依赖模块一起打包到dist目录下
npx webpack ./src/main.js --mode=development
// 生产模式
npx webpack ./src/main.js --mode=production
三、基本配置
五个核心配置节点
entry
- 入口
- 指定Webpack从哪个文件开始打包
output
- 输出
- 指定Webpack打包完的文件输出到哪个位置
loader
- 加载器
- Webpack本身只能处理js，json等资源，想要处理其他资源要借助loader
plugins
- 插件
- 扩展Webpack功能
mode
- 模式
- 开发模式 development 和 生产模式 production
配置基本webpack.config.js文件
- 在项目根目录中配置该文件
- 名称必须是webpack.config.js
const path = require('path') // nodejs处理路径的模块
module.exports = {
// 入口
entry: './src/main.js',
// 输出
output: {
// 文件输出路径
path: path.resolve(__dirname, 'dist'),
// 文件名
filename: 'main.js'
},
// 加载器
module: {
rules: [
// loader的配置
]
},
// 插件
plugins: [
// 插件的配置
],
// 模式
mode: 'development'
}
- 有了配置文件后，运行
npx webpack命令即可打包配置文件中指定的入口文件
四、处理css资源
-
下载loader
npm install --save-dev style-loader npm install --save-dev css-loader -
配置文件中配置loader
// 加载器 module: { rules: [ // loader的配置 { test: /\.css$/i, // 检测css文件 use: ['style-loader', 'css-loader'] // use的执行顺序从右到左,style-loader将css样式放到生成的style标签中 } ] },
五、处理less资源
-
下载loader
npm install less less-loader --save-dev -
配置loader
// 加载器 module: { rules: [ // loader的配置 { test: /\.css$/i, // 检测css文件 use: ['style-loader', 'css-loader'] // use的执行顺序从右到左,style-loader将css样式放到生成的style标签中 }, { test: /\.less$/i, // loader只能使用一个loader,use可以使用多个loader use: [ // less-loader将less编译成css 'style-loader', 'css-loader', 'less-loader' ] } ] },
六、处理sass/scss资源
-
下载loader
npm install sass-loader sass webpack --save-dev -
配置laoder
{ test: /\.s[ac]ss$/i, use: [ // 将 JS 字符串生成为 style 节点 'style-loader', // 将 CSS 转化成 CommonJS 模块 'css-loader', // 将 Sass 编译成 CSS 'sass-loader' ] }
七、处理stylus资源
-
下载loader
npm install stylus stylus-loader --save-dev -
配置loader
{ test: /\.styl$/, use: ['style-loader', 'css-loader', 'stylus-loader'] }
八、处理图片资源
-
不需要下载loader，webpack内置有处理图片资源的加载器
-
配置：
{ test: /\.(png|jpe?g|gif|webp|svg)$/, type: 'asset', parser: { dataUrlCondition: { // 小于10kb的图片会转化成base64格式 // 优点:请求数量减少 缺点:体积更大 maxSize: 10 * 1024 // 10kb } } }
九、管理输出文件目录
优化output节点的filename
output: {
// 文件输出路径
path: path.resolve(__dirname, 'dist'),
// 文件名
filename: 'static/js/main.js'
},
配置generator节点
{
test: /\.(png|jpe?g|gif|webp|svg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
// 小于10kb的图片会转化成base64格式
// 优点:请求数量减少 缺点:体积更大
maxSize: 10 * 1024 // 10kb
}
},
generator: {
// 输出文件路径
filename: 'static/images/[hash][ext][query]'
}
}
自动清空dist目录
- 在output节点中添加
clean属性
output: {
// 文件输出路径
path: path.resolve(__dirname, 'dist'),
// 文件名
filename: 'static/js/main.js',
// 打包前将path中的整个目录清空
clean: true
},
十、处理字体图标资源
-
以iconfont字体图标为例子
-
配置：
// 字体图标 { test: /\.(ttf|woff2?)$/, type: 'asset/resource', generator: { // 输出文件路径 // [hash:10]表示取前十位hash值 filename: 'static/media/[hash:10][ext][query]' } }
十一、处理其他资源
- 在字体图标的处理上加上其他资源后缀即可
{
test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
type: 'asset/resource',
generator: {
// 输出文件路径
// [hash:10]表示取前十位hash值
filename: 'static/media/[hash:10][ext][query]'
}
}
十二、处理js资源
- 使用
babel，处理js代码兼容性 - 使用
ESlint，规范代码格式
Eslint
配置文件
-
配置文件放在项目根目录
-
配置文件名称，根据代码格式不同划分，会一种即可
- .eslintrc
- .eslintrc.js
- .eslintrc.json
官方文档
使用插件
-
所有插件都是构造函数，我们需要引入和通过
new关键词调用 -
以elint插件为例
-
安装
npm install eslint-webpack-plugin --save-dev -
配置文件引入
const ESLintPlugin = require('eslint-webpack-plugin') -
plugins节点配置
// 插件 plugins: [ // 插件的配置 new ESLintPlugin(options) ], -
运行
npm webpack报错，表示没有配置.eslintrc.*配置文件ERROR in [eslint] No ESLint configuration found in C:\Users\86137\Desktop\Web Front-end developer\Webpack\myCode\src.
-
-
根目录中配置
.eslintrc.js文件module.exports = { // 继承 Eslint 规则 extends: ['eslint:recommended'], env: { node: true, // 启用node中全局变量 browser: true // 启用浏览器中全局变量 }, parserOptions: { ecmaVersion: 6, sourceType: 'module' }, rules: { 'no-var': 2 // 不能使用 var 定义变量 } } -
根目录中配置
.eslintignore文件// 需要eslint规则忽略的文件目录
Babel
配置文件
- 配置文件放在项目根目录
- 配置文件名称：
- babel.config.*
babel.config.jsbabel.config.json
- .babelrc.*
.babelrc.babelrc.js.babelrc.json
- babel.config.*
presets预设
module.exports = {
// 预设
presets: [],
};
- 简单理解：就是一组 Babel 插件, 扩展 Babel 功能
@babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。@babel/preset-react：一个用来编译 React jsx 语法的预设@babel/preset-typescript：一个用来编译 TypeScript 语法的预设
官方文档
配置loader
-
安装
npm install -D babel-loader @babel/core @babel/preset-env -
配置：
// babel { test: /\.js$/, exclude: /(node_modules)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } -
presets预设可以写在节点中，也可以单独写在
babel.config.js配置文件中，方便修改module.exports = { // 能够编译es6语法 presets: ['@babel/preset-env'] }
十三、处理html资源
安装插件
npm install --save-dev html-webpack-plugin
- 作用：该插件能够自动在html文件中添加script标签引入通过webpack打包生成的js文件
配置插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 插件
plugins: [
// 插件的配置
new ESLintPlugin({
// context用来指定哪些文件需要用到eslint规范
context: path.resolve(__dirname, 'src')
}),
new HtmlWebpackPlugin({
// template属性表示在template指定的html文件结构基础上自动生成script标签引入js资源
template: path.resolve(__dirname, 'public/index.html')
})
],
十四、webpack服务器
作用
- 每次修改资源文件之后，都要重新编译才能显示最新的结果
- 下载配置
webpack-dev-server打包服务器之后，就可以实时监听资源文件的改变，自动得到新的编译结果
安装插件
npm i webpack-dev-server -D
配置
- 在五个核心节点基础上添加一个新的
devServer节点
// 开发服务器：开发模式在不会在dist文件夹中生成任何文件，本质上是在内存中编译打包文件
devServer: {
host: 'localhost', // 启动服务器域名
port: '5001', // 启动服务器端口号
open: true // 是否自动打开浏览器
}
十五、生产模式
介绍
- 生产模式指在代码完成后，需要对产品部署上线
- 这个模式下主要对代码进行优化，提高性能
配置文件
- 在项目根目录中新建
config文件夹 - 将之前配置的
webpack.config.js复制成两份，存放在config文件夹中，将名称改为webpack.dev.js和webpack.prod.js - 在之前配置的
webpack.config.js配置文件的基础之上修改一些路径
运行命令启动项目
npx webpack serve --config ./config/webpack.dev.js
npx webpack --config ./config/webpack.prod.js
配置package.json简化命令
"scripts": {
"start": "npm run dev",
"dev": "npx webpack serve --config ./config/webpack.dev.js",
"build": "npx webpack --config ./config/webpack.prod.js"
},
###十六、单独打包css文件
问题
- 之前css资源通过在js文件中引入模块的方式使用
- 导致页面渲染需要先编译和处理js文件之后，才去处理css资源
- 这样会导致页面渲染出现短暂的
白屏，严重影响用户体验
目标
- 通过插件，将css资源自动在html文件中通过
link标签引入
官方文档
下载依赖包
npm install --save-dev mini-css-extract-plugin
配置过程
-
在webpack.prod.js文件中修改配置代码
-
引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin') -
将
style-loader替换为MiniCssExtractPlugin.loader- 两者区别：
- style-loader将每个css资源存放在自动生成的style标签中
- MiniCssExtractPlugin.loader将每个css资源自动打包成一个
main.css，再通过link标签引入
- 两者区别：
-
在plugins节点中通过new关键词调用插件并指定输出文件路径
new MiniCssExtractPlugin({ filename: 'static/css/main.css' }) -
运行
npm run build查看打包结果
十七、css资源兼容性处理
下载依赖
npm i postcss-loader postcss postcss-preset-env -D
配置
- 在所有的
css-loader后面加上postcss-loader和其配置项
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-preset-env',
{
// 其他选项
}
]
]
}
}
},
配置package.json文件
"browserslist": ["last 2 version", "> 1%", "not dead"]
// 浏览器最新的两个版本 覆盖99%的浏览器 没有'dead'
封装样式loader代码块
-
由于
css-loader涉及的代码块很多重复，因此定义一个函数进行模块化封装 -
定义方法
function getStyleLoader(pre) { return [ MiniCssExtractPlugin.loader, 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ [ 'postcss-preset-env', { // 其他选项 } ] ] } } }, pre // .filter(Boolean)表示由pre参数就加上pre参数，没有就忽略 ].filter(Boolean) } -
调用方法
// 配置css { test: /\.css$/i, // 检测css文件 use: getStyleLoader() // use的执行顺序从右到左,style-loader将css样式放到生成的styl }, // less { test: /\.less$/i, // loader只能使用一个loader,use可以使用多个loader use: getStyleLoader('less-loader') }, // sass\scss { test: /\.s[ac]ss$/i, use: getStyleLoader('sass-loader') }, // stylus { test: /\.styl$/, use: getStyleLoader('stylus-loader') },
压缩css
安装插件
npm install css-minimizer-webpack-plugin --save-dev
导入插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
plugins中new一个插件
new CssMinimizerPlugin()
- 运行打包命令后，接下来看到生成的
main.js文件就是一行代码 - 生产模式中，html和js默认会压缩成一行
1335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
