Webpack:Loader学习——功能loader,style-loader(动态创建 style 标签，插入 js 中的样式代码，使样式生效)

动态创建 style 标签，插入 js 中的样式代码，使样式生效。

1、动态创建style标签

2、传递过来的数据转换成字符串 

3、插入到页面中

module.exports = function (content) {

  const script = `
    const styleEl = document.createElement('style');
    styleEl.innerHTML = ${JSON.stringify(content)};
    document.head.appendChild(styleEl);
  `;
  return script;
};

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

运行，生效了 但是没有显示 原因在于图片资源无法处理 

直接使用style-loader，只能处理样式、不能处理样式中引入的其他资源

---

所以必须使用css loader 借助css-loader解决样式中引入的其他资源的问题(解决依赖)

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

此时，style-loader接收css-loader的返回值。css-loader暴露了一段js代码，style-loader需要执行js代码，得到返回值，再动态创建style标签，插入到页面上——不好操作

---

 使用picth方法（可以接收3个参数 但是目前先使用一个参数remainingRequest 剩下还需要处理的loader）——得到css-loader处理的结果

picth方法 return webpack 会跳过后面所有的的 pitch 和 loader，直接进入上一个 loader 。(cssloader不可以省略 因为使用到了)

module.exports = function (content) {

};

module.exports.pitch = function (remainingRequest) {
  //remainingRequest 剩下还需要处理的loader
  //E:\ECMAScript6-11\webpack_loader\node_modules\css-loader\dist\cjs.js
  //!E:\ECMAScript6-11\webpack_loader\src\css\index.css
  console.log(remainingRequest); //css-loader(还没有工作的)!(和loader分开)处理样式资源的路径

  // 1. 将 remainingRequest 中绝对路径改成相对路径（因为后面只能使用相对路径操作）
  const relativePath = remainingRequest
    .split("!")
    .map((absolutePath) => {//absolutePath数组中的每一个对象
      // 返回相对路径 this指向loader this.context相对当前目录
      return this.utils.contextify(this.context, absolutePath);
    })
    .join("!");
// ../../node_modules/css-loader/dist/cjs.js!./index.css
  console.log(relativePath); 

  // 2. 引入css-loader处理后的资源  import style from "!!${relativePath}";
  //  !!代表禁用所有配置的loader，只使用inline loader。
  // 3. 创建style，将内容插入页面中生效
  const script = `
    import style from "!!${relativePath}";
    const styleEl = document.createElement('style');
    styleEl.innerHTML = style;
    document.head.appendChild(styleEl);
  `;

  // 中止后面loader执行
  return script;
};

配置

const path = require("path");
//处理html
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/main.js",//根据找到依赖
  output: {
    path: path.resolve(__dirname, "./dist"),
    filename: "js/[name].js",// filename: 输出文件名
    clean: true,
  },
  module: {//编译记载配置
    rules: [
      //   {
      //   test: /\.js$/,//处理js文件
      //   loader: "./loaders/test-loader.js",//将要处理文件作为参数传到test-loader.js
      // },
      {
        test: /\.js$/,//处理js文件
        // use: ["./loaders/demo/test1","./loaders/demo/test2"],
          // loader: "./loaders/demo/test3",
          // use: ["./loaders/demo/test4","./loaders/demo/test5","./loaders/demo/test6"],
           loader: "./loaders/clean-log-loader",
      },
      {
        test: /\.js$/,//处理js文件
           loader: "./loaders/banner-loader/index.js",
           options:{
              author:"老王",
              // age:"34"
           }
      },
      {
        test: /\.js$/,
        loader: "./loaders/babel-loader",
        options: {
          presets: ["@babel/preset-env"],//传入的预设选项@babel/preset-env
        },
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loader: "./loaders/file-loader",
        type: "javascript/auto", // 阻止webpack默认处理图片资源，只使用file-loader处理
      },
      {
        test: /\.css$/,
        // use: ["style-loader", "css-loader"],
        use: ["./loaders/style-loader","css-loader"],
      },

    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  
  mode: "development",
};