欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

分享12個Webpack中常用的Loader(小結(jié))

 更新時間:2021年03月23日 09:35:43   作者:蛙人  
這篇文章主要介紹了分享12個Webpack中常用的Loader(小結(jié)),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

初衷: 整理一些常用的loader分享給大家,方便知道在什么場景下該用什么loader。如果有大佬都懂悄悄左滑就行,不喜勿噴。
適合人群: 前端初級開發(fā)。

style-loader

用途: 用于將css編譯完成的樣式,掛載到頁面style標(biāo)簽上。需要注意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

用途: 用于補(bǔ)充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)境自動添加所需的插件和補(bǔ)丁來編譯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
當(dāng)前配置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為準(zhǔn)。
安裝

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ù)圖片大小進(jìn)行不同的操作,如果該圖片大小大于指定的大小,則將圖片進(jìn)行打包資源,否則將圖片轉(zhuǎn)換為base64字符串合并到j(luò)s文件里
安裝

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打包進(jìn)js文件,如果大于10kb則打包到dist目錄
      }
     }
    ]
   }
  ]
 }
}

html-withimg-loader

用途: 我們在編譯圖片時,都是使用file-loader和url-loader,這兩個loader都是查找js文件里的相關(guān)圖片資源,但是html里面的文件不會查找所以我們html里的圖片也想打包進(jìn)去,這時使用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], // 縮進(jìn)風(fēng)格
  "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/
   }
  ]
 }
}

總結(jié)

到此這篇關(guān)于分享12個Webpack中常用的Loader(小結(jié))的文章就介紹到這了,更多相關(guān)Webpack常用的Loader內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論