El concepto básico de webpack:
Weibo pack es una herramienta de construcción de recursos de front-end y un empaquetador de módulos estáticos. Desde la perspectiva de webpack, todos los recursos de front-end se tratarán como un módulo y se basarán estáticamente en las dependencias de los módulos. Analizar, empaquetar y generar los recursos estáticos correspondientes (paquete)
entrada: instrucciones de entrada, comenzar a empaquetar con qué archivo como punto de entrada, analizar y construir el gráfico de dependencia interno
salida: instrucciones de salida, donde se encuentran los paquetes de recursos empaquetados por webpack salida y cómo
Cargador de nombres : deje que Weibo pack maneje esos archivos que no son js.
complementos: realice algunas tareas más poderosas. El alcance de los complementos incluye, desde la optimización y compresión del empaque, hasta la redefinición del
modo variable en el entorno : hay modo de desarrollo y modo de producción, el entorno que permite que el código se ejecute localmente en el modo de desarrollo, la configuración del entorno de producción, el entorno que puede optimizar el código para que se ejecute en el
paquete web5
1. Elimina automáticamente los polyfills de node.js, deja de llenar automáticamente estos módulos principales y céntrese en los módulos compatibles con el front-end (puede agregar manualmente un polyfill para el módulo principal de node.js, el mensaje de error le indicará cómo lograr este objetivo)
2. Chunk e ID del módulo, nuevos algoritmos para largo plazo Se ha agregado el almacenamiento en caché y estas funciones están habilitadas de forma predeterminada en el modo de producción
3. ID de
fragmento en el entorno de producción Es necesario tener reglas de nomenclatura de fragmentos
dentro del paquete web 4. Tree Shaking
puede manejar el movimiento de árboles de módulos anidados
5. Webpack ahora capaz de lidiar con la relación entre múltiples módulos
6. Capaz de sacudir árboles para commonjs
7. Puede generar código ES5 y ES6
8. Supervise los archivos de salida, solo los archivos modificados se actualizarán durante la reconstrucción. Esta actualización buscará los archivos de salida en la primera compilación para ver si hay algún cambio, y luego decidirá si generar los archivos.
A continuación se muestran algunos detalles de la entrada de configuración
1.
2.salida
salida: { // nombre de archivo (nombre especificado + directorio) nombre de archivo: 'js / [nombre] .js', // directorio de archivo de salida (directorio público para todos los recursos públicos) ruta: resolve (__ dirname, 'build'), / / Todos los recursos introducen un prefijo de ruta común -> 'imgs / a.jpg' (esta es la búsqueda del directorio actual) -> '/ imgs / a.jpg' (esta es la búsqueda bajo la dirección del servidor, prefiero use this) publicPath: '/', // (se usa más en entornos de producción) chunkFilename: '[nombre] _chunk.js', // El nombre del fragmento sin entrada (importación u opciones) Si no existe tal, será el primero en generar la biblioteca de directorios : '[nombre]', // El nombre de la variable expuesto al exterior de toda la biblioteca, el externo se puede importar y usar directamente, generalmente combinado con dll más un paquete separado de un library, y luego se introdujo y usó libraryTarget: 'window', // El nombre de la variable se agrega a qué navegador libraryTarget: 'global', // El nombre de la variable se agrega a qué nodo libraryTarget: 'commonjs',
},
3.configuración del módulo
módulo: { reglas: [ {prueba: /. css Error de análisis de KaTeX: Se esperaba 'EOF', obtuvo '}' en la posición 81:… ',' css-loader ']} ̲, {… /, // No marcar node_modules El archivo js bajo exclude: / node_modules /, // Solo verifica el archivo js en src include: resolve (__ dirname, 'src'), // prioriza la aplicación : 'pre', // retrasa la aplicación // enforce: 'post ' loader:' eslint-loader '} ] }
4.resolver configuración
// Las reglas del módulo de análisis
resuelven: { // Alias de la ruta del módulo de análisis de la configuración: puede abreviar la ruta, la desventaja es que la ruta no solicita el alias: { $ css: resolve (__ dirname, 'src / css') }, / / La configuración omite el nombre del sufijo de la ruta del archivo, así que no tome el mismo nombre de archivo, de lo contrario causará problemas. Extensions: [ '. Js ', 'json', '. Css' ], // Dígale al paquete web qué directorio para encontrar el módulo de análisis, el nivel superior El nivel superior encuentra // módulos: ['node_modules'], // Pero si escribe más profundo, es muy inconveniente, puede cambiar la forma de escribir, escriba directamente los módulos de ruta : [resolve (__ dirname, '... / ... / node_modules'), 'node_modules'] }
5.configuración detallada de devServer
devServer: { // El directorio donde se ejecuta el código contenBase: resolve (__ dirname, 'build'), // Monitorea todos los archivos en el directorio contentBase, una vez que el archivo cambia, volverá a cargar watchContentBase: true, // Algunos archivos necesitan para ser ignorado watchOptions: { ignored: / node_modules / }, // Habilite la compresión gzip para que el servidor sea más rápido y vea el efecto más rápido compress: true, // número de puerto port: 5000, // nombre de dominio host: 'localhost', // Abrir automáticamente el navegador open: true, // Habilitar la función HMR hot: true, // No iniciar la información de registro del servidor clientLoLever: 'none', // Excepto por alguna información básica de inicio, no mostrar quiet: true , // Si hay un error, no pregunte overlay: true en pantalla completa , // El proxy del servidor -> Resuelva el problema entre dominios del proxy del entorno de desarrollo : {
// Una vez que el servidor devServer (5000) recibe la solicitud de / api / xxx, reenviará la solicitud a otro servidor (3000)
'/ api': { target: "http: // localhost: 3000", // enviar Al realizar la solicitud, la ruta de la solicitud se reescribe y / api / xxx -> / xxx (eliminar api) pathRewrite: { '^ / api': '' } } } }
6.configuración de optimización
const TerserWebpackPlugin = require ('terser-webpack-plugin')
necesita usar
TerserWebpackPlugin en el entorno de producción , comprimir el paquete de html y css, necesita importar y escribir en la parte superior
optimización: { // Extrae el código común y el paquete splitChunks: { chunks: 'all', // Los siguientes son los valores predeterminados, siempre que la oración anterior sea suficiente minSize: 30 * 1024, // El fragmento mínimo dividido es 30kb maxSize: 0, // Máximo ilimitado minChunks: 1, // Los fragmentos que se extraerán se cotizan al menos una vez maxAsyncRequests: 5, // El número máximo de archivos cargados en paralelo durante la carga bajo demanda maxInitRequests: 3, // Entrada js file El número máximo de solicitudes concurrentes automaticNameDelimiter: '~', // Name connector name: true, // Puede usar la regla de nomenclatura cacheGroups: {// El grupo de fragmentos divididos // El archivo node_modules se expandirá en el chunk of the wendors group--> vendors ~ xxx.js // Para cumplir con las reglas anteriores, como: el tamaño excede los 30kb, cotice al menos una vez proveedores: { prueba: / [\] node_modules [\ /] /, prioridad: -10 }, predeterminado: { / / El fragmento que se va a extraer se cita al menos 2 veces, minChunks: 2, // Prioridad : -20,
// Si el módulo actual que se va a empaquetar es el mismo que el módulo extraído anteriormente, se reutilizará en lugar de volver a empaquetar el módulo para resolver el problema de la
reutilización repetida del empaque .} } }, runtimeChunk:{ //将当前模块记录其他模块的hash值单独打包成一个文件runtime,能够保证其他文件的持久化，否则会导致缓存失效 //main.js文件里面不再储存这个hash值，而是另外一个文件runtime存储，这样当文件改变的时候，main文件也不会被改变 name:entrypoint => 'runtime-${entrypoint.name}' }, minizer:{ //配置生产环境的压缩方案，js和css [new TerserWebpackPlugin({ //开启缓存 cache:true, //开启多进程打包 parallel:true, //启动sourse-map,否则会被压缩掉 sourceMap:true })] } }