¡Comparte 15 complementos útiles para Webpack! ! !

Prefacio

Intención original: compartir algunas cosas útiles en el trabajo Plugin, espero que sea de ayuda para todos, no rocíe si no le gusta.

complemento-html-webpack

Propósito: empaquete una plantilla de página en el directorio dist y, por defecto, importará automáticamente js o css

instalación

cnpm i html-webpack-plugin@3.2.0 -D

Configuración

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

webpack.config.js

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

HtmlWebpackPluginReciba un objeto, configúrelo usted mismo, consulte aquí para obtener más detalles

plugin de clean-webpack

Propósito: se utiliza para eliminar todos los directorios dist de paquetes

instalación

cnpm i clean-webpack-plugin -D

Configuración

webpack.config.js

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

extraer-texto-paquete-web-plugin

Propósito: Extraer el cssestilo del jsarchivo y finalmente sintetizar un cssarchivo. El complemento solo es compatible con la webpack4versión anterior. Si actualmente estás en webpack4la versión o por encima de ella, se informará un error.

instalación

cnpm i extract-text-webpack-plugin -D

Configuración

webpack.config.js

const extractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    
    
    module: {
    
    
        rules: [
            {
    
    
                test: /\.css$/,
                use: extractTextPlugin.extract({
    
    
                    fallback: "style-loader", 
                    use: "css-loader"
                })
            }
        ]
    },
    plugins: [
        new extractTextPlugin({
    
    
            filename: "[name].css",
            allChunks: true
        })
    ]
}

En la configuración anterior, los extractTextPlugin.extractparámetros internos fallbackse ejecutan cuando la extracción no tiene éxito style-loader. useQue se utiliza para extraer css-loaderla conversión, pluginscuya configuración filenamefinalmente se termina fusionando .cssel nombre del archivo, cuando allChunkses falseel momento, solo al extraer el cssarchivo de inicialización para trueextractos cuando el cssarchivo asincrónico .

mini-css-extract-plugin

Propósito: El complemento es exract-text-webpack-pluginel mismo que el anterior , extrae el estilo css, la única diferencia es el uso, webpack4se recomienda usarlo después de la versión del complemento

instalación

cnpm i mini-css-extract-plugin -D

Configuración

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    
    
    module: {
    
    
        rules: [
            {
    
    
                test: /\.css$/,
                use: [
                   MiniCssExtractPlugin.loader,
                   "css-loader"
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
    
    
            filename: "css/[name].css",
            chunkFilename: "css/[name].css"
        })
    ]
}

En la configuración anterior, puede ver el uso y la exract-text-webpack-plugindiferencia, echemos un vistazo a la diferencia.

loaderSin configuraciónfallback
Al pluginconfigurar filenamela carga de sincronización el nombre del recurso, también especifique la carga asincrónica cssde recursoschunkFilename
El complemento admite la configuración publicPathpara establecer cssla ruta de carga asincrónica
exract-text-webpack-pluginSolo se extraerá un archivo css y se mini-css-extract-pluginextraerá en función del archivo asincrónico.

webpack.optimize.CommonsChunkPlugin

Finalidad: Se utiliza para extraer el código común en la página, de manera que se optimice la velocidad de carga, esta CommonsChunkPluginsolo soporta la Webpack4anterior.

instalación

该插件是Webpack内置的，不需要安装。

Configuración

main.js

import Vue from "vue"

webpack.config.js

module.exports = {
    
    
    entry: {
    
    
        main: "./main.js",
        vendor: ["Vue"]
    },
    plugins: [
        new Webpack.optimize.CommonsChunkPlugin({
    
    
            name: "vendor",
            filename: "[name].js"
        }),
        new Webpack.optimize.CommonsChunkPlugin({
    
    
            name: "common",
            chunks: ["vendor"],
            filename: "[name].js"
        })
    ]
}

En la configuración anterior, extraemos y optimizamos main.jslos archivos dependientes en Vue.jsél para evitar cargar este jsarchivo cada vez que empaqueta o visita otras páginas.Primero Vueextraemos el entorno básico, porque el entorno básico apenas cambiará, por lo que la optimización de la extracción es necesaria. Luego, Webpackextraiga el código de tiempo de ejecución, para que vendorno cambie si lo empaqueta de nuevo, puede usar la caché del navegador

optimización.

Propósito: Esta función es la webpack.optimize.CommonsChunkPluginmisma que anteriormente , pero optimization.SplitChunksse webpack4recomienda utilizar más tarde

instalación

内置的，不需要安装。

Configuración

main.js

import Vue from "vue"
console.log(Vue)
import("./news")

news.js

import Vue from "vue"
console.log(Vue)

webpack.config.js

module.exports = {
    
    
    mode: "development",
    entry: {
    
    
        main: "./main.js"
    },
    output: {
    
    
        filename: "[name].js",
        path: __dirname + "/dist"
    },
    optimization: {
    
    
        splitChunks: {
    
    
            chunks: "all"
        }
    },
}

En la configuración anterior, splitChunksel chunkscomo alles todo chunktoma efecto por defecto sólo asyncasíncrono válida.

splitChunksTambién hay extracción automática de forma predeterminada, y los requisitos predeterminados son los siguientes:

