notas de estudio webpack5

uso básico

1. Directorio de recursos:

webpack_code #Directorio raíz del proyecto (todas las instrucciones deben ejecutarse en este directorio

                |____src #Directorio fuente del proyecto

                           |___ js #js directorio de archivos

                           | |__ contar.js

                           | |__ am.js

                           |____main.js # Archivo principal del proyecto

2. Crea un archivo 

• contar.js

export default function count(x,y) {
    return x-y;
}

• suma.js

export default function sum(...args) {
    return args.reduce((p, c) => p + c, 0);
}

• principal.js

import count from "./js/count";
import sum from "./js/sum";

console.log(count(2,1));
console.log(sum(1, 2, 3, 4));

3. Descargar dependencias

Abra la terminal y vaya al directorio raíz del proyecto. Ejecute el siguiente comando:

• Inicializar paquete.json

npm init -y

En este punto, se genera un archivo package.json básico.

Cabe señalar que el campo de nombre en package.json no se puede llamar paquete web, de lo contrario, se informará un error en el siguiente paso

• descargar dependencias

npm i webpack webpack-cli -D

4. Habilitar paquete web

• modo de desarrollo

npx webpack ./src/main.js --mode=development

• modo de producción

npx webpack ./src/main.js --mode=production

npx webpack: se utiliza para ejecutar paquetes Webpack instalados localmente.

./src/main.js: especifique webpack para comenzar a empaquetar desde el archivo main.js No solo se empaquetará main.js, sino que también se empaquetarán otras dependencias juntas.

--mode=xxx : especifica el modo (entorno)

5. Observa el archivo de salida

De manera predeterminada, Webpack empaquetará y enviará los archivos al directorio dist. Revisemos los archivos en el directorio dist.

resumen

---

Webpack en sí tiene relativamente pocas funciones y solo puede procesar recursos js. Una vez que encuentre otros recursos como css, informará un error.

Entonces, cuando aprendemos Webpack, principalmente aprendemos cómo manejar otros recursos.

Configuracion basica

Antes de comenzar a usar Webpack, debemos tener cierta comprensión de la configuración de Webpack.

5 conceptos básicos

---

1. entrada (entrada)

Indique a Webpack qué archivo debe comenzar a empaquetar

2. salida (salida)

Indique a Webpack dónde generar los archivos empaquetados, cómo nombrarlos, etc.

3. cargador (cargador)

Webpack en sí solo puede manejar js, json y otros recursos. Necesita un cargador para que Webpack analice

4. complementos (complementos)

Extendiendo la funcionalidad de Webpack

5. modo (modo)

Hay principalmente dos modos:

• Modo de desarrollo: desarrollo
• Modo de producción: producción

Preparar archivo de configuración de Webpack

---

Cree un nuevo archivo en el directorio raíz: webpack.config.js

const path = require("path"); // nodejs核心模块，专门用来处理路径问题

module.exports = {
    // 入口
    entry: './src/main.js', // 相对路径
    // 输出
    output: {
        // 文件的输出路径
        // __dirname nodejs的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, "dist"), // 绝对路径
        // 文件名
        filename: 'main.js',
    },
    // 加载器
    module: {
        rules: [
            // loader的配置
        ]
    },
    // 插件
    plugins: [
        // plugin的配置
    ],
    // 模式
    mode: "development",
    // mode:"production",
}

Introducción al modo de desarrollo

El modo de desarrollo, como su nombre lo indica, es el modo que usamos al desarrollar.

En este modo hacemos principalmente dos cosas:

1. Compile el código para que el navegador pueda reconocerlo y ejecutarlo

Al desarrollar, tenemos recursos de estilo, íconos de fuente, recursos de imagen, recursos html, etc., el paquete web no puede manejar estos recursos de forma predeterminada, por lo que debemos cargar la configuración para compilar estos recursos.

2. Inspección de calidad del código, establecer normas de código.

Verifique algunos peligros ocultos del código con anticipación para que el código sea más robusto cuando se ejecuta.

Verifique la especificación y el formato del código con anticipación, esté de acuerdo con el estilo de codificación del equipo y haga que el código sea más elegante y hermoso.

Manejo de estilos y recursos de imagen

Aprenda a usar Webpack para procesar recursos de imágenes como Css, Less, Sass, Scss, Styl y png, jpeg, gif

introducir

