【webpack】分享12個Webpack中常用的Loader
前言
初衷： 整理一些常用的loader分享給大家，方便知道在什么場景下該用什么loader。如果有大佬都懂悄悄左滑就行，不喜勿噴。
適合人群： 前端初級開發(fā)。
style-loader
用途： 用于將css編譯完成的樣式，掛載到頁面style標簽上。需要注意loader執(zhí)行順序，style-loader放到第一位，因為loader都是從下往上執(zhí)行，最后全部編譯完成掛載到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預(yù)處理器，我們在項目開發(fā)中經(jīng)常會使用到的，編寫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樣式各種瀏覽器內(nèi)核前綴，太方便了，不用我們手動寫啦。
安裝
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 | 所有瀏覽器兼容到最后兩個版本根據(jù)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+ 語法轉(zhuǎn)換為Es5語法。
安裝
cnpm i babel-loader @babel/core @babel/preset-env -D
babel-loader 這是使babel和webpack協(xié)同工作的模塊 @bable/core 這是babel編譯器核心模塊 @babel/preset-env 這是babel官方推薦的預(yù)置器，可根據(jù)用戶的環(huán)境自動添加所需的插件和補丁來編譯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文件調(diào)試使用
"sourceMap": true,
"target": "es5", // 轉(zhuǎn)換為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元素內(nèi)容使用，這時就用到html-loader
安裝
cnpm i html-loader@0.5.5 -D
建議安裝低版本，高版本可能會不兼容導(dǎo)致報錯。我這里安裝的是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可以設(shè)置一個根據(jù)圖片大小進行不同的操作，如果該圖片大小大于指定的大小，則將圖片進行打包資源，否則將圖片轉(zhuǎn)換為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則轉(zhuǎn)換為base64打包進js文件，如果大于10kb則打包到dist目錄
}
}
]
}
]
}
}
html-withimg-loader
用途： 我們在編譯圖片時，都是使用file-loader和url-loader，這兩個loader都是查找js文件里的相關(guān)圖片資源，但是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
如果打包出現(xiàn)img的src路徑為[Object Module]，解決方案有
將file-loader降級到4.2.0 修改options參數(shù)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
用途： 用于檢查代碼是否符合規(guī)范，是否存在語法錯誤。
安裝
cnpm i eslint-loader eslint -D
配置
index.ts
var abc:any = 123;
console.log(abc)
.eslintrc.js
這里簡單寫幾個規(guī)則
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/
}
]
}
}
感謝
謝謝你讀完本篇文章，希望對你能有所幫助，如有問題歡迎各位指正。
歡迎關(guān)注「前端雜貨鋪」，一個有溫度且致力于前端分享的雜貨鋪
關(guān)注回復(fù)「加群」，可加入雜貨鋪一起交流學習成長