程序员经验分享-hwhale

webpack: 4 loader汇总(style-loader等)

2023-05-16

所有的loader必须匹配规则，否则不生效
配置文件中，module中rules的use执行顺序是从后往前执行

url-loader

用于将文件转换为base64 URI的webpack加载程序。

options

limit limit指定文件大小，小于limit的图片不会生成图片以base64格式被引入，大于limit的图片将以url加载

在这里插入图片描述示例

/src/index.js

import '/src/css/image.css'
let img = require('/src/imgs/2.png')
// import img from '/src/imgs/2.png'

let dom = document.createElement('div')
dom.className = 'img1'

document.body.appendChild(dom)

/src/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 40
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', {
          loader: 'css-loader',
          options: {
            esModule: false // css-loader遇到url会按照require进行导入,而require默认返回包裹default的esmodule
          }
        }]
      }
    ],
  }
}

/src/css/image.css

.img1 {
  width: 200px;
  height: 200px;
  background: url(../imgs/1.png);
}

/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>Document</title>
</head>
<body>
  <script src="./dist/main.js"></script>
</body>
</html>

file-loader

将文件的import/require（）解析为url，并将文件发送到输出目录

1） options
name 根据查询参数指定模板文件名模板
outputPath 指定模板文件的路径
publicPath 指定模板文件的公共路径
postTransformPublicPath 对生成的公共路径进行后期处理的自定义函数

2）Placeholders

文件规则

示例
1. img标签的src引入图片
1.1 import引入
/src/index.js

import img from '/src/imgs/1.png';  

let dom = document.createElement('img')
dom.src = img

document.body.appendChild(dom)

/src/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>Document</title>
</head>
<body>
  <script src="./dist/main.js"></script>
</body>
</html>

/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          }
        ]
      },
    ],
  }
}

webpack命令执行后可以正常打包并查看效果
1.2 require导入

在webpack5及之后版本，结合file-loader，file-loader返回的是对象， 里面的default才是我们需要的资源
/src/index.js

// import img from '/src/imgs/1.png';
let img = require('/src/imgs/2.png').default // 在file-loader高版本的返回值

let dom = document.createElement('img')
dom.src = img

document.body.appendChild(dom)

或者在webpack.config.js中配置
/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false // 配置项
            }
          }
        ]
      },
    ],
  }
}

2. background背景图片引入
/src/index.js

import '/src/css/image.css'
let img = require('/src/imgs/2.png')

let dom = document.createElement('div')
dom.className = 'img1'

document.body.appendChild(dom)

/webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              esModule: false
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', {
          loader: 'css-loader',
          options: {
            esModule: false // css-loader遇到url会按照require进行导入,而require默认返回包裹default的esmodule
          }
        }]
      }
    ],
  }
}

/src/css/image.css

.img1 {
  width: 200px;
  height: 200px;
  background: url(../imgs/1.png);
}

/src/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>Document</title>
</head>
<body>
  <script src="./dist/main.js"></script>
</body>
</html>

babel-loader

babel-loader官网

这个包允许使用Babel和webpack转换JavaScript文件

安装和使用

Options选项

同babel插件一样，见babel官网
额外的配置选项
cacheDirectory 默认为false,未来的webpack构建将尝试从缓存中读取，以避免每次运行时都需要运行可能代价高昂的Babel重新编译过程
cacheIdentifier 默认值是由@babel/core的版本、babel加载程序的版本、内容组成的字符串。babelrc文件（如果存在），以及环境变量BABEL_ENV的值，该变量具有节点_ENV环境变量的回退。可以将其设置为自定义值，以便在标识符更改时强制销毁缓存。
cacheCompression 默认为true。设置后，每个babel变换输出都将用Gzip压缩。如果您想退出缓存压缩，请将其设置为false——如果您的项目可以传输数千个文件，那么它可能会从中受益。
customize 导出自定义回调的模块的路径，就像您要传递给的回调一样
metadataSubscribers 默认值[]。获取上下文函数名数组。例如，如果你传递了[‘myMetadataPlugin’]，你会给上下文分配一个subscribes函数。myMetadataPlugin在你的网页插件的钩子中&这个函数将被元数据调用。

测试

对语法做兼容性处理

let b = () => {} // 如果指定浏览器版本会发现没有被转换，如chrome 91

function func (b = false) {return false}

// class Person {
// }

//let post = async () => {
//}
//await post()

//let obj  = {a:1,b:2}
//console.log(...obj)

babel-loader的使用

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
          // 配置选项去走babel.config.json配置文件
        }
      }
    ]
  }
}

// babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}

postcss和postcss-loader

A tool for transforming CSS with JavaScript 通过js转换css的工具

https://postcss.org/

npm i postcss-cli -D // 安装依赖

1） 开始sample

 npm i -D postcss
 npm i postcss-cli@8.3.0 -D 
 // postcss *.css -o res.css   test.css       // 这个不会有变化
 npx postcss *.css --use autoprefixer -d build/    // 这个得到兼容的代码

