Поделитесь 15 полезными плагинами для Webpack! ! !

Webpack
Поделитесь 15 полезными плагинами для Webpack! ! !

предисловие

Первоначальное намерение:Поделитесь несколькими полезными вещами на работеPlugin, я надеюсь, что это поможет всем, если вам это не нравится, не распыляйте его.

html-webpack-plugin

использовать:Упакуйте шаблон страницы в каталог dist, и по умолчанию автоматически импортируется js или css.

Установить

cnpm i html-webpack-plugin@3.2.0 -D

настроить

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目录下的文件名称
        }),
    ]
}

HtmlWebpackPluginПолучите объект и настройте его самостоятельно, подробнее см.здесь

clean-webpack-plugin

использовать:Он используется для удаления каталога dist каждый раз, когда он упакован.

Установить

cnpm i clean-webpack-plugin -D

настроить

webpack.config.js

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

extract-text-webpack-plugin

использовать:Будуcssстиль отjsФайл извлекается и, наконец, синтезируется вcssфайл, плагин поддерживает толькоwebpack4предыдущая версия, если вы в настоящее времяwebpack4и выше версии сообщат об ошибке.

Установить

cnpm i extract-text-webpack-plugin -D

настроить

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
        })
    ]
}

В приведенной выше конфигурацииextractTextPlugin.extractвнутренние параметрыfallbackвыполняется, когда извлечение не удалосьstyle-loader.useкоторый используется при извлеченииcss-loaderдля преобразования,pluginsконфигурация внутриfilenameбыл окончательно объединен.cssимя файла, когдаallChunksдляfalse, только инициализированныйcssфайл дляtrueизвлекает асинхронноcssдокумент.

mini-css-extract-plugin

использовать:Этот плагин такой же, как и вышеexract-text-webpack-pluginЭто то же самое, что и стиль css, с той лишь разницей, что использование отличается.webpack4Рекомендуется после версии

Установить

cnpm i mini-css-extract-plugin -D

настроить

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"
        })
    ]
}

В приведенной выше конфигурации вы можете увидеть использование иexract-text-webpack-pluginРазные, давайте посмотрим на их разницу.

  1. loaderномер конфигурацииfallback
  2. существуетpluginустановить вfilenameЗагрузить имя ресурса синхронно, а также указать асинхронную загрузкуcssресурсchunkFilename
  3. Плагин поддерживает настройкуpublicPathИспользуется для настройки асинхронной загрузкиcssмаршрут
  4. exract-text-webpack-pluginбудет извлекать только файл css,mini-css-extract-pluginОн будет извлечен в соответствии с асинхронным файлом.

webpack.optimize.CommonsChunkPlugin

использовать:Он используется для извлечения общедоступного кода на странице для оптимизации скорости загрузки.CommonsChunkPluginтолько поддержкаWebpack4До.

Установить

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

настроить

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"
        })
    ]
}

В приведенной выше конфигурации мы поместилиmain.jsи файлы зависимостей внутри него помещаютсяVue.jsИзвлеките его для оптимизации и избегайте загрузки одной из страниц каждый раз, когда вы упаковываете или посещаете другие страницы.jsфайл, мы сначала помещаемVueИзвлекается базовая среда, поскольку базовая среда почти не меняется, поэтому необходима оптимизация извлечения. поставь это сноваWebpackКод среды выполнения также извлекается, так чтоvendorОн не изменится, даже если его снова запаковать, вы можете перейти к кешу браузера.

optimization.SplitChunks

использовать:Эта функция такая же, как и вышеwebpack.optimize.CommonsChunkPluginто же, толькоoptimization.SplitChunksдаwebpack4рекомендуется для последующего использования

Установить

内置的，不需要安装。

настроить

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"
        }
    },
}

В приведенной выше конфигурацииsplitChunksизchunksдляallда для всехchunkОба вступают в силу, по умолчанию только дляasyncАсинхронные работы.

