分享12个Webpack中常用的Loader
source link: https://segmentfault.com/a/1190000039685928
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
初衷: 整理一些常用的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 [email protected] 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 [email protected] -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 [email protected] 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/ } ] } }
谢谢阅读,如有帮助请点个关注、转发吧
觉得有帮助可以关注前端娱乐圈公众号,每天为你推送一篇小知识
大家也可以加我微信交个朋友,可以找我聊天或拉你进技术交流群
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK