Resumen de notas del paquete web (1)

Primero, una exploración preliminar del paquete web

1. ¿Qué es exactamente el paquete web?

webpack es un paquete de módulos.

webpack es un empaquetador de módulos . Su objetivo principal es empaquetar archivos JavaScript juntos. Los archivos empaquetados se utilizan en el navegador, pero también es capaz de transformar, empaquetar (paquete) o empaquetar (paquete) cualquier recurso (recurso o activo).

2. Cree un entorno de paquete web

instalación

1.entorno de nodo

2. Instalar webpack a nivel mundial

npm install webpack webpack-cli -g

webpack -v

La instalación global hará que las diferentes versiones del paquete web no se inicien al mismo tiempo

3. Instale el paquete web en el proyecto.

npm install webpack webpack-cli --save--dev
# === npm install webpack webpack-cli -D

comando npx

Uso: npx + comando invocado

Cuando instalamos webpack en proyectos tanto globales como locales

npx webpack // 会在当前项目的node_modules中寻找.bin/webpack
webpack // 会调用全局的webpack

npm A partir de la versión 5.2, se ha agregado el comando npx.

El principal problema que npx quiere resolver es llamar a los módulos instalados dentro del proyecto.

El principio de npx es muy simple, es decir, cuando se ejecuta, se dirigirá a las node_modules/.binvariables de ruta y entorno $PATHpara comprobar si existe el comando.

Dado que npx comprueba las variables de entorno $PATH, también se pueden llamar a los comandos del sistema.

# 等同于 ls
$ npx ls

Del registro web de Ruan Yifeng

configuración del script npm

Configuramos el script en el archivo package.json, para que lo npm run bundleejecutemos, buscaremos el comando webpack en el proyecto actual

{
    
    
  "name": "webpack-demo",
  "scripts": {
    
    
    "bundle": "webpack"
  },
  "devDependencies": {
    
    
    "webpack": "^5.14.0",
    "webpack-cli": "^4.3.1"
  }
}

npm run bundle
# 相当于 npx webpack

3. Utilice los archivos de configuración del paquete web

Nombre del archivo de configuración predeterminado de Webpack : webpack.config.js

Especificar el empaquetado del archivo de configuración

npx webpack --config webpack.my.config.js

webpack.config.js

const path = require('path');

module.exports = {
    
    
  mode: 'development',
  entry: './src/index.js',
  output: {
    
    
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  }
};

En segundo lugar, el concepto central de paquete web

1. ¿Qué es un cargador?

webpack puede usar el cargador para preprocesar archivos. Esto le permite empaquetar cualquier recurso estático que no sea JavaScript. Puede usar Node.js para escribir fácilmente su propio cargador.

Ejemplo: imagen del paquete

file-loader Envíe el archivo a la carpeta de salida y devuelva la URL (relativa)

npm install file-loader -D

configuración del módulo webpack

module.exports = {
    
    
  mode: 'development',
  entry: './src/index.js',
  module: {
    
    
    rules: [
      {
    
     test: /\.jpg$/, use: {
    
     loader: 'file-loader' } }
    ]
  }
};

2. Utilice el cargador para empaquetar recursos estáticos (imágenes)

cargador de archivos

Envíe el archivo a la carpeta de salida y devuelva la URL (relativa)

documentación de webpack v4, opciones de cargador de archivos

webpack.config.js

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.(jpg|png|gif)$/,
        use: {
    
     
          loader: 'file-loader',
          options: {
    
    
            // placeholder 占位符
            name: '[name]_[hash].[ext]',
            outputPath: 'images/'
          }
        }
      }
    ]
  }
};

Usar en el navegador

import avatar from './images/avatar.jpg';

const img = new Image();
img.src = avatar;

let root = document.getElementById('root');
root.appendChild(img);

cargador de url

documento webpack v4, cargador de URL

Funciona como un cargador de archivos, pero si el archivo es más pequeño que el límite, puede devolver la URL de datos; si la imagen es más grande que el límite, se generará el archivo correspondiente.

npm install url-loader -D

module: {
    
    
  rules: [
    {
    
    
      test: /\.jpg$/,
      use: {
    
    
        loader: 'url-loader',
        options: {
    
    
          // placeholder 占位符
          name: '[name]_[hash].[ext]',
          outputPath: 'images/',
          limit: 2048
        }
      }
    }
  ]
}