splitChunksТакже существует автоматическое извлечение по умолчанию, и требования по умолчанию следующие:

  • Извлеченные модули взяты изnode_moduleсодержание
  • Модули больше 30kb
  • При загрузке по запросу максимальное значение запрашиваемых ресурсов меньше или равно 5
  • Максимальное количество параллельных запросов при первой загрузке меньше или равно 3

DefinePlugin

использовать:Используется для внедрения глобальных переменных, обычно используемых в переменных среды.

Установить

无需安装，webpack内置

настроить

webpack.config.js

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

В приведенной выше конфигурацииDefinePluginполучает объект сkeyзначение соответствуетvalueзначение, этоvalueЗначение представляет собой фрагмент кода, вы можете видеть вышеnameЭто даст ошибку蛙人 is not defined,Обратите внимание,valueЗначение должно быть переменной или фрагментом кода..

ProvidePlugin

использовать:Используется для определения глобальных переменных, таких как 100 страниц.vue, введение каждой страницы только увеличит нагрузку, непосредственно вwebpackProvideСмонтировать переменную на линии, не переходя к одиннадцати введенным.

Установить

无需安装，webpack内置

настроить

webpack.config.js

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

В приведенной выше конфигурацииProvidePluginполучает объект,keyзначение - используемая переменная,valueЗначение первого параметра равноVueмодуль, второй параметр берется по умолчаниюEs Module.defaultхарактеристики.importПо умолчанию импортируетсяEs Moduleобъект, имеющийdefaultЭто свойство является объектом объекта

hot-module-replacement-plugin

использовать:Включить горячее обновление модуля

Установить

无需安装，webpack内置

настроить

webpack.config.js

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

IgnorePlugin

использовать:Используется для фильтрации упакованных файлов и уменьшения размера пакета.

Установить

无需安装，webpack内置

настроить

webpack.config.js

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

uglifyjs-webpack-plugin

использовать:для сжатияjsфайл дляwebpack4версия выше.

Установить

cnpm install uglifyjs-webpack-plugin -D

настроить

webpack.config.js

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

copy-webpack-plugin

использовать:Используется для копирования файлов в каталог

Установить

cnpm i  copy-webpack-plugin@6.4.1 -D

настроить

webpack.config.js

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

В приведенной выше конфигурацииmain.jsскопировать вdistв каталогеjsвнутри,toTypeПо умолчаниюfile, также можно установитьdir, потому что яdistнет каталогаjsсодержание.

optimize-css-assets-webpack-plugin

использовать:Используется для сжатия стилей css

Установить

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

настроить

webpack.config.js

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

imagemin-webpack-plugin

использовать:для сжатия изображений

Установить

cnpm i imagemin-webpack-plugin -D

настроить

webpack.config.js

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

friendly-errors-webpack-plugin

использовать:Украсьте консоль, хорошо подскажите ошибки,. Мы не хотим, чтобы наш терминал запускался в беспорядке, как это

示例

Установить

cnpm i friendly-errors-webpack-plugin -D

настроить

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
}

Завершите выполнение приведенного выше кода. смотрите результат ниже

благодарный

Спасибо за чтение этой статьи, я надеюсь, что она может быть вам полезна, и если у вас есть какие-либо вопросы, пожалуйста, поправьте меня.

Я водолаз (✿◡‿◡), если вы считаете, что писать можно, ставьте лайк ❤.

Заинтересованные друзья могут присоединиться[Группа обмена развлекательными кругами]Приветствую всех для обсуждения

Писать нелегко,"Мне нравится" + "Смотрел" + "Ретвитнуть"Спасибо за вашу поддержку ❤

Хорошие статьи в прошлом

«Рука учит вас писать компонент VUE для публикации в NPM и может быть введен во внешнюю цепочку».

"Поделитесь 12 загрузчиками, обычно используемыми в Webpack"

«Поговорим о том, что такое CommonJs и Es Module и чем они отличаются»

«Карта с простым пониманием структуры данных»

«Знаете ли вы все приемы JavaScript, используемые в этих работах? 》

«[Рекомендуемая коллекция] Расскажите о некоторых часто используемых командах Git и о том, как решать особые сценарии проблем»

«Вы действительно понимаете функциональные особенности в ES6? 》

Категории