---

Webpack en sí no puede reconocer los recursos de estilo, por lo que debemos usar Loader para ayudar a Webpack a analizar los recursos de estilo.

Cuando buscamos Loader, debemos ir al documento oficial para encontrar el Loader correspondiente, y luego usar

Si no puede encontrar el documento oficial, puede buscar y consultar desde la comunidad Github

Documentación del cargador oficial de Webpack

Configuración:

const path = require("path"); // nodejs核心模块，专门用来处理路径问题

module.exports = {
    // 入口
    entry: './src/main.js', // 相对路径
    // 输出
    output: {
        // 所有文件的输出路径
        // __dirname nodejs的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, "dist"), // 绝对路径
        // 入口文件打包输出文件名
        filename: 'main.js',
    },
    // 加载器
    module: {
        rules: [
            // loader的配置
            {
                test: /\.css$/, // 只检测 .css文件
                use: [ // 执行顺序：从右到左（从下到上）
                    "style-loader", // 将js中css通过创建style标签添加html文件中生效
                    "css-loader", // 将css资源编译成 commonjs 的模块到js中
                ],
            },
            {
                test: /\.less$/,
                // loader:'xxx', // 只能使用1个loader
                use: [ // 使用多个loader
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader', // 将less编译成css文件
                ],
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "stylus-loader", // 将 Stylus 文件编译为 CSS
                ],
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: 'asset',
            }
            /* {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        // 小于10kb 的图片转base64
                        // 优点：减少请求数量  缺点：体积会更大
                        maxSize: 4 * 1024 // 4kb
                    }
                }
            } */
        ],
    },
    // 插件
    plugins: [
        // plugin的配置
    ],
    // 模式
    mode: "development",
    // mode:"production",
}

Modificar el nombre y la ruta del recurso de salida

const path = require("path"); // nodejs核心模块，专门用来处理路径问题

module.exports = {
    entry: './src/main.js', // 相对路径
    output: {
        // 所有文件的输出路径
        // __dirname nodejs的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, "dist"), // 绝对路径
        // 入口文件打包输出文件名
        filename: 'static/js/main.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader","css-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: 'asset',
                generator: {
                    // [hash:10] 代表hash值只取前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            }
        ],
    },
    plugins: [],
    mode: "development",
    // mode:"production",
}

Borrar automáticamente los últimos recursos empaquetados

const path = require("path");

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'static/js/main.js',
        // 自动清空上次打包的内容
        // 原理：在打包前，将path整个目录内容清空，再进行打包
        clean: true,
    },
    module: {
        rules: [
            {}
        ],
    },
    plugins: [],
    mode: "development",
    // mode:"production",
}

Gestión de recursos de iconos de fuentes

1. Descargue el archivo del icono de fuente

2. Copie el archivo css correspondiente y la carpeta de fuentes (ttf|woff, etc.) en la carpeta src (nota: la ruta en el archivo css debe modificarse en consecuencia)

3. Importe el archivo css correspondiente al archivo main.js

4. Introducir iconos de fuentes en html, recuerda modificar la ruta introducida por main.js, que fue modificada antes

 5. Modificar el archivo de configuración

