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

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

предисловие

Первоначальное намерение:Отсортируйте некоторые часто используемые загрузчики, чтобы поделиться с вами, чтобы вы могли легко понять, какой загрузчик использовать в каком сценарии. Если есть большие ребята, которые умеют тихо свайпать влево, не брызгайте, если не нравится.

Подходит для толпы:Первичная фронтенд разработка.

style-loader

использовать:дляcssСкомпилированный стиль монтируется на страницуstyleна этикетке.Необходимо обратить внимание на порядок выполнения загрузчика, стиль-загрузчик ставится первым, потому что загрузчик выполняется снизу вверх, и в конце вся компиляция завершается и монтируется на стиль.

Установить

cnpm i style-loader -D

настроить

webpack.config.js

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

css-loader

использовать:для идентификации.cssФайл, процессcssдолжны сотрудничатьstyle-loaderОбычное использование, только установкаcss-loaderСтили не вступят в силу.

Установить

cnpm i css-loader style-loader -D

настроить

webpack.config.js

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

sass-loader

использовать:cssПрепроцессор, который мы часто используем при разработке проектов, пишемcssОчень удобно, одно слово «палка».

Установить

cnpm i sass-loader@5.0.0 node-sass -D

настроить

index.js

import "index.scss"

index.scss

body {
    font-size: 18px;
    background: red;
}

webpack.config.js

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

postcss-loader

использовать:Он используется для дополнения различных префиксов ядра браузера для стилей CSS, настолько удобен, что нам не нужно писать их вручную.

Установить

cnpm i postcss-loader autoprefixer -D

настроить

postcss.config.js

Если вы не записываете это в этот файл, вы также можете записать его вpostcss-loaderизoptionsвнутри, запись в этот файл эквивалентна записи туда

module.exports = {
    plugins: [
        require("autoprefixer")({
            overrideBrowserslist: ["> 1%", "last 3 versions", "ie 8"]
        })
    ]
}
Атрибуты описывать
> 1% Браузер, которым пользуется более 1% населения мира
> 5% in CN Покрытие использования в определенных странах
last 2 versions Все браузеры совместимы до двух последних версий, отслеживаемых CanIUse.com.
Firefox ESR последняя версия фаерфокса
Firefox > 20 Указывает диапазон версий браузера
not ie <=8 Ориентация исключает некоторые версии
Firefox 12.1 Совместимость указанного браузера с указанной версией

webpack.config.js

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

babel-loader

использовать: преобразование синтаксиса Es6+ в синтаксис Es5.

Установить

cnpm i babel-loader @babel/core @babel/preset-env -D
  • babel-loader Это модуль, благодаря которому babel и webpack работают вместе.
  • @bable/core Это основной модуль компилятора babel.
  • @babel/preset-env Это официальный предустановщик, рекомендованный babel, который может автоматически добавлять необходимые плагины и исправления для компиляции кода Es6 в соответствии с пользовательской средой.

настроить

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            ['@babel/preset-env', { targets: "defaults"}]
                        ]
                    }
                }
            },
        ]
    }
}

ts-loader

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

Установить

cnpm i ts-loader typescript -D

настроить

webpack.config.js

текущая конфигурацияts-loaderОн не вступит в силу, он просто скомпилирует и распознает.tsфайл, основной файл конфигурации находится вtsconfig.jsonвнутри

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

tsconfig.json

{
    "compilerOptions": {
      "declaration": true,
      "declarationMap": true, // 开启map文件调试使用
      "sourceMap": true,
      "target": "es5", // 转换为Es5语法
    }
}

webpack.config.js

module.exports = {
    entry: "./src/index.ts",
    output: {
        path: __dirname + "/dist",
        filename: "index.js",
    },
    module: {
        rules: [
            {
                {
                	test: /\.ts$/,
                	use: "ts-loader",
            	}
            }
        ]
    }
}

html-loader

использовать:Иногда мы хотим представитьhtmlФрагмент кода страницы назначаетсяDOMИспользуется содержимое элемента, который используется в данный моментhtml-loader

Установить

cnpm i html-loader@0.5.5 -D

Рекомендуется установить более раннюю версию, более старшая версия может быть несовместима и вызвать ошибку. Я установил версию 0.5.5 здесь

