Configuración básica del paquete web

El front-end actual tiene muchas herramientas y marcos que pueden mejorar la eficiencia del desarrollo, pero el código fuente no se puede ejecutar directamente, solo se puede ejecutar normalmente después de la conversión.

Luego, construir consiste en convertir el código fuente en código JavaScript, HTML y CSS ejecutable.

La construcción contiene:

Conversión de código [como mecanografiado compilado en JavaScript, scss compilado en CSS];
Optimización de archivos, como comprimir JavaScript y comprimir imágenes compuestas;
División de código, extracción de código común, extracción de código que no necesita ejecutarse en la página de inicio y dejar que se cargue de forma asincrónica;
Fusión de módulos, fusión de módulos en un solo archivo;
Actualización automática, monitorea los cambios del código fuente local, reconstruye y actualiza automáticamente el navegador;
Verificación de código
Publicar automáticamente.

Base

paquete web

Webpack es una herramienta para empaquetar JavaScript modular: convierte archivos a través del cargador, inyecta ganchos a través de complementos y finalmente genera archivos.

webpack se centra en la construcción de proyectos modulares. La ventaja es:

Se puede utilizar nada más sacarlo de la caja en un solo paso;
Extensible a través de Plugin, flexible
Amplia gama de escenarios de uso.
La comunidad está activa y puedes encontrar extensiones de código abierto para muchos escenarios.
Que tengas una buena experiencia.

Webpack también tiene la desventaja de que solo se puede utilizar para proyectos que adoptan desarrollo modular.

configuración del paquete web

1. Primero instale webpack y webpack-cli,
2. Cree un archivo JavaScript básico y HTML, el código es el siguiente:

índice.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root"></div>
    <script src="./dist/bundle.js"></script>
</body>

</html>

Archivo JavaScript index.js de la función de la herramienta:

function show(content){
    window.document.getElementById("root").innerText = "Hello，" + content
}

module.exports = show;

El código main.js es el siguiente:

const show = require("./index");

show("Webpack");

La configuración de package.json es la siguiente:

  "scripts": {
    "build": "webpack"
  },

El archivo de configuración del paquete web webpack.config.js es el siguiente:

const path = require("path");
module.exports = {
    entry:"./main.js",
    output:{
        filename:"bundle.js",
        path:path.resolve(__dirname,"./dist")
    }
}

Ejecute el comando:, yarn buildabra el archivo index.html en el navegador, la página mostrará: "Hola, Webpack"

Después de ejecutar el comando, se generará una carpeta dist en la carpeta, dist es el código estático compilado.

Después de ejecutar el comando de empaquetado, webpack comienza desde el archivo de configuración de entrada, identifica la declaración de importación modular en el código fuente, descubre de forma recursiva las dependencias del archivo de entrada y luego lo empaqueta.

Este es el proceso de empaquetado básico de webpack.

Cargador

Dado que webpack no puede analizar archivos CSS, necesita el mecanismo del cargador para admitir algunos archivos que no sean JavaScript. La configuración de webpack.config.js se actualiza de la siguiente manera:

const path = require("path");
module.exports = {
    entry: "./main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./dist")
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

Se configura un conjunto de reglas: al empaquetar, cuando se encuentra un archivo CSS, se usa css-loader para leer el archivo CSS y luego se usa style-loader para inyectar el contenido CSS en JavaScript.

El atributo de uso en la regla es una matriz compuesta por los nombres de Loader y el orden de ejecución de Loader es de atrás hacia adelante.

Podemos comprobar el uso relevante en el documento Loader correspondiente.

Ahora agregue el archivo CSS main.css:

#root {
    text-align: center;
}

Main.css se introduce en main.js:

require("./main.css");
const show = require("./index");

show("Webpack");

Después de ejecutar el comando, el texto de la página se centra.

En este momento, no se genera un archivo CSS separado y todo el CSS se descarga en el archivo JavaScript, lo que tiene la desventaja de que el archivo JavaScript se vuelve más grande, lo que resulta en un tiempo de carga más largo para la página.

Enchufar

El complemento sirve para ampliar las funciones de Webpack e inyectar enlaces en el proceso de compilación, lo que aporta una gran flexibilidad a Webpack.

Ahora empaquete y genere un archivo CSS separado. Es necesario instalar complementos:, mini-css-extract-pluginla configuración de webpack.config.js se actualiza de la siguiente manera:

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //抽离CSS为独立文件的插件

module.exports = {
    mode: 'development',
    entry: "./main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./dist")
    },
    module: {
        rules: [
            {
                test: /\.(css)$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
                // use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // 指定抽离的之后形成的文件名
            filename: 'styles/[name]_[contenthash:8].css'
        })
    ],

}

Después del empaquetado, genere un archivo CSS separado: main_094aa2e7.css y luego introduzca CSS en el archivo HTML.

Servidor de desarrollo

Durante el desarrollo, iniciar el proyecto requiere el servicio http en lugar de la vista previa del archivo local, lo que requiere monitorear los cambios del archivo para actualizar automáticamente la página. Se puede admitir el mapa fuente para facilitar la depuración.

Webpack proporciona oficialmente webpack-dev-server, que implementa el servicio http.

La configuración es la siguiente:
const webpack = require('webpack')
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //抽离CSS为独立文件的插件

