NodeJs学习笔记 - webpack 加载器

灰太狼 2023-02-09 14:16 8阅读 0赞

### NodeJs学习笔记 - webpack 加载器 ###

*  webpack打包文件时会判断流程
 *  安装 loader
 *   *  1. css 加载器
     *  2. less 加载器
     *  3. sass 加载器
     *  4. postCSS 加载器
     *  5. url 加载器
     *  6. js 高级语法 babel
 *  参考资料

# webpack打包文件时会判断流程 #

if (是否js) { 
    	if (是否含高级js语法) { 
    		if (是否配置了 babel) { 
    			调用 loader 处理
    		}else{ 
    			报错
    		}
    	}else{ 
    		webpack 处理
    	}
    }else if (是否配置了对应的 loader){ 
    	调用对应的 loader 处理
    }else{ 
    	报错
    }

# 安装 loader #

统一流程：

1.  安装处理 xxx 加载器
2.  webpack.config.js 》 module.rules 中添加载器匹配规则  
    `test:`匹配的文件类型  
    `use:` 对应的加载器`(顺序固定，从后向前逐个调用)`多个时用数组，单个时可以用字符串

module.exports = { 
    	...
    	module:{ 
    		rules: [
    			{  test: /\.扩展名1$/, use: ['加载器3', '加载器2', '加载器1'] },
    			{  test: /\.扩展名2$/, use: ['加载器3', '加载器2', '加载器1'] },
    			... 所有的加载器都配到这个数组里 ...
    		]
    	}
    	...
    };

## 1. css 加载器 ##

安装处理 sass 加载器。再添匹配规则。

npm i style-loader css-loader -D

{  test: /\.css$/, use: ['style-loder', 'css-loader'] }

## 2. less 加载器 ##

安装处理 sass 加载器。再添匹配规则。安装处理 less 加载器

npm i less-loader less -D

{  test: /\.less$/, use: ['style-loder', 'css-loader', 'less-loader'] }

## 3. sass 加载器 ##

安装处理 sass 加载器。再添匹配规则。

npm i sass-loader node-sass -D

{  test: /\.scss$/, use: ['style-loder', 'css-loader', 'sass-loader'] }