const path = require("path");

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'static/js/main.js',
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader","css-loader"],
            },
            {
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader'],
            },
            {
                test: /\.s[ac]ss$/,
                use: ['style-loader','css-loader','sass-loader'],
            },
            {
                test: /\.styl$/,
                use: ["style-loader","css-loader","stylus-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: 'asset',
                generator: {
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {
                test: /\.(ttf|woff2?)$/,
                type: 'asset/resource',
                generator: {
                    // 输出名称
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
        ],
    },
    plugins: [],
    mode: "development",
    // mode:"production",
}

Manejar otros recursos

Puede haber otros recursos en el desarrollo, como audio y video, etc., también los hemos tratado juntos.

1. Configuración

const path = require("path"); 

module.exports = {
    entry: './src/main.js', 
    output: {
        path: path.resolve(__dirname, "dist"), 
        filename: 'static/js/main.js',
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.css$/, 
                use: [ "style-loader","css-loader"],
            },
            {
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader'],
            },
            {
                test: /\.s[ac]ss$/,
                use: ['style-loader','css-loader','sass-loader'],
            },
            {
                test: /\.styl$/,
                use: ["style-loader","css-loader","stylus-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: 'asset',
                generator: {
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            {
                // 有其他资源时继续往后添加，就会原封不动输出的
                test: /\.(ttf|woff2?|map3|map4|avi)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
        ],
    },
    plugins: [],
    mode: "development",
    // mode:"production",
}

Manejar recursos js

Algunas personas pueden preguntar, ¿no está ya procesado el Webpack de recursos js? ¿Por qué todavía tenemos que procesarlo?

La razón es que Webpack tiene un procesamiento limitado de js. Solo puede compilar la sintaxis modular de ES en js y no puede compilar otra sintaxis. Como resultado, js no puede ejecutarse en navegadores como IE, por lo que esperamos realizar algún procesamiento de compatibilidad.

Durante el desarrollo, el equipo tiene requisitos estrictos sobre el formato del código. No podemos detectar el formato del código a simple vista y necesitamos usar herramientas profesionales para detectarlo.

• Para el procesamiento de compatibilidad js, usamos Babel para completar
• Para formatear el código, usamos Eslint para completar

Primero completemos Eslint, y después de verificar que el formato del código sea correcto, Babel realizará el procesamiento de compatibilidad del código.

Eslint

---

Herramienta de inspección de JavaScript y JSX componible.

El significado de esta oración es: es una herramienta utilizada para detectar la sintaxis js y jsx, y puede configurar varias funciones

Cuando usamos Eslint, la clave es escribir el archivo de configuración de Eslint, que contiene varias reglas de reglas. Cuando se ejecute Eslint en el futuro, el código se verificará con las reglas escritas.

1. Archivo de configuración

Hay muchas formas de escribir archivos de configuración:

.eslintrc.* : Crea un nuevo archivo, ubicado en el directorio raíz del proyecto

• .eslintrc
• .eslintrc.js
• .eslintrc.json
• La diferencia es que el formato de configuración es diferente

eslintConfig en package.json : no es necesario crear archivos, Eslint los encontrará y los leerá automáticamente en función de los archivos originales, por lo que solo debe existir uno de los archivos de configuración anteriores

2. Configuración específica

Tomemos como ejemplo el archivo de configuración .eslintrc.js:

module.exports = {
    // 解析选项
    parserOptions: {},
    // 具体检查规则
    rules:{},
    // 继承其他规则
    extends：[],
    // ...
    // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

1. opciones del analizador parserOptions

parserOptions: {
    ecmaVersion: 6, // ES 语法版本
    sourceType: "module", // ES 模块化
    ecmaFeatures:{ // ES 其他特性
        jsx: ture // 如果是 React 项目，就需要开启 jsx 语法
    }
}

2. reglas Reglas específicas

• "off" o 0 - desactivar la regla
• "advertir" o 1 : habilitar regla, usar errores de nivel de advertencia: advertir (no hace que el programa se cierre)
• "error" o 2 : habilitar la regla, usar el nivel de error error: error (cuando se activa, el programa se cerrará)

rules: {
    semi: "error", // 禁止使用分号
    'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句。否则警告
    'default-case': [
        'warn', // 要求 switch 语句中有 default 分支，否则警告
        { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
    ],
    eqeqeq: [
        'warn', // 强制使用 === 和 !== ，否则警告
        'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
    ],
}

Para obtener más reglas, consulte: Documentación de reglas

3. extiende la herencia

Es demasiado extenuante escribir reglas poco a poco durante el desarrollo, por lo que hay una mejor manera de heredar las reglas existentes.

Existen las siguientes reglas bien conocidas:

• Reglas oficiales de Eslint : eslint: recomendado
• Reglas oficiales de Vue Cli: plugin:vue/essential
• Reglas oficiales de React Cli: react-app

// 例如在React项目中，我们可以这样写配置
module.exports = {
    extends:["react-app"],
    rules:{
        // 我们的规则会覆盖掉react-app的规则
        // 所以想要修改规则直接改就是了
        eqeqeq:["warn","smart"],
},

3. Uso en Webpack

1. Descargar paquete

npm i eslint-webpack-plugin eslint -D

2. Modifique el archivo webpack.config.js

• webpack.config.js

// 把插件添加到你的 webpack 配置
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  // 插件
    plugins: [
        // plugin的配置
        new ESLintPlugin({
            // 检测哪些文件
            context: path.resolve(__dirname, "src")
        })
    ],
  // ...
};

3. Definir el archivo de configuración de Eslint

• .eslintrc.js

module.exports = {
    // 继承 Eslint 规则
    extends: ["eslint:recommended"],
    env: {
        node: ture, // 启用node中全局变量
        browser: true, // 启用浏览器中全局变量
    }，
    parserOptions: {
        ecmaVersion: 6,
        sourceType: "module",
    },
    rules: {
        "no-var": 2, // 不能使用 var 定义变量
    }，
}；

4. Modificar el código del archivo js

• principal.js

import count from "./js/count";
import sum from "./js/sum";
// 要想 webpack 打包资源，必须引入该资源
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./stylus/index.styl";

const result = count(2, 1); // 不能用 var 会报错
console.log(result);
// console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

5. Agregue el archivo .eslintignore

Dado que agregué el complemento de verificación de sintaxis de Eslint en VS Code, y no necesitamos que verifique el archivo js de salida, que es la carpeta dist, debemos agregar un nuevo archivo de configuración. archivo eslintignore, que contiene dist, para que se ignore el archivo js en la carpeta dist, para que no se informe el error de la línea ondulada roja

• .eslintignorar

dist

Babel

---

compilador JavaScript.

Se utiliza principalmente para convertir código escrito en sintaxis ES6 a sintaxis de JavaScript compatible con versiones anteriores para que pueda ejecutarse en versiones actuales y antiguas de navegadores u otros entornos.

1. Archivo de configuración

Hay muchas formas de escribir archivos de configuración:

babel.config.* : Nuevo archivo, ubicado en el directorio raíz del proyecto

• babel.config.js
• babel.config.json

.babelrc.* : Crea un nuevo archivo, ubicado en el directorio raíz del proyecto

• .babelrc
• .babelrc.js
• .babelrc.json

babel en  package.json : no es necesario crear archivos, Babel los encontrará y los leerá automáticamente cuando se escriban sobre la base de los archivos originales, por lo que solo debe existir uno de los archivos de configuración anteriores

2. Configuración específica

Tomemos como ejemplo el archivo de configuración babel.config.js :

module.exports = {
    // 预设
    presets: [],
};

1. preajustes

Entendimiento simple: es un conjunto de complementos de Babel que amplían la funcionalidad de Babel

• @babel/preset-env : un ajuste preestablecido inteligente que le permite usar el JavaScript más reciente.
• @babel/preset-react : un ajuste preestablecido para compilar la sintaxis de Recat jsx
• @babel/preset-typescript : un ajuste preestablecido para compilar la sintaxis de TypeScript

3. Uso en Webpack

1. Descargar paquete

npm i babel-loader @babel/core @babel/preset-env -D

2. Definir el archivo de configuración de Babel

• babel.config.js

module.export = {
    // 智能预设：能够编译ES6语法
    presets: ['@babel/preset-env'],
}

3. Configure el archivo webpack.config.js

• webpack.config.js

En el objeto de configuración del paquete web, debe agregar babel-loader a la lista de módulos, así:

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /node_modules/, // 排除node_modules中的js文件（这些文件不处理）
      /* use: {
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
      } */
      /* loader: 'babel-loader',
      options: {
          presets: ['@babel/preset-env']
      } */
      loader: 'babel-loader',
      // options也可以写在外面，babel.config.js 里面 
    }
  ]
}

Manejar recursos HTML

1. Descargar paquete

npm i html-webpack-plugin -D

2. Configuración

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js',
  },
  plugins: [
        new HtmlWebpackPlugin({
            // 模板：以public/index.html 文件创建新的html文件
            // 新的html文件特点：1.结构和原来一致 2.自动引入打包输出的资源
            template: path.resolve(__dirname, "public/index.html"),
        })
    ],
};

Servidor de desarrollo y automatización

Nota: La carpeta dist no se generará automáticamente después de que se ejecute el servidor de desarrollo automatizado.

1. Descargar paquete

npm i webpack-dev-server -D

2. Configuración

• webpack.config.js

const path = require("path"); // nodejs核心模块，专门用来处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    // ......
    plugins: [],
    // 开发服务器：不会输出资源，在内存中编译打包的
    devServer: {
        host:"localhost", // 启动服务器域名
        port: "3000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
    },
    mode:"development",
}