3. Utilice Loader para empaquetar recursos estáticos (estilo)

Paquete css ordinario

style-loaderAgregue la exportación del módulo como estilo al DOM

css-loaderDespués de analizar el archivo CSS, use la importación para cargar y devolver el código CSS

npm install style-loader css-loader -D

webpack.config.js

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

El empaquetado exitoso insertará la etiqueta de estilo en la etiqueta de la cabeza

Paquete scss

sass-loader Cargar y traducir archivos SASS / SCSS

instalación

npm install sass-loader node-sass --save-dev

module: {
    
    
  rules: [
    {
    
    
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    }
  ]
}

Cuando empaquetamos un archivo scss, el cargador se ejecuta de atrás hacia adelante, primero sass-loader, luego css-loader y finalmente style-loader

Utilice postcss-loader

PostCSS utiliza las poderosas capacidades de programación de JavaScript para transformar códigos CSS. Se pueden usar cientos de complementos de PostCSS para agregar prefijos específicos del proveedor del navegador a las propiedades de CSS, admitir la sintaxis futura de CSS, modularidad, inspección de código y más.

npm install postcss-loader autoprefixer -D

Cree un nuevo postcss.config.js en el directorio raíz del proyecto y configure el complemento utilizado

module.exports = {
    
    
  plugins: [require('autoprefixer')]
};

Después de empaquetar el CSS, el prefijo del proveedor del navegador se agrega automáticamente, como: -webkit-transform

configuración del cargador css

Al introducir scss en scss

Esta situación hará que el scss recién introducido no use el cargador anterior, necesitamos configurar importLoaders

• Consultar parámetros importLoaderspara "Configurar la css-loaderactuación sobre @importel número de cargador antes de los recursos".
• módulos modulares css: verdadero.

const path = require('path');

module.exports = {
    
    
  module: {
    
    
      {
    
    
        test: /\.scss$/,
        use: [
          'style-loader',
          {
    
    
            loader: 'css-loader',
            options: {
    
    
              importLoaders: 2,
      		  modules: true
            }
          },
          'sass-loader',
          'postcss-loader'
        ]
      }
    ]
  }
};

Pack iconos de fuentes

Utilice el cargador de archivos como paquete de recursos estáticos

rules: [
  {
    
    
    test: /\.(eot|ttf|svg|woff)$/,
    use: {
    
     
      loader: 'file-loader'
    }
  },
]

Leer la gestión de recursos y documentación del paquete web

4. Utilice complementos para acelerar el empaquetado

complemento webpack v4

Un complemento puede hacer algo automáticamente por nosotros cuando el paquete web se ejecuta hasta cierto punto.

HtmlWebpackPlugin

HtmlWebpackPlugin simplifica la creación de archivos HTML para servir su paquete webpack. Esto es especialmente útil para paquetes de paquetes web que incluyen un hash que cambia con cada compilación en el nombre del archivo. Puede dejar que el complemento genere un archivo HTML por usted, usar la plantilla lodash para proporcionar su propia plantilla o usar su propio cargador.

Función: HtmlWebpackPlugin generará automáticamente un archivo html después de que finalice el empaquetado e introducirá automáticamente los js generados por el empaque en el html

npm install --save--dev html-webpack-plugin

Configuración

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [new HtmlWebpackPlugin({
    
    
  template: 'src/index.html' // 设置模板
})]

plugin clean-webpack

Paquete elimina el último resultado empaquetado

npm install clean-webpack-plugin -D

Configuración

const {
    
     CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
  new CleanWebpackPlugin()
]

Leer: administrar la salida

5. Configuración básica de Entrada y Salida

Configurar varios archivos de empaquetado

entry: {
    
    
  a: './src/index.js',
  b: './src/index.js'
},
output: {
    
    
  // 公共路径
  publicPath: 'http://cdn.com.cn',
  // 输出文件:Template strings占位符
  filename: '[name].js',
  // 输出路径
  path: path.join(__dirname, 'dist')
},

6. Configuración de SourceMap

Configuración de Devtool

Esta opción controla si generar y cómo generar el mapa de origen.

Elija un formato de mapa de origen para mejorar el proceso de depuración. Los diferentes valores afectarán obviamente la velocidad de construcción y reconstrucción.

sourceMap es una relación de mapeo

En el archivo empaquetado, busque la ubicación del código fuente mapeado correspondiente

devtool: 'source-map'

Se puede generar: bundle.js y bundle.js.map

7. Utilice WebpackDevServer

Cada vez que modificamos el archivo, necesitamos volver a empaquetar y actualizar la página web, lo cual es ineficiente.

Método 1: observe para monitorear la modificación del archivo

- Observe cómo se vuelve a empaquetar automáticamente cuando cambia el archivo empaquetado

Agregar script en package.json

"scripts": {
    
    
    "bundle": "webpack",
    "watch": "webpack --watch"
  },

Método dos: use devServer

Proporcionar un servidor de desarrollo local

A través de estas configuraciones de webpack-dev-server , su comportamiento se puede cambiar de muchas formas. Este es un ejemplo simple, el uso de todo su directorio de contenido gzipscomprimido dist/y proporcionar un servicio local (servir):

instalación

npm install webpack-dev-server -D

Configuracion basica

devServer: {
    
    
  contentBase: './dist',
  open: true,
  port: 8080
},

Al enviar una solicitud ajax, se requiere abrir en el servidor con el protocolo http, podemos abrir el servidor de desarrollo local y luego podemos enviar la solicitud

Puede haber un conflicto de versión cuando se informa del error, mi versión

{
    
    
  "webpack": "^4.25.1",
  "webpack-cli": "^3.1.2",
  "webpack-dev-server": "^3.1.10"
}

devServer.proxy

documento devServer.proxy

El andamio Vue react se implementa mediante este

Use la parte trasera localhost:3000encendida, puede usarla para habilitar el agente:

module.exports = {
    
    
  //...
  devServer: {
    
    
    proxy: {
    
    
      '/api': 'http://localhost:3000'
    }
  }
};

Ahora, /api/usersla solicitud se transferirá a la solicitud http://localhost:3000/api/users.

Si no desea aprobar /api, debe volver a escribir la ruta:

module.exports = {
    
    
  //...
  devServer: {
    
    
    proxy: {
    
    
      '/api': {
    
    
        target: 'http://localhost:3000',
        pathRewrite: {
    
    '^/api' : ''}
      }
    }
  }
};

Lectura: entorno de desarrollo

Cuando se usa, no hay un directorio dist, ¡pero colóquelo en la memoria para mejorar la eficiencia!

8. Reemplazo del módulo caliente

Escenario: modificamos css solo para reemplazar el contenido modificado por css, lo cual es conveniente para la depuración

const webpack = require('webpack');
// 配置
devServer: {
    
    
  contentBase: './dist',
  hot: true,
  hotOnly: true
}

plugins: [
  new webpack.HotModuleReplacementPlugin()
]

js manual HMR, aceptar método

if (module.hot) {
    
    
  module.hot.accept('./number', () => {
    
    
    document.body.removeChild(document.getElementById('number'));
    number();
  });
}

9. Utilice babel para manejar la sintaxis de es6

El cargador de paquetes web maneja Babel-loader durante el proceso de empaque

@ babel / core es la biblioteca principal de babel

npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev

Agregar configuración de paquete web

module: {
    
    
  rules: [
    {
    
    
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
    
    
        loader: 'babel-loader',
        options: {
    
    
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
},

Hasta ahora, solo podemos tratar con parte de la sintaxis de es6. Pero el método de mapa de la matriz Promise no se puede procesar, todavía necesitamos ** @ babel / polyfill **

Agregue características faltantes en el entorno de destino a través de Polyfill (a través del módulo @ babel / polyfill )

npm install --save @babel/polyfill

Introducido en index.js

import '@babel/polyfill';

useBuiltInsIntroducir características de configuración de versión baja bajo demanda

targetConfigure el navegador de destino para determinar si es necesario introducir funciones que no son compatibles con versiones inferiores, reduciendo así el tamaño

loader: 'babel-loader',
options: {
    
    
  presets: [
    [
      '@babel/preset-env',
      {
    
    
        useBuiltIns: 'usage',
        targets: {
    
    
          edge: '17',
	      firefox: '60',
	      chrome: '67',
	      safari: '11.1'
	    }
      }
    ]
  ]
}