分享12个Webpack中经常使用的Loader

前言

初衷： 整理一些经常使用的loader分享给你们，方便知道在什么场景下该用什么loader。若是有大佬都懂悄悄左滑就行，不喜勿喷。javascript

适合人群： 前端初级开发。css

style-loader

用途： 用于将css编译完成的样式，挂载到页面style标签上。须要注意loader执行顺序，style-loader放到第一位，由于loader都是从下往上执行，最后所有编译完成挂载到style上html

安装前端

cnpm i style-loader -D
复制代码

配置vue

webpack.config.jsjava

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

css-loader

用途： 用于识别.css文件, 处理css必须配合style-loader共同使用，只安装css-loader样式不会生效。node

安装webpack

cnpm i css-loader style-loader -D
复制代码

配置git

webpack.config.jsgithub

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

用途： 用于配置项目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>
    <img src="./src/img/pic.jpg" alt="">
</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中的函数特性么？》