Los módulos extraídos son del node_modulecatálogo
El módulo tiene un tamaño superior a 30 kb
Cuando se carga bajo demanda, el recurso máximo solicitado es menor o igual a 5
El número máximo de solicitudes paralelas en la primera carga es menor o igual a 3

DefinePlugin

Propósito: Se utiliza para inyectar variables globales, generalmente se usa en variables de entorno.

instalación

无需安装，webpack内置

Configuración

webpack.config.js

const Webpack = require("webpack")
module.exports = {
    
    
    plugins: [
        new Webpack.DefinePlugin({
    
    
           STR: JSON.stringify("蛙人"),
           "process.env": JSON.stringify("dev"),
            name: "蛙人"
        })
    ]
}

En la configuración anterior, DefinePluginse recibe un objeto y el keyvalor en el interior corresponde a un valuevalor. Este valuevalor es un fragmento de código. Puede ver el anterior namey se informará un error 蛙人 is not defined. Tenga en cuenta aquí que el valuevalor debe ser una variable o un fragmento de código .

ProvidePlugin

Propósito: Se usa para definir variables globales, como importar 100 páginas, importar vuecada página solo aumentará la carga de trabajo, solo webpackProvidemonte una variable directamente , sin necesidad de importar una por una.

instalación

无需安装，webpack内置

Configuración

webpack.config.js

const Webpack = require("webpack")
module.exports = {
    
    
    plugins: [
        new Webpack.ProvidePlugin({
    
    
            "Vue": ["vue", "default"] 
        })
    ]
}

En la configuración anterior, se ProvidePluginrecibe un objeto, el keyvalor es la variable utilizada, el valueprimer parámetro del valor es el Vuemódulo y el segundo parámetro es el Es Module.defaultatributo predeterminado . importEl valor predeterminado es la introducción de un Es Moduleobjeto que viene , que tiene defaultesta propiedad es el objeto de entidad

complemento-de-reemplazo-de-módulo-caliente

Propósito: actualización de módulo caliente abierto

instalación

无需安装，webpack内置

Configuración

webpack.config.js

const Webpack = require("webpack")
module.exports = {
    
    
    plugins: [
        new Webpack.HotModuleReplacementPlugin()
    ]
}

IgnorePlugin

Propósito: se utiliza para filtrar archivos empaquetados y reducir el tamaño de los archivos empaquetados.

instalación

无需安装，webpack内置

Configuración

webpack.config.js

const Webpack = require("webpack")
module.exports = {
    
    
    plugins: [
        new Webpack.IgnorePlugin(/.\/lib/, /element-ui/)
    ]
}

uglifyjs-webpack-plugin

Propósito: Se utiliza para comprimir jsarchivos, apuntando a webpack4versiones y superiores.

instalación

cnpm install uglifyjs-webpack-plugin -D

Configuración

webpack.config.js

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    
    
	optimization: {
    
    
        minimizer: [
            new UglifyJsPlugin({
    
    
                test: /\.js(\?.*)?$/i,
                exclude: /node_modules/
            })
        ]
    }
}

copy-webpack-plugin

Propósito: se utiliza para copiar archivos a un directorio.

instalación

cnpm i  copy-webpack-plugin@6.4.1 -D

Configuración

webpack.config.js

const CopyWebpackPlugin=require('copy-webpack-plugin');
module.exports = {
    
    
    plugins: [
        new CopyWebpackPlugin({
    
    
            patterns: [
                {
    
    
                    from: "./main.js",
                    to: __dirname + "/dist/js",
                    toType: "dir"
                }
            ]
        })
    ]
}

En la configuración anterior, se main.jscopiará al distdirectorio js, el toTypevalor predeterminado filepuede establecerse en dir, porque mi catálogo distno tiene directorio js.

optimizar-css-assets-webpack-plugin

Propósito: se utiliza para comprimir el estilo CSS

instalación

cnpm i optimize-css-assets-webpack-plugin -D

Configuración

webpack.config.js

const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")
module.exports = {
    
    
    plugins: [
        new OptimizeCssAssetsWebpackPlugin(),
    ]
}

imagemin-webpack-plugin

Propósito: utilizado para comprimir imágenes.

instalación

cnpm i imagemin-webpack-plugin -D

Configuración

webpack.config.js

const ImageminPlugin =  require('imagemin-webpack-plugin').default
module.exports = {
    
    
    plugins: [
        new ImageminPlugin({
    
    
             test: /\.(jpe?g|png|gif|svg)$/i 
        })
    ]
}

amigable-errores-complemento-webpack

Propósito: embellecer la consola, provocar bien los errores. No queremos que nuestra terminal se inicie desordenada, como esta

Ejemplo

instalación

cnpm i friendly-errors-webpack-plugin -D

Configuración

webpack.config.js

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const devServer =  {
    publicPath: "/",
    port: 9527,
    host: "localhost",
    open: true,
    hotOnly: true,
    stats: 'errors-only'
}
module.exports = {
	plugins: [
		new FriendlyErrorsWebpackPlugin({
			compilationSuccessInfo: {
                notes: ['蛙人你好，系统正运行在http://localhost:' + devServer.port]
            },
            clearConsole: true,
		})
	],
	devServer
}

Después de ejecutar el código anterior. Ver los siguientes resultados