Empiece con Webpack y ¿qué puede hacer?

Prefacio

Intención original : En este artículo, hablaremos sobre Webpack, qué puede hacer y por qué deberíamos usarlo. Comparta las notas que he compilado con usted. Si tiene algún error, por favor señale. Si no le gusta, no lo rocíe.

Adecuado para la multitud: el desarrollo primario de front-end, el desvío de los grandes.

Este artículo explica Webpack 4.x, preste atención a la versión.

Por qué utilizar Webpack

Antes de ser la forma tradicional de desarrollar un sistema, html,, css, jseso es todo. Una vez que se completa el desarrollo, se implementa directamente en el personal de back-end, por supuesto, no hay problema. Cuando los requisitos de nuestro proyecto continúan aumentando, cuanto más código se vuelve, más difícil es mantenerlo. Hay cientos o incluso miles de líneas de código en un archivo, y el código interno incluso está duplicado. También debe preocuparse por el scriptel orden de dependencia de la etiqueta y el código. El problema de la contaminación variable está modularizado en este momento para evitar la contaminación variable y los problemas de orden de dependencia. Ahora, la herramienta de empaquetado principal es el Webpackfuerte apoyo y apoyo de la comunidad Es Module, CommonJsy la AMDestandarización.

Que es Webpack

WebpackMódulo es una herramienta de empaquetado, puede Es Module, CommonJsproceso de la gramática en un código que se puede ejecutar un navegador, los archivos dependientes asociadas empaqueta en un jsarchivo.

¿Qué puede hacer Webpack?

Propicio para nuestro desarrollo conveniente, ayúdenos a construir un servicio localmente, actualización en caliente de cambios de código y sin actualización de página, inyección global de archivos dependientes, segmentación de código, extracción de código, eliminación de código innecesario, diferenciación de variables de entorno, optimización de imagen, etc. , una comunidad sólida Las extensiones de complementos nos ayudan a desarrollar proyectos de manera conveniente.

instalación

El Webpackentorno de instalación también es muy simple. Generalmente, se recomienda la instalación local. La instalación global puede entrar en conflicto con otros proyectos. Intente instalar localmente.

cnpm i webpack@4 webpack-cli --save

La webpackgramática instalada arriba es webpack-cliel comando de ejecución de la operación de línea de comando

Una vez completada la instalación, no puede webpack -vinformar directamente un error como este, porque encontrará su webpackentorno globalmente , pero está instalando localmente, y al usar npx webpack -vesto, realizará una búsqueda local en su proyecto.

Empiece rápidamente

Inicialice el archivo package.json

Ejecute este comando en su archivo de proyecto y complete la operación tonta correspondiente (Ingrese hasta el final).

npm init

Estructura del proyecto

|- /node_modules
|- /src
   |- index.js
   |- news.js
   |- index.css
|- index.html
|- webpack.config.js
|- package.json

Entrada

Archivos de entrada de empaquetado de entrada, hay varias formas de entrada de empaquetado, presentémoslas una por una.

Sola entrada

module.exports = {
    
    
    entry: "./src/index.js"
}

Multi entrada

Embalaje de entrada múltiple, el jsnombre del archivo es el valor clave del objeto.

module.exports = {
    
    
    entry: {
    
    
        index: "./src/index.js",
        news: "./src/news.js"
    }
}

Entrada de matriz

Empaquetado de matriz, entryrecibiendo un objeto de matriz, solo el último valor del parámetro en el interior es la ruta de empaquetado real, otros parámetros son para importar el archivo de ruta al último parámetro

module.exports = {
    
    
    entry: ["./src/news.js", "./src/index.js"]
}

// 上面entry那种操作，等同于如下：
// index.js
require("news.js")

En el ejemplo anterior, excepto el último parámetro, todos los demás parámetros de la matriz se importan al último archivo de parámetros.

Producción

outputSi hay un archivo de entrada, debe haber un archivo de exportación,

module.exports = {
    
    
    output: {
    
    
        path: __dirname + "/dist",
        filname: "app.js"
    }
}

filenameHay varias opciones de nombre, déjame presentarte

[nombre] Usa el nombre del archivo de entrada
[chunkhash] Se genera el valor hash, que es analizado por el archivo actual depende de, y se genera un fragmento al final, y se genera el valor hash
[contenthash] Cuando el contenido del archivo cambia, el valor de hash cambiará
[id] Usa el ID de fragmento para generar el nombre del archivo
[hash] Utilice hash como nombre de archivo, cada vez que el hash generado sea diferente

module.exports = {
    
    
    output: {
    
    
        path: __dirname + "/dist",
        filname: "[name][id][contenthash].js"
    }
}

Cargador

loader¿Qué es? Solo hablamos de los jsrelevantes arriba. WebpackPor defecto, solo reconocemos archivos js. Entonces, Webpackcómo empaquetar jscosas que jsno sean empaquetamiento reportará un error. ¿Qué debo hacer? En este momento loader, loaderes un convertidor. Vamos sigue Tome el cssarchivo como ejemplo para explicar

La prueba recibe una expresión regular, coincide con el nombre del sufijo del archivo y entra con éxito en el cargador para su ejecución.
el uso recibe una matriz, cuando solo se puede escribir un cargador como una cadena

cargador-css

instalación

npm i css-loader --save-dev

usar

module.exports = {
    
    
     module: {
    
    
        rules: [
            {
    
    
                test: /\.css$/,
                use: ["css-loader"] or "css-loader"
            }
        ]
    }
}

Después de la configuración, loaderno se informará ningún error, pero el código aún no tiene efecto. Simplemente analizó el cssarchivo, pero no lo stylemontó en la página, debe combinarse style-loader.

cargador de estilo

instalación

npm i style-loader --save-dev

usar

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

En el ejemplo anterior, el cargador debe ejecutarse secuencialmente y el cargador se ejecuta de atrás hacia adelante. Primero, se analiza el archivo css y luego el archivo css analizado se monta en la etiqueta de estilo de página. En este momento, el código entrará en vigor.

Complementos

plugin de clean-webpack

En este momento, si modificamos el nombre del archivo en la salida y lo empaquetamos nuevamente, podemos ver que el código anterior en el paquete dist anterior todavía existe. En este momento, queremos generar un nuevo directorio dist cada vez que empaquetamos, y entonces tenemos que usarlo para el complemento.

Instale el clean-webpack-plugincomplemento, mi instalación local es la versión 3.0.0

npm i clean-wenpack-plugin --save-dev

usar

const {
    
     CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    
    
    plugins: [
        new CleanWebpackPlugin()
    ]
}

complemento-html-webpack

Si distno hay ningún index.htmlarchivo en el directorio después de haberlo empaquetado , entonces podemos usar el complemento, y se generará un htmlarchivo cada vez que lo empaquetemos , instalémoslo a continuación.

La instalación html-webpack-pluginque utilizo aquí es la versión 3.2.0. Cabe señalar que cuanto nodemás alta sea la versión local , más nuevo será el complemento instalado, y la nueva versión puede ser webpack4un poco incompatible o incluso provocar errores de código.

npm i html-webpack-plugin@3.2.0 --save-dev

usar

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

module.exports = {
    
    
    plugins: [
        new HtmlWebpackPlugin({
    
    
            template: './index.html',  // 以咱们本地的index.html文件为基础模板
            filename: "index.html",  // 输出到dist目录下的文件名称
        }),
    ]
}

html-webpack-pluginEl complemento recibe un objeto, y este objeto tiene algunos valores de atributo. No demos un ejemplo uno por uno aquí. Puede leer este artículo "Una explicación completa del uso de html-webpack-plugin" .

Código completo

const {
    
     CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    
    
    entry: "./src/index.js",
    output: {
    
    
        path: __dirname + "/dist",
        filename: "index.js"
    },
    module: {
    
    
        rules: [
            {
    
    
                test: /\.css$/,
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
    
    
            template: './index.html',
            filename: "index.html",
        }),
    ]
}

para resumir

En este punto, hemos webpackterminado la introducción y hemos realizado un empaquetado simple. webpackPor defecto, solo se reconocen los jsarchivos. Si desea usar csse imágenes, puede usar loaderpara convertir. Podemos ver el final completo paquete, distel directorio o algo del archivo original html,, css, jsdirectamente distfondo contraído desplegado en la línea.