webpack5大常用loader

官网

一，打包图片文件

1file-loader

npm install --save-dev file-loader

默认情况下，生成的文件的文件名就是文件内容的 MD5 哈希值并会保留所引用资源的原始扩展名。

import img from './file.png'
webpack.config.js

module.exports = {
  module: {
    rules: [
      {
				test: /\.(png|jpg|gif|jpeg|png|svg)$/,
				use: [{
					loader: 'file-loader',
					options: {
						name: '[path][name].[ext]',//图片名成
						publicPath: 'assets/img/'//路径
					}
				}]
			}
    ]
  }
}

生成文件 file.png，输出到输出目录并返回 public URL。

"/public/path/0dcbbaa7013869e351f.png"

2.url-loader

npm install --save-dev url-loader

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。

import img from './image.png'
webpack.config.js

module.exports = {
  module: {
    rules: [
     {
				test: /\.(png|jpg|gif|jpeg|png|svg)$/,
				use: [{
					loader: 'file-loader',
					options: {
						limit: 8192,
						name: '[path][name].[ext]',//图片名成
						publicPath: 'assets/img/'//路径
					}
				}]
			}
    ]
  }
}

3.css打包

1.css-loader

npm install --save-dev css-loader

2.style-loader

npm install style-loader --save-dev

建议将 style-loader 与 css-loader 结合使用

import style from './file.css'

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

}

4.打包stylus文件

CSS 预处理，顾名思义，预先处理 CSS。那 stylus 咋预先处理呢？stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成 CSS 文件。

安装styles-loder

npm install -D stylus stylus-loader

stylus：是stylus的文件预处理程序，作用是将stylus编译成css格式
stylus -loader：加载stylus的文件，调用stylus程序形成css文件

配置webpackconfig

{
				test:/\.styl(us)?$/,
				use: [{
						loader: "style-loader"
					},
					{
						loader: "css-loader"
					},
					{
						loader: "styles-loader"
					}
				]
				
			}

创建stylus文件 ，gloab.styl

body
//背景图
	background-image: url('../imgs/4k动漫壁纸_彼岸图网.jpg')
	//背景图位置固定
	background-attachment: fixed
	//背景图片不重复
	background-repeat:no-repeat
	//背景位置居中
	background-position :center center
	//背景覆盖整个viewport
	background-size :cover
	//当背景没有加载时的颜色
	background-color: #00FFFF

使用

import './assets/style/global.styl'

注意：index.html在dist目录下

在vue中使用stylus

scoped：在当前组件样式生效