настроить

index.js

import Content from "../template.html"

document.body.innerHTML = Content

webpack.config.js

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

file-loader

использовать:Для работы с ресурсами типов файлов, такими какjpg,pngи т.п. картинки. Возвращаемое значениеpublicPathпреобладать.

Установить

cnpm i file-loader -D

настроить

index.js

import img from "./pic.png"
console.log(img) // https://www.baidu.com/pic_600eca23.png

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name]_[hash:8].[ext]",
                            publicPath: "https://www.baidu.com" 
                        }
                    }
                ]
            }
        ]
    }
}

url-loader

использовать: url-loaderОн также обрабатывает ресурсы типа изображения, но это то же самое, что иfile-loaderнемного другой,url-loaderВы можете установить другую операцию в зависимости от размера изображения. Если размер изображения больше указанного размера, изображение будет упаковано как ресурс, в противном случае изображение будет преобразовано вbase64Строки объединяются вjsв файле

Установить

cnpm i url-loader -D

настроить

index.js

import img from "./pic.png"

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            name: "[name]_[hash:8].[ext]",
                            limit: 10240, // 这里单位为(b) 10240 => 10kb
                            // 这里如果小于10kb则转换为base64打包进js文件，如果大于10kb则打包到dist目录
                        }
                    }
                ]
            }
        ]
    }
}

html-withimg-loader

использовать:Когда мы компилируем изображения, мы используемfile-loaderа такжеurl-loader, дваloaderвсе поискjsРесурсы файла изображения, ноhtmlФайлы внутри не будут просматриваться, поэтому мыhtmlКартинки в коробке тоже хочется упаковать, а потом использоватьhtml-withimg-loader

Установить

cnpm i html-withimg-loader -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>
    <h4>我蛙人</h4>
    <img src="./src/img/pic.jpg" alt="">
</body>
</html>

webpack.config.js

Если путь src для img отображается в пакете как[Object Module], решение

  • Понизить загрузчик файлов до 4.2.0
  • Измените параметр параметров esModule на false.
module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|jpeg)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name]_[hash:8].[ext]",
                        publicPath: "http://www.baidu.com",
                        esModule: false
                    }
                }
            },
            {
                test: /\.(png|jpeg|jpg)/,
                use: "html-withimg-loader"
            }
        ]
    }
}

vue-loader

использовать:для компиляции.vueфайл, если мы создадим его самиvueпроект готов к использованиюvue-loader, Ниже приводится краткое описание, и я не буду здесь вдаваться в подробности.

Установить

cnpm i vue-loader@15.7.0 vue vue-template-compiler -D
  • vue-loader используется для идентификации файлов .vue
  • Излишне говорить, что vue распознает и поддерживает синтаксис vue.
  • механизм рендеринга шаблонов синтаксиса vue-template-compiler {{}}template,script,style

настроить

main.js

import App from "./index.vue"
import Vue from 'Vue'
new Vue({
    el: "#app",
    render: h => h(App) 
})

index.vue

<template>
  <div class="index">
    {{ msg }}
  </div>
</template>

<script>
export default {
 name: 'index',
  data() {
    return {
        msg: "hello 蛙人"
    }
  },
  created() {},
  components: {},
  watch: {},
  methods: {}
}
</script>
<style scoped>

</style>

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry: "./src/main.js",
    output: {
        path: __dirname + "/dist",
        filename: "index.js",
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: "vue-loader"
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

eslint-loader

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

Установить

cnpm i eslint-loader eslint -D

настроить

index.ts

var abc:any = 123;
console.log(abc)

.eslintrc.js

Вот несколько простых правил

module.exports = {
    root: true,   
    env: {
        browser: true,
    },
    rules: {
        "no-alert": 0, // 禁止使用alert
        "indent": [2, 4], // 缩进风格
        "no-unused-vars": "error" // 变量声明必须使用
    }
}

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: ["eslint-loader", "ts-loader"],
                enforce: "pre",
                exclude: /node_modules/
            },
            {
                test: /\.ts$/,
                use: "ts-loader",
                exclude: /node_modules/
            }
        ]
    }
}

благодарный

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

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

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

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

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

«Расскажите об использовании декораторов Decorator в проектах Vue»

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

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

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

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

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

Категории