3. Ejecutar comando

npx webpack serve

Introducción al modo de producción

En el modo de producción, después de que se desarrolla el código, necesitamos implementar el código y ponerlo en línea.

En este modo, principalmente optimizamos el código para que funcione mejor.

La optimización comienza principalmente desde dos perspectivas:

1. Optimizar el rendimiento de ejecución de código
2. Optimizar la velocidad de empaquetado del código

Preparación del modo de producción

Preparamos dos archivos de configuración para diferentes configuraciones

1. Directorio de archivos

|—— webpack-test (directorio raíz del proyecto)

          |—— config (directorio del archivo de configuración de Webpack)
          | |—— webpack.dev.js (archivo de configuración del modo de desarrollo)

          | |—— webpack.prod.js (archivo de configuración del modo de desarrollo)

          |—— node_modules (directorio de almacenamiento del paquete de descarga)

          |—— src (directorio del código fuente del proyecto, excepto html, todo lo demás está en src)

          | |——Ligeramente

          |——público (archivo html del proyecto)

          | |——índice.html

          |—— .eslintrc.js (archivo de configuración de Eslint)

          |—— babel.config.js (archivo de configuración de Babel)

          |—— package.json (archivo de configuración de gestión de dependencias de paquetes)

2. Modificar webpack.dev.js

