Share a summary of Loader of commonly used in 12 Webpack
- 2021-11-01 23:15:41
- OfStack
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
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/
}
]
}
}