练习--写一个loader,处理css文件，让webpack解析css语句。

浏览器本身是不能将css导入的(不论是es6/common.js模块化规范)，但是webpack是可以将所有的资源都及逆行打包的。

webpack支持在js文件中将css当作模块导入的处理是有loader的支持。

css-loader可以将css代码转换为js代码，webpack打包完成之后，就会让浏览器执行，实际上浏览器执行的是js代码。

入口文件

/*在这里引入css的话，ES6和common.js都不支持的。
但是在webpack中，我们就不需要管那么多，webpack可以将所有的资源都进行打包。
但是我们需要一个转化css的loader来辅助我们。*/
import styleCode from "./assets/index.css";
console.log(styleCode);

style-loader.js

//将css语句转换为js,然后插入到页面中
module.exports = function (sourceCode) {
  return ` const style = document.createElement("style");
  style.innerHTML = \`${sourceCode}\`;
  document.head.appendChild(style);
  export default \`${sourceCode}\``;
};
//这里return出去之后相当于在index.css中把css代码都变成了js代码。这里使用export default sourceCode就相当于把这个模块的代码导出了。所以在index.js中可以输出。

src/assets/index.css

body{
    background-color: #ccc;
}

webpack.config.js

module.exports = {
  mode: "development",
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["./loaders/style-loader"],
      },
    ],
  },
};