关于前端:分享12个Webpack中常用的Loader

前言

初衷： 整顿一些罕用的 loader 分享给大家，不便晓得在什么场景下该用什么 loader。如果有大佬都懂轻轻左滑就行，不喜勿喷。

适宜人群： 前端高级开发。

style-loader

用处： 用于将 css 编译实现的款式，挂载到页面 style 标签上。须要留神 loader 执行程序，style-loader 放到第一位，因为 loader 都是从下往上执行，最初全副编译实现挂载到 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"]
        })
    ]
}

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

用处： 用于配置我的项目 typescript

装置

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>
    ![](./src/img/pic.jpg)
</body>
</html>

webpack.config.js

如果打包呈现 img 的 src 门路为[Object Module]，解决方案有

• 将 file-loader 降级到 4.2.0
• 批改 options 参数 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/
            }
        ]
    }
}

感激

谢谢你读完本篇文章，心愿对你能有所帮忙，如有问题欢送各位斧正。

我是蛙人(✿◡‿◡)，如果感觉写得能够的话，请点个赞吧❤。

感兴趣的小伙伴能够退出 前端娱乐圈交换群 欢送大家一起来交换探讨

写作不易，「点赞」+「在看」+「转发」 谢谢反对❤

往期好文

《聊聊在 Vue 我的项目中应用 Decorator 装璜器》

《聊聊什么是 CommonJs 和 Es Module 及它们的区别》

《带你轻松了解数据结构之 Map》

《这些工作中用到的 JavaScript 小技巧你都晓得吗？》

《【倡议珍藏】分享一些工作中罕用的 Git 命令及非凡问题场景怎么解决》

《你真的理解 ES6 中的函数个性么？》