Código fuente del complemento Webpack

? ¿Andamiaje de proyecto? ¿Reacción

? Archivos relacionados

Paquete de red.js

¿Usar complementos relacionados

? ¿Ruta

? html-webpack-plugin

Complemento de procesamiento de archivos HTML

? clean-web pack-plugin

Borrar el último complemento de archivo empaquetado.

? copiar-webpcak-plugin

? ¿Complementos para archivos relacionados que deben copiarse al empaquetar (como algunas plantillas de archivos de informes)

? ¿Complemento de paquetes de red para medir la velocidad

? ¿Complemento de prueba de velocidad? (const? SpeedMeasurePlugin = require(" speed-measure-web pack-plugin ");? const? SMP = new SpeedMeasurePlugin();? const? webpackConfig = smp.wrap({})

?Feliz Paquete

¿Alguna gestión de procesos del cargador

? Configuración del paquete

{

Modo: "Configuración del entorno",

?Entrada: 'Configuración del archivo de entrada',

Salida: {ruta: ruta.resolvle(_ _dirname, 'dist'), nombre de archivo: 'main_[hash]', ruta pública: 'Establecer URL. prefijo según el entorno (carácter proxy de dominio de interfaz' },

? Modelo: {Reglas: [

Descripción: {

? prueba: 'coincidencia regular /' . (Puedes configurar el sufijo o la ruta del archivo) '

? Loader:' loader set URL-loader ' o usar: [loader: '? settings }](Use [puede configurar el complemento happypack: happypack/loader? Id = 'id de la configuración del complemento happypack'])

}

]}, (cargador configuración)

(Secuencia de configuración del cargador: por ejemplo, cargador de URL, cargador de Babel, cargador de estilos, cargador de CSS, cargador de archivos).

? Análisis: {Extensión: ['JS', 'JSON', 'JSX', 'CSS']}, (Al importar un archivo sin sufijo, intente agregar un sufijo al archivo para facilitar el acceso)

? Complemento: [] (Configuración del complemento)

}

bable.config.js

Complemento relacionado (función de uso (API) { API . caché (verdadero) ;

?Predeterminado:[

['@babel/preset-env ',

{'targets':{'navegadores ':["Las dos últimas versiones"," safari>=7","ie>=9","chrome>=49"]}}

],

?@ babel/ preset-react '

],

? return { "plugins":{

?["@babel/plugin-proposal-decorators", {" Legacy": true}], (¿decorador de clase? antiguo: necesita soporte flexible al configurar el legado, en orden)

@babel/plugin-proposal-dynamic-import, (complemento de controlador de importación)

@ bacel/plugin-transform-runtime, (el ayudante y la polipíldora se importan desde el mismo lugar, y los objetos importados y las variables globales están completamente aislados)

[. -class-properties ", {"loose": true}], (analizar propiedades de clase)

@babel/plugin-proposal-logic-assignment-operators, (por ejemplo, complemento de procesamiento lógico en caso de cortocircuito)

[' ' @ babel/plugin-proposal-optional-chaining '', {loose: false}], (¿optimización de cadena opcional? Complemento de procesamiento de optimización profundamente anidado)

[' ' @babel/plugin-proposal-pipeline-operator ' ', {propuesta:' minimo'}], (operador de canalización de análisis)

[' @babel /plugin-proposal-nullish -coalescing-operator ' ', {loose: false}], (eliminar operador coalescente no válido)

? @babel/plugin-proposal-do-expressions, (ejecución del complemento Una expresión do {multiple conditional Statement} , el valor de finalización de la última declaración es el valor de finalización de la expresión do).

? @babel/plugin-transform-spread, (Complemento de transformación de operador extendido)

? ["@babel/plugin-proposal-object-rest-spread", {"loose": true, "use building": true}], (complemento de operación extendida)

? ["@babel/plugin-transform-object-assign"], (El complemento admite Object.assign())

["import", {Nombre de la biblioteca: 'antd', directorio de la biblioteca: 'es', estilo: verdadero, }] (e importar configuraciones según sea necesario)

} }})

paquete.json

Paquete de proyecto/inicio relacionado complementos

? servidor-de-desarrollo-webpack

? webpack-cli

? webpack-merga

? ¿Entorno cruzado? (El complemento resuelve el problema de compatibilidad del sistema de ventanas)

postcss.config.js

Puede configurar la compatibilidad para las versiones relevantes del navegador.

Complementos relacionados

autoprefixer({prefer:false, plugin:loader =>[request(autoprefixer)({ browsers:[' ie '>=9,' Safari' & gt=6]})]}})

? Documentos públicos

Algunos documentos públicos se almacenan.

? ¿Archivos de distribución (archivos empaquetados)

? Archivo src (archivo principal del proyecto)

Archivo de activos (utilizado para almacenar recursos como imágenes)

Archivos relacionados con la API (archivo de procesamiento de la interfaz API)

Archivo de módulo o archivo de página

? (archivo de almacenamiento)

Archivo de utilidad

? Request.js (archivo interceptado por axios)

? (Complementos relacionados) axios, historial (uso: introduce createBrowserHistory (para navegadores modernos) y createMemoryHistory (para teléfonos móviles)) createBrowserHistory ({ basename:' enlace base (nombre de dominio del entorno)'), forceRefresh: ¿verdadero? /Forzar actualización de toda la página})

axios con credenciales = true;? // Establecer dominios cruzados, establecer permisos de acceso y permitir información de cookies entre dominios.

Configuración de interceptación:

? axios.interceptors.request.use(function?(config)?{configuración de retorno;(procesamiento de interceptación de parámetros de solicitud, como agregar un token u otra cosa al encabezado de la solicitud (config.['title'].

token=...))}?función? (error)? { return Promise.reject(error); });

axios .interceptores uso (función? (respuesta)? {devolver respuesta; (solicitar manejo de error de parámetro de devolución exitoso, como: devolver diferente ¿El código de estado salta a una página diferente, inicia sesión nuevamente con un token no válido...)? otra vez) ));

? History.js (configuración del entorno de enrutamiento)

? Principio de configuración (basado en node_env = = 'producción' o 'desarrollo' configurado en el archivo package.json y la clave de proxy establecida por Deserver.proxy en webpack.config.js, configure el prefijo de URL del entorno de desarrollo o formal, y crear la configuración del nombre base de BrowserHistory).

? Until.js (archivo de método público)

Index.js (introducción global, como utils.request, @babel/polyfill, activos/.peg, configuración global del prefijo de enrutamiento).

enrutadores.js? (Archivo de enrutamiento)

App.js (un archivo de construcción serio, que establece el marco general de la página y la configuración de salto de enrutamiento, y también realiza algunas configuraciones globales)

Index.html ( Puede introducir recursos de terceros a nivel mundial).

——————————————————————————————————————————

La configuración del paquete web aquí se basa en la versión 4.30 del paquete web, que aún no es la última versión y la configuración es relativamente complicada. Los complementos multiproceso que se inician y empaquetan rápidamente con happypack pueden entrar en conflicto con ciertos métodos de configuración de su proyecto.