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

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

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

less-loader
将less文件编译为css文件
css-loader
用于解释@import、url()
在js中解析import()、require()
举个栗子。当你 import MyImage from './my-image.png'，该图像将被处理并添加到 output 目录，并且 MyImage 变量将包含该图像在处理后的最终 url。当使用 css-loader 时，如上所示，你的 CSS 中的 url('./my-image.png')会使用类似的过程去处理。loader 会识别这是一个本地文件，并将 ‘./my-image.png’ 路径，替换为输出目录中图像的最终路径。html-loader 以相同的方式处理 <img src="./my-image.png" />
style-loader
通过创建style标签写入css来为DOM添加样式
换言之，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中

Plugin

1. JS、CSS文件压缩

const TerserJSPlugin = require("terser-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");

const config = {
	optimization: {
    	minimizer: [new TerserJSPlugin({
			terserOptions: {
					warnings: false,
					compress: {
						warnings: false,
						// 是否注释掉console
						drop_console: false,
						dead_code: true,
						drop_debugger: true,
					},
					output: {
						comments: false,
						beautify: false,
					},
					mangle: true,
			},
			parallel: true,
			sourceMap: false
		}), new OptimizeCssAssetsPlugin()]
    },
};

module.exports = config;

terser-webpack-plugin
该插件使用terser去压缩js
optimize-css-assets-webpack-plugin
在webpack构建时会寻找css资源并进行优化/压缩。

2. 从JS文件中提取CSS

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== "production";

const config = {
	module: {
    	rules: [
      	{
        	test: /\.(scss|sass)$/,
        	use: [
          		devMode ? "style-loader" : MiniCssExtractPlugin.loader,
         		"css-loader",
          		"sass-loader"
        	]
      	 }
      },
      plugins: [ 
			new MiniCssExtractPlugin({
      			filename: devMode ? "[name].css" : "[name].[hash].css",
      			chunkFilename: devMode ? "[id].css" : "[id].[hash].css"
    		})
	  ]
};
module.exports = config;

mini-css-extract-plugin
该插件将css提取至单独的文件。每一个包含css的js文件都将创建一个css文件。它将通过创建link标签引入提取的css文件。它支持按需加载css和SourceMaps。
官网推荐仅在生产环境下，在loaders链中使用该插件而不是style-loader，尤其是在开发环境中想使用HMR的时候。

3. 通过自定义HTML模板自动构建入口Index.html

const HtmlWebpackPlugin = require("html-webpack-plugin");
const config = {
	plugins: [
    	new HtmlWebpackPlugin({
      		filename: "index.html",
      		template: "index.html",
      		inject: true,
        	hash: false, //开启hash  ?[hash]
        	chunks: chunks,
        	minify: process.env.NODE_ENV === "development" ? false : {
            	removeComments: true, //移除HTML中的注释
            	collapseWhitespace: true, //折叠空白区域 也就是压缩代码
            	removeAttributeQuotes: true, //去除属性引用
        	}
    	})
    ]
};

module.exports = config;

html-webpack-plugin
该插件将为你生成一个 HTML5 文件，其中包括使用 script 标签的 body 中的所有 webpack 包。

inject
true/‘body’:所有的js都将会在body元素的最底部引入
‘head’:所有的js都将会在head元素中引入
hash
true:所有被包含的js和css都将以唯一的哈希值作为文件名引用
minify:控制输出文件是否压缩并以何种方式压缩

3. 清理`/dist`文件夹

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const config = {
	plugins: [
    	new CleanWebpackPlugin()
    ]
};

module.exports = config;

clean-webpack-plugin
在每次构建前清理/dist文件。

4. 复制文件至构建目录

const CopyWebpackPlugin = require("copy-webpack-plugin");
const config = {
	plugins: [
    	new CopyWebpackPlugin([
      		{
        		from: path.join(__dirname, "./src/logo.png"),
        		to: "images/",
        		ignore: ['*.js'],
          		flatten: false,  //仅复制文件。用于文件夹和文件同名时
		    }
    	])
    ]
};

module.exports = config;

copy-webpack-plugin
复制独立的文件或整个目录至构建目录。

5. 消除冗余的css

const path = require('path');
const glob = require("glob");
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PurifyCSSPlugin = require('purifycss-webpack');

const config = {
	module: {
    	rules: [
       		{
        		test: /\.css$/,
        		loader: ExtractTextPlugin.extract({
          		fallbackLoader: 'style-loader',
          		loader: 'css-loader'
        	})
      	 }
     ]
  },
	plugins: [
		new ExtractTextPlugin('[name].[contenthash].css'),
    	new purifyCssWebpack({
            paths: glob.sync(path.join(__dirname, "../src/pages/*/*.html"))
        })
    ]
};

module.exports = config;

***purifycss-webpack***(已弃用)
推荐和'extract-text-webpack-plugin'一起使用
'extract-text-webpack-plugin'
它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。

6.合并定义的webpack配置

const merge = require("webpack-merge");
const webpackConfigBase = require('./webpack.base.conf');
const webpackConfigDev = {...};

module.exports = merge(webpackConfigBase, webpackConfigDev);