【webpack】- 11、loader-2样式处理

1、loader处理样式做了什么

• 把css当作模块处理： es6 和commonjs 只是把js当作模块，但我们希望css 可以用模块化来细分，以及一些别的语言，eg:ts等，这些代码可以交给webpack来进行处理，打包。
• 把scss等转为css:还有一些css的样式如scss，是不能直接运行的，要用loader进行转换

2、手写一个style-loader

• 样式也是要打包的，所以我们把样式写在源代码src文件夹下的assets文件夹–静态资源里：src/assets/...
• 打包的时候根据入口文件 ./src/index.js来打包的，打包时要把样式生成到最终文件，所以css 也要被当作依赖引入：require('./assets/index.css')，但理论上 es6 和commonjs 都不允许我们这样做，但是require('./assets/index.css')这句话不是交给 es6 和commonjs来运行的，而require(’./assets/index.css’)是给webpack看的，webpack 看到require() 就会把require()后面的路径当作依赖，而不会理会文件的内容，–> 然后读取里面的内容，–>然后根据配置里的loader 进行处理，–>根据抽象语法树记录依赖
  
• css 读取出来，必须进行loader进行处理，不然没法进行抽象语法树分析，就找不到依赖
• 然后我们需要写一个loader 来识别.css后缀的文件，当遇到.css后缀的依赖文件，就交给loader，loader返回一个可以识别的js代码，让其可以进行抽象语法树分析，就可以了

// ./loaders/style-loader.jsloaders
// loaders和src同级
module.exports = function(sourceCode){
	//注意：这里的代码，是在laoder处理的过程中运行，并不会出现在最后返回的代码字符串里，所以也不会参与最终运行，最终运行的代码要return
	//下面的\` 是转义，将sourceCode放到字符串里
	return `var style = document.createElement('style');
	style.innerHTML = \`${sourceCode}\`; 
	document.head.appendChild(style);`;
}

loader就是一个函数，用来处理源代码字符串，然后返回处理后的代码字符串

例如：sourceCode如下：

 /* ./assets/index.css 中的内容*/ 
body{
    background: #333;
    color: #fff; 
} 

经loader转换后把css文件内容 变成了如下一段js代码

var style = document.createElement('style');
style.innerHTML =`body{
    background: #333;
    color: #fff; 
}`;
document.head.appendChild(style); 

当require()的时候，就直接运行了上面的js代码

• 有了loader后，需要在webpack.config.js中配置模块解析规则

module.exports = {
	mode:'development',
	devtool:'source-map',
	module:{
		rules:[{
			test:/\.css$/,
			use:['./loaders/style-loader'] //自己写的loader用相对路径
		}]
	}
}

这样配置后就不会报错了

---

3、得到css的源码字符串

var content = require('./assets/index.css');
console.log(content);    //得到css文件的源码字符串

上面用require()得到模块化的内容，只需要直接导出就可以了

// ./loaders/style-loader.jsloaders
module.exports = function(sourceCode){
	return `
	var style = document.createElement('style');
	style.innerHTML = \`${sourceCode}\`; 
	document.head.appendChild(style);
	module.exports = \`${sourceCode}\`;
	 `;
}

过程是：webpack通过require()找到依赖的模块
–》 读取css文件的内容 --》 然后根据webpack.config.js中配置的规则 进行loader解析 --》 loader解析 返回一段js代码 --》 require()这段代码，js代码运行 --》导出源码，赋值给content
这样就可以打印出源码了

总结：loader就是把一种代码格式字符串，返回另一种代码格式字符串