Ferramentas de embalagem
Código desenvolvido usando frameworks (React, Vue), sintaxe modular ES6, Less/Sass e outros pré-processadores CSS e outras sintaxes devem ser compilados em JS, CSS e outras sintaxes que o navegador possa reconhecer antes de serem executados.
Portanto, precisamos de ferramentas de empacotamento para nos ajudar a fazer essas coisas. Além disso, as ferramentas de empacotamento também podem compactar código, realizar processamento de compatibilidade, melhorar o desempenho do código, etc.
Quais ferramentas de embalagem existem?
Grunt, Gulp, Parcel, Webpack , Rollup, Vite
O que é webpack
Webpack é uma ferramenta front-end de empacotamento de recursos estáticos. Da perspectiva do webpack, todos os arquivos de recursos no front end (js/json/css/img/less/…) serão processados como módulos. Usando um ou mais arquivos como ponto de entrada para empacotamento, compilamos e combinamos todos os arquivos de todo o nosso projeto em um ou mais arquivos e os produzimos. O arquivo de saída é o arquivo compilado e pode ser executado na seção do navegador. Ele realizará análises estáticas com base nas dependências do módulo, empacotará e gerará os recursos estáticos correspondentes (bundle).
O próprio Webpack tem funções limitadas:
Modo de desenvolvimento: só pode compilar a sintaxe do Módulo ES em JS
Modo de produção: pode compilar a sintaxe do Módulo ES em JS e também pode compactar código JS
Cinco conceitos básicos de webpack
1.
Entry (Entry) instrui o webpack a usar qual arquivo como ponto de partida de entrada para iniciar o empacotamento, analisar e construir o gráfico de dependência interna.
2.Output
output (Output) instrui o webpack onde gerar os pacotes de recursos empacotados e como nomeá-los.
3. Loader
Loader permite que o webpack processe arquivos não-JavaScript (o próprio webpack só entende JavaScript).
4.PluginsPlugins
podem ser usados para executar uma ampla gama de tarefas. Os plug-ins variam desde otimização e compactação de empacotamento até redefinição de variáveis no ambiente.
5. Modo
modo (Modo) instrui o webpack a usar a configuração do modo correspondente.
Uso básico do webpack
npm init -yInicialize um arquivo de descrição do pacote. Após a execução, package.json será gerado
. Habilite o Webpack (modo de desenvolvimento): npx webpack ./src/main.js --mode=developmente toda vez que você gravar o arquivo de configuração, você definirá diretamente npx webpack
a marca de sucesso:
Por padrão, o Webpack irá empacotar e gerar o arquivo para o diretório dist.
configuração básica do webpack
Crie um novo arquivo de configuração no diretório raiz do projeto: webpack.config.js
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");
module.exports = {
// 入口
// 相对路径和绝对路径都行
entry: "./src/main.js",
// 输出
output: {
// path: 文件输出目录，必须是绝对路径
// path.resolve()方法返回一个绝对路径
// __dirname 当前文件的文件夹绝对路径
path: path.resolve(__dirname, "dist"),
// 入口文件输出路径
filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
// clean: true, // 自动将上次打包目录资源清空
},
// 加载器
module: {
rules: [],
},
// 插件
plugins: [],
// 模式
mode: "development", // 开发模式
};
O Webpack é executado com base em Node.js, portanto adota a especificação modular Common.js
Manipulando recursos de estilo
O próprio Webpack não pode reconhecer recursos de estilo (Css, Less, Sass, Scss, Styl), então precisamos usar o Loader para ajudar o Webpack a analisar os recursos de estilo.
Lidar com recursos CSS
Dois carregadores precisam ser baixados: npm i css-loader style-loader -D
css-loader: Responsável por compilar arquivos CSS em módulos que o Webpack possa reconhecer.
style-loader: Ele criará dinamicamente uma tag Style, que contém o conteúdo do módulo CSS no Webpack.
Uso: Adicione às regras em webpack.config.js:
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
],
src/css/index.css:
.box1 {
width: 100px;
height: 100px;
background-color: red;
}
src/main.js:
import count from "./js/count";
// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";
console.log(count(2, 1));
público/index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webpack5</title>
</head>
<body>
<h1>Hello Webpack5</h1>
<!-- 准备一个使用样式的 DOM 容器 -->
<div class="box1"></div>
<!-- 引入打包后的js文件，才能看到效果 -->
<script src="../dist/static/js/main.js"></script>
</body>
</html>
Execute o comando: npx webpack, abra a página index.html para ver o efeito.
O mesmo princípio se aplica aos demais (Less, Sass, Scss, Styl), basta seguir a configuração do site oficial .
Processar recursos de imagem
O Webpack4 processa recursos de imagem através do carregador de arquivos e do carregador de URL. Agora o Webpack5 incorporou as duas funções do carregador no Webpack. Ele requer apenas uma configuração simples para processar recursos de imagem.
Uso: Adicione às regras em webpack.config.js:
{
test: /\.(png|jpe?g|gif|webp)$/,
type: "asset",
parser: {
//对图片资源进行优化
dataUrlCondition: {
maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
}
},
generator: {
//修改输出资源的名称和路径
// 将图片文件输出到 static/imgs 目录中
// 将图片文件命名 [hash:8][ext][query]
// [hash:8]: hash值取8位
// [ext]: 使用之前的文件扩展名
// [query]: 添加之前的query参数
filename: "static/imgs/[hash:8][ext][query]",
},
},
Otimize recursos de imagem: converta imagens menores que um determinado tamanho em formato URI de dados (formato Base64, vantagens: reduzir o número de solicitações; desvantagens: tamanho maior), as imagens são incorporadas em js na forma de URI de dados, sem saída para dist . (Nota: Você precisa limpar os arquivos gerados pelo último empacotamento e depois reembalar para ter o efeito )
O Webpack produzirá todos os recursos de imagem empacotados no diretório dist. Os recursos de estilo são processados pelo style-loader e empacotados em main.js, portanto, não há saída adicional.
type: "asset/resource" é equivalente ao file-loader, que converte arquivos em recursos que o Webpack pode reconhecer, e não processa o resto; type:
"asset" é equivalente ao url-loader, que converte arquivos em recursos que o Webpack pode reconhecer e, ao mesmo tempo, recursos menores que um determinado tamanho serão processados no formato URI de dados.
Processar recursos js
O processamento de js do Webpack é limitado. Ele só pode compilar a sintaxe modular ES em js e não pode compilar outra sintaxe. Como resultado, js não pode ser executado em navegadores como o IE, portanto, algum processamento de compatibilidade deve ser feito. Em segundo lugar, durante o desenvolvimento, a equipe possui requisitos rígidos quanto ao formato do código e precisa usar ferramentas profissionais para detectá-lo. Para processamento de compatibilidade js, use Babel; para formato de código, use Eslint.
Eslint
Uma ferramenta usada para detectar a sintaxe js e jsx. Escreva várias regras no arquivo de configuração do Eslint. Ao executar o Eslint no futuro, o código será verificado com base nas regras escritas.
1. Baixe o pacote:npm i eslint-webpack-plugin eslint -D
2. Defina o arquivo de configuração Eslint .eslintrc.js:
module.exports = {
// 继承 Eslint 规则
extends: ["eslint:recommended"],
env: {
node: true, // 启用node中全局变量
browser: true, // 启用浏览器中全局变量
},
parserOptions: {
// 解析选项
ecmaVersion: 6, // ES 语法版本
sourceType: "module", // ES 模块化
ecmaFeatures: {
// ES 其他特性
jsx: true // 如果是 React 项目，就需要开启 jsx 语法
}
},
rules: {
"no-var": 2, // 不能使用 var 定义变量
},
};
regras Regras específicas:
"desligado" ou 0 - desativa a regra
"avisar" ou 1 - ativa a regra, usa nível de aviso erros: avisar (não fará com que o programa seja encerrado)
"erro" ou 2 - ativa a regra , use erros de nível de erro: erro (quando acionado, o programa será encerrado)
estende a herança: É muito trabalhoso escrever regras pouco a pouco durante o desenvolvimento, então há uma maneira melhor de herdar as regras existentes:
Regras oficiais do Eslint: eslint:recomendado
Regras oficiais do Vue Cli: plugin:vue/essential
Regras oficiais do React Cli: aplicativo de reação
3. Modifique main.js
4. Configure webpack.config.js:
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
……
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
],
5. Execute o comando:npx webpack
O VSCode possui um plug-in Eslint, para que você possa ver erros sem compilar. Neste momento, todos os arquivos do projeto serão verificados pelo Eslint por padrão, e os erros serão relatados para arquivos empacotados no diretório dist.
Portanto, você só precisa verificar os arquivos em src e não há necessidade de verificar os arquivos em dist. Use Eslint para ignorar os arquivos. Crie os seguintes arquivos no diretório raiz do projeto .eslintignore:
# 忽略dist目录下所有文件
dist
Babel
Compilador JavaScript, usado principalmente para converter código escrito na sintaxe ES6 em sintaxe JavaScript compatível com versões anteriores, para que possa ser executado em versões atuais e antigas de navegadores ou outros ambientes.
1. Baixe o pacote:npm i babel-loader @babel/core @babel/preset-env -D
2. Defina o arquivo de configuração do Babel babel.config.js:
module.exports = {
presets: ["@babel/preset-env"],
};
presets: É um conjunto de plug-ins do Babel que estendem as funções do Babel.
@babel/preset-env: Uma predefinição inteligente que permite usar o JavaScript mais recente.
@babel/preset-react: Uma predefinição para compilar a sintaxe React jsx.
@babel/preset-typescript: Uma predefinição para compilar a sintaxe TypeScript.
3. Modifique main.js
4. Configure webpack.config.js:
Adicione: nas regras:
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules代码不编译
loader: "babel-loader",
},
5. Execute o comando:npx webpack
Lidar com recursos HTML
1. Baixe o pacote: npm i html-webpack-plugin -D
2. Configure webpack.config.js:
const HtmlWebpackPlugin = require("html-webpack-plugin");
……
plugins: [
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "public/index.html"),
}),
],
3. Modifique index.html: Remova o arquivo js importado, pois o HtmlWebpackPlugin o apresentará automaticamente.
4. Execute o comando:npx webpack
automação
Cada vez que você termina de escrever o código, você precisa inserir instruções manualmente para compilar o código. Isso é muito problemático. Vamos usar o servidor de desenvolvimento para automatizá-lo.
1. Baixe o pacote: npm i webpack-dev-server -D
2. Configure webpack.config.js:
module.exports = {
// 添加开发服务器
devServer: {
host: "localhost", // 启动服务器域名
port: "3000", // 启动服务器端口号
open: true, // 是否自动打开浏览器
},
};
3. Execute o comando: npx webpack serve
Nota: Ao usar o servidor de desenvolvimento, todo o código será compilado e empacotado na memória e não será enviado para o diretório dist. Ao desenvolver, você só se preocupa se o código pode ser executado e eficaz. Você não precisa saber em que o código é compilado.
modo de produção
O modo de produção é que, após o código ser desenvolvido, precisamos obtê-lo e implantá-lo online no futuro. Este modo otimiza principalmente o desempenho da execução do código e a velocidade do empacotamento do código. O webpack.config.js original torna-se dois.
Diretório de arquivos:
├── webpack-test (项目根目录)
├── config (Webpack配置文件目录)
│ ├── webpack.dev.js(开发模式配置文件)
│ └── webpack.prod.js(生产模式配置文件)
├── node_modules (下载包存放目录)
├── src (项目源码目录，除了html其他都在src里面)
│ └── 略
├── public (项目html文件)
│ └── index.html
├── .eslintrc.js(Eslint配置文件)
├── babel.config.js(Babel配置文件)
└── package.json (包的依赖管理配置文件)
O diretório do arquivo mudou, então todos os caminhos relativos precisam voltar um diretório para encontrar os arquivos correspondentes, e webpack.dev.js precisa ser modificado:
path: undefined, // 开发模式没有输出，不需要指定输出目录
// clean: true, // 开发模式没有输出，不需要清空输出结果
context: path.resolve(__dirname, "../src"),
template: path.resolve(__dirname, "../public/index.html"),
Instruções para executar o modo de desenvolvimento:npx webpack serve --config ./config/webpack.dev.js
Modifique webpack.prod.js:
path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
mode: "production",
Instruções para executar o modo de produção:npx webpack --config ./config/webpack.prod.js
Configurar instruções de execução rápida
Para facilitar a execução de instruções em diferentes modos, defina as instruções em scripts em package.json:
// package.json
{
// 其他省略
"scripts": {
"start": "npm run dev",
"dev": "npx webpack serve --config ./config/webpack.dev.js",
"build": "npx webpack --config ./config/webpack.prod.js"
}
}
Instruções de inicialização posteriores: (início não precisa ser adicionado com execução, outros precisam ser adicionados)
Modo de desenvolvimento: npm startou npm run dev
modo de produção:npm run build
Lidar com CSS separadamente
O arquivo CSS está atualmente empacotado em um arquivo js. Quando o arquivo js for carregado, uma tag de estilo será criada para gerar o estilo. Dessa forma, para o site, haverá um fenômeno de tela inicial e a experiência do usuário não será bom. Deve ser um arquivo CSS separado, pois o desempenho do carregamento da tag Link é melhor.
1. Baixe o pacote: npm i mini-css-extract-plugin -D
2. Configure webpack.prod.js:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
rules: [
{
test: /\.css$/,
// 将先前的"style-loader"替换成MiniCssExtractPlugin.loader
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
plugins: [
// 提取css成单独文件
new MiniCssExtractPlugin({
// 定义输出文件名和目录
filename: "static/css/main.css",
}),
],
3. Execute o comando:npm run build
Tratamento de compatibilidade CSS
1. Baixe o pacote: npm i postcss-loader postcss postcss-preset-env -D
2. Configure webpack.prod.js:
rules:[
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
"less-loader",
],
},
]
Quando há muitas configurações, o processamento de compatibilidade acima será um pouco redundante, portanto pode ser abstraído em uma função para mesclar as configurações:
// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
return [
MiniCssExtractPlugin.loader,
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
"postcss-preset-env", // 能解决大多数样式兼容性问题
],
},
},
},
preProcessor,
].filter(Boolean);
};
……
rules:[
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: getStyleLoaders(),
},
{
test: /\.less$/,
use: getStyleLoaders("less-loader"),
},
{
test: /\.s[ac]ss$/,
use: getStyleLoaders("sass-loader"),
},
]
3. Controle de compatibilidade: você pode adicionar browserslist no arquivo package.json para controlar a extensão da compatibilidade de estilo.
{
// 其他省略
"browserslist": ["last 2 version", "> 1%", "not dead"]
}
3. Execute o comando:npm run build
Compressão CSS
1. Baixe o pacote: npm i css-minimizer-webpack-plugin -D
2. Configure webpack.prod.js:
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
plugins: [
// css压缩
new CssMinimizerPlugin(),
],
3. Execute o comando:npm run build
O modo de produção padrão já está habilitado: compactação html e compactação js, nenhuma configuração adicional é necessária.