Share a summary of Loader of commonly used in 12 Webpack

  • 2021-11-01 23:15:41
  • OfStack

Preface to the table of contents
style-loader
css-loader
sass-loader
postcss-loader
babel-loader
ts-loader
html-loader
file-loader
url-loader
html-withimg-loader
vue-loader
eslint-loader
Summarize

Preface

Original intention: Organize some commonly used loader and share it with everyone, so as to know what loader should be used in what scenarios. If there are bosses who know how to slide quietly to the left, don't spray if you don't like it.
Suitable for people: front-end primary development.

style-loader

Purpose: Used to mount the css compiled style onto the style tab of the page. Note the execution sequence of loader. Put style-loader in the first place, because loader is executed from bottom to top, and finally all of them are compiled and mounted on style
Installation


cnpm i style-loader -D

Configure
webpack.config.js


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

css-loader

Purpose: Used to identify. css files, processing css must be used together with style-loader, only installing css-loader style will not take effect.
Installation


cnpm i css-loader style-loader -D

Configure
webpack.config.js


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

sass-loader

Purpose: css preprocessor, we often use in project development, writing css is very convenient, a word "stick".
Installation


cnpm i sass-loader@5.0.0 node-sass -D

Configure
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

Purpose: It is used to supplement various browser kernel prefixes of css style, which is too convenient for us to write manually.
Installation


cnpm i postcss-loader autoprefixer -D

Configure
postcss.config.js

If it is not written in this file, it can also be written in options of postcss-loader. Writing in this file is the same as writing there


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

Purpose: Convert Es6 + syntax to Es5 syntax.
Installation


module.exports = {
 module: {
  rules: [
   {
    test: /\.css/,
    use: ["style-loader"]
   }
  ]
 }
}
0 babel-loader This is the module that makes babel and webpack work together @ bable/core This is the core module of the babel compiler @ babel/preset-env This is the official babel presetter that automatically adds the required plug-ins and patches to compile Es6 code according to the user's environment

Configure
webpack.config.js


module.exports = {
 module: {
  rules: [
   {
    test: /\.js$/,
    use: {
     loader: "babel-loader",
     options: {
      presets: [
       ['@babel/preset-env', { targets: "defaults"}]
      ]
     }
    }
   },
  ]
 }
}

ts-loader

Purpose: Used to configure project typescript
Installation


cnpm i ts-loader typescript -D

Configure
webpack.config.js
The current configuration of ts-loader will not take effect, only the file identifying. ts will be compiled. The main configuration file is in tsconfig. json


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

tsconfig.json


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

webpack.config.js


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

html-loader

Purpose: We sometimes want to introduce an html page code snippet to be assigned to the DOM element content, and then use html-loader
Installation


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

It is recommended to install a lower version. Higher versions may be incompatible and cause errors. I have version 0.5. 5 installed here
Configure
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

Purpose: Used for processing file type resources, such as jpg, png and other pictures. The return value is publicPath.
Installation


cnpm i file-loader -D

Configure
index.js


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

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

Purpose: url-loader is also processing picture type resources, but it is different from file-loader in 1 point, url-loader can set up a different operation according to the size of the picture, if the size of the picture is larger than the specified size, the picture will be packaged resources, otherwise the picture will be converted to base64 string merged into js file
Installation


cnpm i url-loader -D

Configure
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, //  The unit here is (b) 10240 => 10kb
       //  If it is less than 10kb Is converted to base64 Pack into js File, if it is greater than 10kb Is packaged to the dist Directory 
      }
     }
    ]
   }
  ]
 }
}

html-withimg-loader

Purpose: When we compile pictures, we all use file-loader and url-loader. These two loader are looking for the related picture resources in js files, but the files in html will not be searched, so we want to package the pictures in html. At this time, we use html-withimg-loader
Installation


cnpm i html-withimg-loader -D

Configure
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> Home page </title>
</head>
<body>
 <h4> I am a frogman </h4>
 <img src="./src/img/pic.jpg" alt="">
</body>
</html>

webpack.config.js
If the src path for packaging img is [Object Module], the solutions are

Demote file-loader to 4.2. 0 Modify options parameter esModule to 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

Purpose: Used to compile. vue file, if we build our own vue project can use vue-loader, the following simple understanding of 1, here will not be repeated.
Installation


cnpm i vue-loader@15.7.0 vue vue-template-compiler -D
vue-loader is used to identify. vue files vue Needless to say, recognition supports vue syntax vue-template-compiler Syntax Template Rendering Engine {{}} template, script, style

Configure
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  Frogman "
 }
 },
 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

Purpose: Used to check whether the code conforms to the specification and whether there are syntax errors.
Installation


cnpm i eslint-loader eslint -D

Configure
index.ts


var abc:any = 123;
console.log(abc)

.eslintrc.js
Here are some simple rules to write


module.exports = {
 root: true, 
 env: {
  browser: true,
 },
 rules: {
  "no-alert": 0, //  Prohibit use alert
  "indent": [2, 4], //  Indent style 
  "no-unused-vars": "error" //  Variable declarations must be made using the 
 }
}

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/
   }
  ]
 }
}

Summarize


Related articles: