La diferencia entre el cargador y el complemento en el paquete web.

1. Diferentes roles:

Loader se traduce literalmente como "cargador" .

Sin embargo, Webpack trata todos los archivos como módulos webpack原⽣是只能解析 js⽂件.

Si desea empaquetar otros archivos, utilizará loader.

Entonces, el rol de Loader es 让 webpack 拥有了加载和解析⾮ JavaScript⽂件的能⼒.

Por ejemplo:

Cargar y analizar archivos css: se usará 'MiniCssExtractPlugin.loader'

需要在webpack.config.js文件中引入mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

//在module.rules模块中配置，描述对于什么类型的文件（test），使用什么加载器(loader)和参数(option)

================================================== ===========

Complemento se traduce literalmente como "complemento" .

El complemento puede ampliar la funcionalidad del paquete web, lo que hace que el paquete web sea más flexible.

Durante el ciclo de vida de la ejecución de Webpack, se transmiten muchos eventos

Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的API 改变输出结果。

Por ejemplo:

Use el archivo html especificado como plantilla html y luego empaquételo; se usará el 'html-webpack-plugin'

//需要在webpack.config.js文件中引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')

2. Diferentes usos:

Loader se configura en module.rules , es decir, existe como regla de análisis de módulos.

El tipo es una matriz , cada elemento es unoObject , que describe qué tipo de archivo (prueba), qué cargador usar (cargador) y los parámetros utilizados (opciones)

	//加载器
	module: {
    
    
        rules: [
            //每一项都是对象（object）
            {
    
    
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, {
    
    
                    loader: 'css-loader',
                    options: {
    
    
                        modules: true
                    }
                }, 'postcss-loader']
            },
            {
    
    
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, {
    
    
                    loader: 'css-loader',
                    options: {
    
    
                        modules: true
                    }
                }, 'less-loader', 'postcss-loader']
            }
        ]
      }

================================================== ===========

El complemento se configura por separado en complementos .

El tipo es una matriz, cada elemento es un complemento 实例y los parámetros se pasan a través del constructor.

	// 插件
    plugins: [
        //每一项就是 实例对象  需要用的new关键字
        new HtmlWebpackPlugin({
    
    
            // 将指定html文件作为模板html然后打包
            template: path.join(__dirname, 'src/index.html'),
            // 生成的html文件的名字--不需要路径
            filename: 'index.html'
        }),
        new MiniCssExtractPlugin({
    
    
            filename: 'css/bundle.css'
        })
    ]

3. ¿Cuáles son los cargadores comunes?

cargador de archivos: envíe el archivo a una carpeta y consulte el archivo de salida a través de la URL relativa en el código

url-loader: similar a file-loader, pero puede inyectar el contenido del archivo en el código en forma de base64 cuando el archivo es pequeño

source-map-loader: cargue archivos Source Map adicionales para facilitar la depuración de puntos de interrupción

image-loader: cargar y comprimir archivos de imagen

cargador de babel: convertir ES6 a ES5

css-loader: carga CSS, admite modularización, compresión, importación de archivos y otras características

cargador de estilo: inyecta código CSS en JavaScript y carga CSS a través de operaciones DOM.

eslint-loader: código JavaScript de Lint a través de ESLint

Nota: en Webpack, los cargadores se ejecutan de derecha a izquierda. Debido a que webpack elige un método de programación funcional como componer, la ejecución de la expresión en este método es de derecha a izquierda.

4. ¿Cuáles son los complementos comunes?

define-plugin: define variables de entorno

html-webpack-plugin: simplifica la creación de archivos html

uglifyjs-webpack-plugin: Comprimir código ES6 a través de UglifyES

webpack-parallel-uglify-plugin: compresión multinúcleo, mejora la velocidad de compresión

webpack-bundle-analyzer: Visualice el volumen de los archivos de salida del paquete web

mini-css-extract-plugin: CSS se extrae en un archivo separado y admite la carga bajo demanda