2） 结合webpack使用

module.exports = {
module: {
        rules: [
	            {
	                test: /\.css$/,
	                use: ['style-loader', 'css-loader',{
	                    loader: 'postcss-loader',
	                    options: {
	                        postcssOptions: {
	                            plugins: [
	                            // require('autoprefixer'),
	                            'postcss-preset-env' // 这是个工具包集合，包括autoprefixer
	                        ]
	                        }
	                    }
	                }]
	            }
	        ]
	    }
 }

示例
示例样式
//src/css/image.css

@import url('./2.css');

i {
  width: 200px;
  height: 200px;
  background: linear-gradient(red, black);
}

::placeholder { // 需要加前缀(兼容后会添加浏览器厂商前缀)
  color: gray;
}

/ src/css/2.css

i {
  color: #33333315; // 需要兼容性处理 (兼容处理后得到rgba形式了)
}

/postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('postcss-preset-env')
  ]
}

/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>Document</title>
</head>
<body>
  <script src="./dist/main.js"></script>
</body>
</html>

style-loader 多个文件导入loader处理

// 文件base.css
@import './base.css';

// 文件login.css
.title {
    color: red;
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

module.exports = {
    entry: './src/index.js',
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1 // 工作时找到其其它css，让前1个的loader取处理
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [
                                // require('autoprefixer'),
                                'postcss-preset-env' // 这是个工具包集合，包括autoprefixer
                            ]
                        }
                    }
                }]
            }
        ]
    }
  };

分析

module中rules的use执行顺序是从后往前执行
处理base.css：

  1. postcss-loader通过postcss-preset-env插件对base.css进行加前缀等兼容处理
  2. 执行css-loader发现@import引入的文件，importLoaders: 1交给前面一个loader（postcss-loader）处理
    // css-loader可以处理 import / require的文件， 得到样式的数组
  3. style-loader 将样式处理得到style标签

filer-loader处理import/require引入的图片

import importImg from '../assets/xx.png' // import导入

function packageImage() {
    // let img = require('../assets/xx.png').default // require导入
    return `
    <img src="${importImg}" />
    `
}

document.body.innerHTML += packageImage();

  module.exports =  {
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: {
                    loader: 'file-loader',
                    options: {
                        esModule: false // 不转为esModule
                    }
                }
            }
        ]
    }
  }

file-loader 处理 css中background-image引入的图片, 并自定义打包后的名称及存放路径

// /src/css/image.css
.bg {
    background-image: url(../assets/xx.png);
    background-size: cover;
    width: 200px;
    height: 400px;
}

// /src/js/login.js
import '../css/login.css'

function login() {
    return `
    <div class="title">login-title</div>
    `
}

document.body.innerHTML += login();

  module.exports =  {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 1, // 工作时找到其其它css，让前1个的loader取处理
                        esModule: false
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: {
                        postcssOptions: {
                            plugins: [
                                // require('autoprefixer'),
                                'postcss-preset-env' // 这是个工具包集合，包括autoprefixer
                            ]
                        }
                    }
                }
                
            ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: {
                    loader: 'file-loader',
                    options: {
                        esModule: false, // 不转为esModule
                        name: '[name].[hash:6].[ext]', // 保留原文件名name，加上6位文件hash，ext后缀
outputPath: 'img' // 存放路径
                    }
                }
            }
        ]
    }
  }

raw-loader处理.txt文件

// file.txt
file123

// webpack.config.js
  module.exports =  {
    module: {
        rules: [
            {
                test: /\.txt$/i,
                use: {
                    loader: 'raw-loader',
                    options: {
                        esModule: false
                    }
                }
            }
        ]
    }
  }

url-loader处理图片

      module.exports =  {
        module: {
            rules: [
                {
                    test: /\.(png|jpe?g|gif|svg)$/i,
                    use: 
                    {
                        loader: 'url-loader',
                        options: {
                            esModule: false, // 不转为esModule
                            name: '[name].[hash:6].[ext]', // 保留原文件名name，加上6位文件hash，ext后缀
                            outputPath: 'img', // 存放路径
                            limit: 25 * 1024 // 大于25字节不做处理
                        }
                    }
                }
            ]
        }
      }

less-loader处理less

module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            importLoaders: 1 // 工作时找到其其它css，让前1个的loader取处理
          }
        },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  // require('autoprefixer'),
                  'postcss-preset-env' // 这是个工具包集合，包括autoprefixer
                ]
              }
            }
          },
          "less-loader"
        ]
      }
    ]
  }

​

scss-loader

npm i sass-loader node-sass style-loader css-loader babel-core babel-loader@7 //处理.scss后缀的文件

​​在这里插入图片描述

在这里插入图片描述

​

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

WEBPACK

loader

style

webpack: 4 loader汇总(style-loader等) 的相关文章

随机推荐

热门标签