puntos de conocimiento del paquete web
WebPack
puede considerarse como un empaquetador de módulos: lo que hace es analizar la estructura de su proyecto, encontrar módulos JavaScript y algunos otros lenguajes extendidos (Scss, TypeScript, etc.) que no pueden ser ejecutados directamente por navegadores, y convertirlos Empaquetado en un formato adecuado para uso del navegador
1. ¿Por qué utilizar webpack?
- El desacoplamiento requiere:
- Al utilizar SPA (Aplicación de una sola página) para desarrollar grandes proyectos, resuelva el problema de desacoplamiento y mantenimiento entre módulos;
- Necesidades de ingeniería de front-end:
- El desarrollo de front-end evoluciona gradualmente a ingeniería, entendiendo el proceso de construcción de proyectos de frameworks de front-end (como React, Vue, Angular);
- Necesidades de expansión del proyecto:
- Comprender los conceptos básicos de Webpack (como Babel Loader, Plugin) para facilitar el desarrollo colaborativo y la integración de proyectos;
- Necesidades de la entrevista:
- Las habilidades necesarias para ingresar a la empresa de Internet de primera línea;
2. Los cuatro conceptos centrales de Webpack :
Entrada: decirle al paquete web dónde está el archivo de entrada
Salida: decirle al paquete web dónde colocar el archivo compilado
Cargadores: decirle al paquete web cómo convertir antes de agregarlo al gráfico de dependencia, como es6 a es5, sass a css
Complementos : Agregue las operaciones que desee durante el proceso de compilación, cosas que el cargador no puede hacer
3. Pasos del paquete web para crear un entorno de desarrollo de React
Primero, debes tener un entorno de nodo, ingresa al sitio web oficial de Node.js , selecciona el sistema correspondiente para descargar el paquete de instalación. Administrador npm integrado después de instalar el nodo
Configurado para
npmusar el espejo Taobao por defecto
npm config set registry https://registry.npm.taobao.org
Instale el
cnpmpaquete, elnpmcomando se reemplaza por uncnpmcomando después de que la instalación sea exitosa
npm install -g cnpm --registry=https://registry.npm.taobao.org
## 安装成功之后，直接像使用npm一样使用cnpm即可，例如：安装某个包就变成了
cnpm i packageName
Establecer variables de entorno
Cree una carpeta de proyecto en myappun archivo, por ejemplo, el archivo es el directorio raíz del proyecto. Abra el símbolo del sistema y ejecute:
cd myapp
Complete las siguientes operaciones en secuencia:
El primer paso es instalar el módulo
Crear archivo package.json
# 手动配置
npm init
# 自动配置
npm init -y
Instalar el módulo de reacción
# 安装react
cnpm install react --save
# 安装react-dom
cnpm install react-dom --save
Instalar la herramienta de paquete web
# 安装webpack和webpack-cli
cnpm install webpack webpack-cli --save-dev
Instalar relacionados con babel
# 安装 babel和react相关加载器
cnpm i babel-loader @babel/core @babel/preset-env @babel/preset-react -D
Instalar cargador CSS
cnpm i css-loader style-loader -D
Instalar el complemento HTML
cnpm i html-webpack-plugin -D
PD: [según la diferencia entre la instalación en el entorno de desarrollo y el entorno de producción]
Entorno de desarrollo de la etapa de codificación, el proyecto requiere depender de la necesidad de una línea de referencia, por ejemplo: herramienta de construcción de paquetes web, como carga, uso
--saveo-Scomando de instalación de Babel ;Entorno de producción, oficialmente la prestación de servicios externos en la línea después de la etapa del proyecto todavía necesita depender del soporte, como: bibliotecas jQuery, enrutamiento, uso
--save-devo-Dcomando para instalar;
El segundo paso es crear una estructura de directorio
La estructura de directorios del proyecto es:
myapp
-Public [directorio de archivos de recursos estáticos]
- src [directorio de archivos fuente del proyecto]
- dist [directorio de archivos del paquete]
- webpack.config.js [archivo de configuración del paquete web]
- package.json [archivo de configuración de gestión de paquetes NPM]
- node_modules [directorio de almacenamiento de dependencias en el proyecto]
En el directorio público, cree index.html, que es la página de inicio predeterminada del proyecto.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Hello React Webpack</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
En el directorio src, cree index.js, que es el archivo de entrada del proyecto
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<div>Hello React!</div>,document.getElementById('root'));
Cree un archivo de configuración webpack.config.js en el directorio raíz del proyecto y complete la siguiente configuración a su vez:
(1) Entrada de configuración (entrada)
module.exports = {
entry:'./src/index.js'
}
(2) Configurar la salida (salida)
const path = require('path');
module.exports = {
// ...
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'main.js'
}
}
(3) Cargador de configuración (cargador)
module.exports = {
// ...
module:{
rules:[
{
test: /\.css$/,
use:['style-loader','css-loader']
},
{
test: /\.jsx?$/, // jsx/js文件的正则
exclude: /node_modules/, // 排除 node_modules 文件夹
use:{
// loader 是 babel
loader: 'babel-loader',
options: {
// babel 转义的配置选项
babelrc: false,
presets: [
// 添加 preset-react
require.resolve('@babel/preset-react'),
[require.resolve('@babel/preset-env'), {
modules: false}]
],
cacheDirectory: true
}
}
}
]
}
}
(4) Configurar complemento (complemento)
const HtmlWebPackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
plugins:[
new HtmlWebPackPlugin({
template: 'public/index.html',
filename: 'index.html',
inject: true
})
]
}
El atributo inyectar en los complementos tiene cuatro valores verdadero | 'cabeza' | 'cuerpo' | falso, el valor predeterminado es cuerpo, es decir, el script se inserta en la parte inferior del cuerpo
Ejecutar comandos de empaquetado
npx webpack --mode development
npm run buildOperación de empaquetado del comando de configuración :
//在 package.json 文件添加 build 项
{
"scripts": {
"build": "webpack --mode production"
}
}
Ejecute el comando de empaquetado:
npm run build
El tercer paso es construir servicios locales.
Dependencias de instalación
cnpm i webpack-dev-server -D
Configure la información relacionada con el servicio local en el archivo webpack.config.js
module.exports = {
// ...
devServer: {
contentBase: './dist',
host: 'localhost',
port: 3000
}
}
Configure el comando de inicio en el archivo package.json
{
"scripts": {
"dev": "webpack-dev-server"
}
}
Ejecutar el comando de inicio de servicio
npm run dev
Nota:
Si se informa un error después de que se inicia el servidor, significa que las versiones webpack y webpack-dev-server no son compatibles, y puede reducir la configuración e instalar