module.exports = {
    mode: 'development',
    entry: "./main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "./dist")
    },
    module: {
        rules: [
            {
                test: /\.(css)$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
                // use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            // 指定抽离的之后形成的文件名
            // filename: 'styles/[name]_[contenthash:8].css'
            filename: 'styles/[name]_[contenthash:8].css'
        }),
        new webpack.HotModuleReplacementPlugin(),
    ],
    devServer: {
        // 开发时可直接访问到 ./public 下的静态资源，这些资源在开发中不必打包
        port: 3000,
        open: true, // 打开浏览器
        compress: false, // 是否压缩
        static: "./",
        proxy: {
            '/api': {
                target: "https://api.github.com",
                pathRewrite: {
                    "^/api": ""
                },
                changeOrigin: true
            }
        },
        hotOnly: true,
    }

}
Resuma los aspectos centrales del paquete web:

· Entrada: Entrada. El primer paso para que Webpack ejecute la construcción comenzará desde Entrada, que se puede abstraer en entrada.

· Módulo: Módulo, todo en Webpack es un módulo y un módulo corresponde a un archivo. Webpack buscará recursivamente todos los módulos dependientes a partir de la entrada configurada.

· Chunk: Bloque de código. Un Chunk se compone de múltiples módulos y se utiliza para fusionar y dividir código.

· Cargador: Conversor de módulos, utilizado para convertir el contenido original del módulo en contenido nuevo según los requisitos.

· Complemento: complemento de extensión, que inyecta lógica de extensión en momentos específicos del proceso de compilación del paquete web para cambiar los resultados de la compilación o hacer lo que queramos.

· Salida: Resultado de salida. Después de que Webpack pasa por una serie de procesos y obtiene el código final deseado, se genera el resultado.

· Resolver: Configurar reglas para buscar módulos

· DevServer: Configurar DevServer

Configuración

Hay dos formas de configurar el paquete web:

Describir la configuración a través de archivos JavaScript, como webpack.config.js;

Al ejecutar el archivo ejecutable de Webpack, pase los parámetros a través de la línea de comando;

Ingrese diferentes comandos de esta manera para ejecutar diferentes archivos de configuración.

Entrada

La entrada sirve como entrada al módulo de configuración. De forma predeterminada, el contexto será el directorio raíz y el contexto predeterminado > es el directorio de trabajo donde se inicia Webpack. Por ejemplo:
    context:path.resolve(__dirname,"app"),
Esto es para seleccionar el directorio de la aplicación del directorio de trabajo actual como el directorio de trabajo del paquete web.

El tipo de entrada puede ser Cadena, Matriz u Objeto. Cuando el parámetro es Objeto, configure varias entradas.
       entry: "./main.js",
    // entry: {a:"./main.js",b:"./index.js"},
    // entry:["./index.js","./main.js"],
    // context:path.resolve(__dirname,"app"),

Producción

Configure el código de salida. El valor del atributo es un tipo de Objeto y los parámetros son los siguientes:

El nombre del archivo se puede definir como su nombre de archivo favorito. Al configurar varias entradas, el nombre del archivo de salida se distinguirá según el nombre de la entrada: , filename:'[name].js'este nombre de variable puede ser nombre, id, hash o chunkhash;

ruta, establezca el directorio del archivo de salida. Generalmente, la ruta absoluta se obtendrá a través del módulo de ruta del nodo, como por ejemplo path: path.resolve(__dirname, "./dist"):;

publicPath, a veces los recursos creados por el proyecto deben cargarse de forma asincrónica, publicPath establece la dirección URL correspondiente al recurso que debe cargarse de forma asincrónica. Por ejemplo, publicar los recursos creados en un servidor CDN ayudará a acelerar la apertura de la página. La configuración es la siguiente:
filename:'[name]_[chunkhash:8].js',
publicPath:"https:cdn.duxinyues.com/assets/"

Módulo

El módulo configura las reglas para procesar módulos, como configurar el análisis de archivos de estilo:

            {
                test: /\.(css)$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
                // use: ['style-loader', 'css-loader']
                exclude: path.resolve(__dirname, "node_modules"), // 排除node_modules下的文件
            },

Resolver

Después de iniciar Webpack, comienza desde el módulo de entrada y busca todos los módulos dependientes. Resolve configura el paquete web para encontrar los archivos correspondientes a los módulos. Si no hay configuración, el paquete web buscará de acuerdo con las reglas predeterminadas.

alias, configure el alias y asigne la ruta de importación original a una ruta de importación simple a través del alias.

Extensión, cuando la declaración de importación no tiene un sufijo de archivo, webpack agregará automáticamente el sufijo para acceder a si el archivo correspondiente existe, por ejemplo: Si no se puede encontrar el archivo correspondiente en la configuración, se informará un error extension:['.js','.json'].

Módulos, configure módulos de terceros, el paquete web buscará en node_modules de forma predeterminada. Si el mismo módulo se importa desde archivos en diferentes ubicaciones, hará que la ruta de importación sea muy larga. A través de la configuración de módulos, la ruta de importación se optimiza .

enforceExtension, cuando se establece en verdadero, todas las declaraciones de importación deben tener un sufijo.

Enchufar

El complemento se utiliza para ampliar la funcionalidad de Webpack, como por ejemplo:

    plugins: [
        new MiniCssExtractPlugin({
            // 指定抽离的之后形成的文件名
            // filename: 'styles/[name]_[contenthash:8].css'
            filename: 'styles/[name]_[contenthash:8].css'
        }),
        new webpack.HotModuleReplacementPlugin(),
    ],

resolvercargador

resolveLoader configura cómo Webpack encuentra Loader, como por ejemplo:

   resolveLoader:{
    modules:['node_modules'],
    extensions:[".js",'.json']
   }

resolveLoader se usa generalmente para cargar el cargador local.