webpack常用配置整理（Loaders&Plugins）

最新推荐文章于 2024-08-21 08:23:02 发布

Tempta36

最新推荐文章于 2024-08-21 08:23:02 发布

阅读量554

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/Tempta36/article/details/104685314

版权

本文详细介绍了Webpack的Loader配置，包括图片、字体和样式文件的处理。同时，探讨了Plugin的使用，如文件压缩、CSS提取、自动生成Index.html、清理文件夹、复制文件等，为优化构建过程提供了实用技巧。

摘要由CSDN通过智能技术生成

Loader

1. 图片处理

url-loader
将图片转换为base64 URI

{
   
	module:{
   
		rules: [
			{
   
				test: /\.(png|svg|jpg|gif)$/,
				use:[{
   
					loader:"url-loader",
					options:{
   
						limit: 5000,
              			outputPath: "images/",
              			name: "[name]-[hash:4].[ext]",
              			fallback: "file-loader"
					}
				}]
			}
		]
	}
}

fallback
指定当目标文件的大小超过limit选项中设置的限制时要使用的替代加载程序。
limit
最大文件大小，单位bytes

2. 自定义字体处理

file-loader
处理使用import('url')、require('url')引入的文件，将引入的文件输出至output目录

{
   
	module:{
   
		rules: [
			{
   
				test: /\.(woff|woff2|eot|ttf|otf)$/,
    			use: [
    				{
   
        				loader: "file-loader",
            			options: {
   
            				name: "[name]-[hash:4].[ext]",
                			outputPath: "fonts"
            			}
        			}
    			]
			}
		]
	}
}

name
输出的文件名

name: '[name].[ext]'     //logo.png
name: '[hash].[ext]'      //3a9d7b3c4c00d76d9596a0194300cb94.png
name: '[hash:4].[ext]'      //3a9d.png
name: '[name]-[hase:4].[ext]'    //logo-3a9d.png

outputPath
输出路径
outputPath: './images/'
以output为相对路径。eg./dist/images/logo.png

3. 样式文件处理

{
   
	module:{
   
		rules: [
			{
   
        		test: /\.(scss|sass)$/,
        		use: ["style-loader", "css-loader", "sass-loader"]
      		}
		]
	}
}