webpack学习笔记（六）loader加载器-优快云博客

本文介绍Webpack如何通过加载器解析不同类型的文件，包括CSS、LESS等样式文件及CSV、XML等数据文件，并利用插件实现CSS的抽离与压缩。

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

webpack只能理解js和json文件，这是webpack开箱可用的自带的能力，
loader可以让webpack解析其他类型的文件，并且将这些文件转化为有效的模块以供应用程序使用。

除了上一小节（五）的4中资源模块，我们可以使用loader来引入其他类型的文件。
可以通过style-loader css-loader 让webpack加载css资源，并且把css代码放在html页面的head里
也可以使用less-loader sass-loader stylus-loader来引入css预加载工具

当碰到通过require或者是import去引入一个txt文件时，在对这个文件进行打包之前，先使用raw-loader转化一下

module:{
	rules:[{
		test:/\.txt$/,		//哪些文件被转化
		use:'raw-loader'	//使用哪一个loader进行转换
	}],
},

安装npm install sytle-loader --save--dev
安装npm install css-loader --save--dev
安装npm install ;ess-loader less --save--dev

{
                test:/\.(css|less)$/,
                // 从后往前使用,第一个loader【css-loader】的结果会传递给下一个loader【style-loader】
                use: ['style-loader','css-loader','less-loader']
            }

加载后的样式会在head标签里，添加一个style标签，引入一个文件就添加一个style

抽离和压缩CSS
通过两个插件来进行抽离和压缩
安装npm install mini-css-extract-plugin -D 用于合并css
安装npm install css-minimizer-webpack-plugin -D 用于压缩css

webpack.config.js配置

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'app.html',
            inject:'body',
        }),
        // 引入的是对象需要实例化
        new MiniCssExtractPlugin({
        	// 导出的文件名
            filename:'styles/[contenthash].css'
        }),
    ],
 module:{
        rules:[
        	{
                test:/\.(css|less)$/,
                // 从后往前使用,第一个loader【css-loader】的结果会传递给下一个loader【style-loader】
                use: [MiniCssExtractPlugin.loader,'css-loader','less-loader']
            }
        ]
    },

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
optimization:{
        minimizer:[
            new CssMinimizerPlugin(),
        ]
    },

未被压缩前的打包的css文件

/*!********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/style.css ***!
  \********************************************************************************************************/
.hello {
  color: blueviolet;
}

/*!*********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/style.less ***!
  \*********************************************************************************************************/
body {
  background-color: #f9efd4;
}


/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLzc2ZGM0N2E5NjUxNDViZWM5OTJiLmNzcyIsIm1hcHBpbmdzIjoiOzs7QUFBQTtFQUNJO0FBQ0o7Ozs7O0FDREE7RUFDSTtBQUFKIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vd2VicGFjay10ZXN0Ly4vc3JjL3N0eWxlLmNzcyIsIndlYnBhY2s6Ly93ZWJwYWNrLXRlc3QvLi9zcmMvc3R5bGUubGVzcyJdLCJzb3VyY2VzQ29udGVudCI6WyIuaGVsbG8ge1xuICAgIGNvbG9yOmJsdWV2aW9sZXQ7XG59IiwiQGNvbG9yOiAjZjllZmQ0O1xuYm9keSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogQGNvbG9yO1xufSJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==*/

压缩后

.hello{color:#8a2be2}body{background-color:#f9efd4}
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLzI1NzkzZjg3NzdlMjA3ZmU2Mzc5LmNzcyIsIm1hcHBpbmdzIjoiQUFBQSxPQUNJLGFBQ0osQ0NEQSxLQUNJLHdCQUFKIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vd2VicGFjay10ZXN0Ly4vc3JjL3N0eWxlLmNzcyIsIndlYnBhY2s6Ly93ZWJwYWNrLXRlc3QvLi9zcmMvc3R5bGUubGVzcyJdLCJzb3VyY2VzQ29udGVudCI6WyIuaGVsbG8ge1xuICAgIGNvbG9yOmJsdWV2aW9sZXQ7XG59IiwiQGNvbG9yOiAjZjllZmQ0O1xuYm9keSB7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogQGNvbG9yO1xufSJdLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIifQ==*/

webpack还可以加载CSV、TSV、SML。需要导入对应的加载器
安装csv-loader xml-loader

			{
                test:/\.(csv|tsv)$/i,
                use:'csv-loader',
            },
            {
                test:/\.xml$/i,
                use:'xml-loader',
            }

import Data from './assets/data.xml'
import Notes from './assets/data.csv'

console.log("Data",Data);   // Object对象
console.log("Notes",Notes);     // Array数组

在这里插入图片描述
自定义JSON模块parser
toml yaml json5
安装npm install json5 -D

const json5 = require('json5')
{
                test:/\.json5/,
                type:'json',
                parser:{
                    parse:json5.parse,
                }
            }

import json5 from './assets/data.json5'

label-loader
安装npm install -D babel-loader @babel/core @babel/preset-env

babel-loader:在webpack里应用babel解析ES6的桥梁
@babel/core：babel核心模块
@babel/preset-env:babel预设，一组babel插件的集合

{
                test:/\.js$/,
                // 全局node modules里的js不需要转换
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env'],
                        plugins:[
                        	[
                        		'@babel/plugin-tansform-runtime'
                        	]
                        ]
                    },
                },
            }

regeneratorRuntime是webpack打包生成的全局辅助函数，由babel生成，用于兼容async/await的语法。

安装npm install @babel/runtime -D npm install @babel/Plugin-transform-runtime

webpack天生可以自带加载js模块的功能，但他只能做js模块化的打包,并不能转化js里的代码，比如将ES6转化成ES5，有时候代码能够正常运行，是依靠浏览器来解析，如果浏览器版本降低，运行时可能会发生错误，因此需要babel来进行转化。
babel和webpack结合就需要一个babel-loader，安装好babel相关包，就可以让webpack解析js文件时，去使用babel-loader来对js转化一下