Configuración simple del paquete web, configuración de enrutamiento, configuración de interceptación de interfaz, configuración básica de archivos

¿Nuevo proyecto

? ¿Andamiaje del proyecto? Reaccionar

Archivos relacionados

webpack.config.js

? ¿Usar complementos relacionados

? Ruta

html-webpack-plugin

complemento de procesamiento de archivos html

? webpack-plugin

¿Borrar el último complemento de archivo empaquetado?

? copy-webpcak-plugin

Complemento para archivos relacionados que deben copiarse cuando empaquetado (como algunas plantillas de archivos de informes)

? speed-measure-webpack-plugin

Complemento de medición de velocidad (const? SpeedMeasurePlugin = require("speed-measure? -webpack-plugin");? const? smp = new SpeedMeasurePlugin ();? const?webpackConfig = smp.wrap({})

? happypack

Alguna gestión de procesos del cargador

? Configuración de empaquetado

{

modo: 'Configuración del entorno',

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

? salida: {ruta: ruta.resovle( __dirname, 'dist'), nombre de archivo: 'main_[hash].js', publicPath: 'Establecer prefijo de URL (carácter proxy del nombre de dominio de la interfaz) según el entorno' },

? modelos: {reglas: [

Descripción: {

? prueba: 'Coincidencia regular/.js/'

> ? excluir: 'Se puede establecer el nombre del sufijo o la ruta del archivo)'

incluir: 'Incluir.

(Puede configurar el nombre del sufijo o la ruta del archivo)'

? loader: 'loader settings url-loader' o use: [loader: '? ', oprios: {plugins: [plug-in settings] u otras configuraciones} ] (use[Puede configurar el complemento happypack: happypack/loader? id = 'id de configuración del complemento happypack'])

｝

】 ｝, (configuración del cargador)

(secuencia de configuración del cargador: como cargador de URL, cargador de babel, cargador de estilos, cargador de css, cargador de archivos)

resolver: {extensiones: ['js',' json', 'jsx', 'css']}, (al importar un archivo sin sufijo, intente agregar el sufijo anterior al archivo para acceder)

? Complementos: [] (configuración del complemento)

}

bable.config.js

? ¿Complementos relacionados? { api.cache(true);

? ajustes preestablecidos: [

['@babel/preset-env',

{'objetivos': {' navegadores': ["últimas 2 versiones", "safari gt; = 7","ie gt;=9","chrome gt;=49"]｝}

],

'@babel/preset-react'

],

? -decorators", { "legacy": true }], ( ¿decorador de clase? Antiguo: se requiere soporte flexible al configurar el legado, en orden)

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

? @bacel /plugin-transform-runtime, (cambie el asistente y la polipíldora para introducirlos desde un lugar unificado, y los objetos introducidos y las variables globales están completamente aislados)

["@babel/plugin-proposal-class-properties ", { "loose" : true }], (analiza los atributos de la clase)

?@babel/plugin-proposal- operadores de asignación lógica, (como el complemento de procesamiento lógico cuando se produce un cortocircuito)

p>

? : false}], (¿optimización de encadenamiento opcional? Complemento de procesamiento de optimización profundamente anidado)

[''@babel/plugin-proposal-pipeli

ne-operator'', {propuesta: 'minimal'}], (operador de canalización de análisis)

['@babel/plugin-proposal-nullish-coalescing-operator'', {suelto: falso} ], (Eliminar operadores coalescentes no válidos)

? @babel/plugin-proposal-do-expressions, (El complemento ejecuta una expresión do {múltiples declaraciones condicionales} y el valor de finalización de la declaración final es el valor de finalización de la expresión do)

? @babel/plugin-transform-spread, (complemento de transformación del operador de extensión)

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

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

["import", {libraryName: 'antd', LibraryDirectory: 'es', style: true, }] (e introduce configuraciones en demand)

} }})

package.json

? Empaquetado de proyectos/complementos relacionados con el inicio

webpack-dev -server

? webpack-cli

? webpack-merga

? cross-env? (complemento para resolver problemas de compatibilidad del sistema de ventanas)

postcss.config.js

Se pueden realizar configuraciones de compatibilidad de versiones de navegador relacionadas

Complementos relacionados

autoprefixer ({prefer: falso, complemento: loader=gt; [request(autoprefixer)() {navegadores:['ie'gt;=9,'Safari'gt;=6]})]｝｝)

? archivos

Algunos archivos públicos se almacenan

? archivo dist (archivo empaquetado)

archivo src (archivo principal del proyecto)

activos archivo (almacenamiento de imágenes y otros recursos)

archivos relacionados con la API (archivos de procesamiento de la interfaz API)

archivos de módulos o archivos de páginas

(archivos de almacenamiento)

p>

archivos de utilidades

? request.js (archivo de interceptación de axios)

(complementos relacionados) axios, historial (uso: introduzca createBrowserHistory (utilizado por los navegadores modernos) , createMemoryHistory (utilizado por teléfonos móviles)) createBrowserHist

ory ({basename: 'enlace base (nombre de dominio del entorno)', forceRefresh: true? / Si se debe forzar la actualización de toda la página})

axios.defaults.withCredentials = true; //Establecer dominio cruzado y establezca permisos de acceso para permitir que la información de las cookies se transporte entre dominios

Configuración de interceptación:

? procesamiento de interceptación de parámetros, por ejemplo: agregar token u otros encabezados de solicitud (config.['headers'].token=......))},?function?(error)?{ return Promise.reject(error); });

? axios.interceptors.response.use(function?(response)?{ return respuesta; (solicite un manejo exitoso de errores de parámetros de retorno, como: devolver diferentes códigos de estado para saltar a diferentes páginas, invalidación del token y reinicio de sesión... ...)},?función?(error)?{ return Promise.reject(error (solicitud de manejo de errores, como: error de inicio de sesión, saltar para iniciar sesión nuevamente)} );

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

Principio de configuración (según NODE_ENV=='producción' o 'desarrollo' configurado en el archivo package.json más el proxy establecido por Deserver.proxy en la clave webpack.config.js para configurar el prefijo de URL del entorno formal o de desarrollo y coincidir con la configuración createBrowserHistory.basename)

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

index.js (introducción global, como: utils .request, @babel/polyfill, activos/.peg, el prefijo de enrutamiento se configura globalmente en la ruta)

routers.js ( archivo de enrutamiento)

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

index.html (puede introducir recursos de terceros a nivel mundial)

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

La configuración del paquete web aquí se basa en webpack4.30 La configuración de la versión no es la última versión y la configuración es relativamente engorrosa El complemento multiproceso utilizado en. happypack para iniciarse rápidamente y el paquete puede entrar en conflicto con algunos métodos de configuración de su proyecto.