分享12個Webpack中常用的Loader(小結(jié))
前言
初衷: 整理一些常用的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)文章
Bootstrap 模態(tài)框多次顯示后臺提交多次BUG的解決方法
本篇文章主要介紹了Bootstrap 模態(tài)框多次顯示后臺提交多次BUG的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-12-12firefox事件處理之自動查找event的函數(shù)(用于onclick=foo())
在ie中,事件對象是作為一個全局變量來保存和維護(hù)的。 所有的瀏覽器事件,不管是用戶觸發(fā)的,還是其他事件, 都會更新window.event 對象。2010-08-08關(guān)于ckeditor在bootstrap中modal中彈框無法輸入的解決方法
今天小編就為大家分享一篇關(guān)于ckeditor在bootstrap中modal中彈框無法輸入的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript實現(xiàn)顯示和隱藏div方法匯總
本文章通過幾個簡單的實例告訴你如何來實例關(guān)于隱藏與顯示div層及關(guān)閉層與隱藏的區(qū)別分析哦,有需要的同學(xué)可以參考一下本文章。2015-08-08layer.open彈層查看縮略圖的原圖,自適應(yīng)大小的實例
今天小編就為大家分享一篇layer.open彈層查看縮略圖的原圖,自適應(yīng)大小的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript實現(xiàn)判斷時間間隔是否連續(xù)為一天
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實現(xiàn)判斷時間間隔是否連續(xù)為一天,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2024-01-01