const path = require("path"); // nodejs核心模块，专门用来处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        // 所有文件的输出路径
        // 开发模式没有输出
        path: undefined,
        // ......
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader","css-loader"],
            },
            {
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader'],
            },
            // .......
        ],
    },
    plugins: [
        new ESLintPlugin({
            // 检测哪些文件
            context: path.resolve(__dirname, "../src")
        }),
        new HtmlWebpackPlugin({
            // 新的html文件特点：1.结构和原来一致 2.自动引入打包输出的资源
            template: path.resolve(__dirname, "../public/index.html"),
        })
    ],
    devServer: {
        host: "localhost",
        port: "3000",
        open: true,
    },
    mode: "development",
}

 3. Ejecutar en modo de desarrollo

npx webpack serve --config ./config/webpack.dev.js

4. Modificar webpack.prod.js

const path = require("path"); // nodejs核心模块，专门用来处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/main.js',
    output: {
        // 所有文件的输出路径
        // __dirname nodejs的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, "../dist"), // 绝对路径
        // 入口文件打包输出文件名
        filename: 'static/js/main.js',
        // 自动清空上次打包的内容
        // 原理：在打包前，将path整个目录内容清空，再进行打包
        clean: true,
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader","css-loader"],
            },
            {
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader'],
            },
            // .......
        ],
    },
    plugins: [
        new ESLintPlugin({
            // 检测哪些文件
            context: path.resolve(__dirname, "../src")
        }),
        new HtmlWebpackPlugin({
            // 新的html文件特点：1.结构和原来一致 2.自动引入打包输出的资源
            template: path.resolve(__dirname, "../public/index.html"),
        })
    ],
    mode: "production",
}

 5. Ejecutando en modo de producción

npx webpack --config ./config/webpack.prod.js

Optimizar el código en ejecución

Configuración de secuencias de comandos en package.json

"scripts": {
        "start": "npm run dev",
        "dev": "webpack serve --config ./config/webpack.dev.js",
        "build": "webpack --config ./config/webpack.prod.js"
    },

El código para ejecutar el modo de desarrollo de esta manera es: npm start

El código para ejecutar el modo de producción como este es: npm run build

Procesamiento de CSS

Extraiga Css en un archivo separado

Los archivos Css están empaquetados actualmente en archivos js, cuando se carga el archivo js, ​​se creará una etiqueta de estilo para generar estilos

De esta manera, para el sitio web, habrá un fenómeno de pantalla de bienvenida y la experiencia del usuario no será buena.

Deberíamos ser un archivo Css separado, y el rendimiento de la carga a través de la etiqueta de enlace es mejor

1. Descargar paquete

npm i mini-css-extract-plugin -D

2. Configuración

webpack.prod.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
         // 指定文件输出目录
         filename: "static/css/main.css"
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};

Procesamiento de compatibilidad CSS

1. Descargar paquete

npm i postcss-loader postcss postcss-preset-env -D

2. Configuración

webpack.prod.js

Inserte el código de configuración detrás de css-loader y antes de less-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [
                    'postcss-preset-env',
                    {
                      // 其他选项
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

O use el archivo de configuración de PostCSS en sí  :

postcss.config.js

module.exports = {
    // 你可以指定下面提到的所有选项 https://postcss.org/api/#processoptions
    // parser: 'sugarss',
    plugins: [
        // PostCSS 插件
        ['postcss-short', { prefix: 'x' }],
        'postcss-preset-env',
    ],
};

Loader buscará automáticamente los archivos de configuración.

webpack.config.js

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

Finalmente, ejecuta webpack como quieras

3. Compatibilidad de controles

Podemos agregar browserslist al archivo package.json para controlar la compatibilidad de los estilos.

{
    // 其他省略
    "browserslist": ["ie >= 8"]
}

Para obtener más información sobre la configuración de la lista de navegadores, consulte la documentación de la lista de navegadores.

Para probar la compatibilidad, la configuración anterior es compatible con los navegadores ie8 y superiores.

En el desarrollo real, generalmente no consideramos los navegadores antiguos, por lo que podemos configurarlo así:

{
    // 其他省略
    " browserslist": ["last 2 version", ">1%", "not dead"]
}

4. Combinar configuración

Debido a la alta tasa de reutilización de código, podemos encapsular funciones que manejan estilos

const path = require("path"); // nodejs核心模块，专门用来处理路径问题
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 用来获取处理样式的loader
function getStyleLoader(pre) {
    return [
        MiniCssExtractPlugin.loader, // 将js中css通过创建style标签添加html文件中生效
        "css-loader", // 将css资源编译成 commonjs 的模块到js中
        'postcss-loader',
        pre,
    ].filter(Boolean);

}

module.exports = {
    // 入口
    entry: './src/main.js', // 相对路径
    // 输出
    output: {
        // 所有文件的输出路径
        // __dirname nodejs的变量，代表当前文件的文件夹目录
        path: path.resolve(__dirname, "../dist"), // 绝对路径
        // 入口文件打包输出文件名
        filename: 'static/js/main.js',
        // 自动清空上次打包的内容
        // 原理：在打包前，将path整个目录内容清空，再进行打包
        clean: true,
    },
    // 加载器
    module: {
        rules: [
            // loader的配置
            {
                test: /\.css$/, // 只检测 .css文件
                use: getStyleLoader(),
            },
            {
                test: /\.less$/,
                // loader:'xxx', // 只能使用1个loader
                use: getStyleLoader('less-loader'),
            },
            {
                test: /\.s[ac]ss$/,
                use: getStyleLoader('sass-loader'),
            },
            {
                test: /\.styl$/,
                use: getStyleLoader('stylus-loader'),
            },
            {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: 'asset',
                generator: {
                    // [hash:10] 代表hash值只取前10位
                    filename: 'static/images/[hash:10][ext][query]'
                }
            },
            /* {
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        // 小于10kb 的图片转base64
                        // 优点：减少请求数量  缺点：体积会更大
                        maxSize: 4 * 1024 // 4kb
                    }
                }
            } */
            {
                test: /\.(ttf|woff2?|map3|map4|avi)$/,
                type: 'asset/resource',
                generator: {
                    // 输出名称
                    filename: 'static/media/[hash:10][ext][query]'
                }
            },
            {
                test: /\.m?js$/,
                exclude: /node_modules/, // 排除node_modules中的js文件（这些文件不处理）
                /* use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                } */
                /* loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                } */
                loader: 'babel-loader',
                // options也可以写在外面
            },
        ],
    },
    // 插件
    plugins: [
        // plugin的配置
        new ESLintPlugin({
            // 检测哪些文件
            context: path.resolve(__dirname, "../src")
        }),
        new HtmlWebpackPlugin({
            // 模板：以public/index.html 文件创建新的html文件
            // 新的html文件特点：1.结构和原来一致 2.自动引入打包输出的资源
            template: path.resolve(__dirname, "../public/index.html"),
        }),
        new MiniCssExtractPlugin({
            // 指定文件输出目录
            filename: "static/css/main.css"
        }),
    ],
    // 模式
    // mode: "development",
    mode: "production",
}

 compresión css

1. Descargar paquete

npm i css-minimizer-webpack-plugin -D

2. Configuración

• webpack.prod.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

compresión html

El modo de producción predeterminado ya está habilitado: compresión html y compresión js

No requiere configuración adicional