webpack4基础 -- css处理和 scss 懒加载

demo: 仓库地址https://github.com/weixiaoshiaishang/zfpx/tree/master/webpack

概要：

1. 将 css 通过 link 标签引入
2. 将 css 放在 style 标签里
3. 动态卸载和加载 css
4. 页面加载 css 前的transform

1、使用style-loader 区别

link方式

module: {
    rules: [
      {
        test: /\.css$/, // 针对CSS结尾的文件设置LOADER
        use: [
          {
            loader: "style-loader/url"  // css将会以 link css的方式引入
          },
          {
            loader: "file-loader"
          }
        ]
      }
    ]
  }
};

module: {
    rules: [
      {
        test: /\.css$/, // 针对CSS结尾的文件设置LOADER
        use: [
          {
            loader: "style-loader"  // css将会以 style 内嵌的方式 css的方式引入
          },
          {
            loader: "file-loader"
          }
        ]
      }
    ]
  }
};复制代码

style方式，但是需要注意老是浏览器中 style有个数限制

{
   test: /\.css$/, // 针对CSS结尾的文件设置LOADER
   use: [
        {
            loader: "style-loader",
            options: {
              singleton: true // 处理为单个style标签
            }
          }
   ]
}复制代码

2、动态卸载和加载CSS

style-loader为 css 对象提供了use()和unuse()两种方法，借助这两种方法，可以方便快捷地加载和卸载 css 样式

// webpack中
module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader/useable" // 注意此处的style-loader后面的 useable
          },
          {
            loader: "css-loader"
          }
        ]
      }
    ]
  }
};// js处理
import base from "./css/base.css"; // import cssObj from '...'
var flag = false;
setInterval(function() {
  // unuse和use 是 cssObj上的方法
  if (flag) {
    base.unuse();
  } else {
    base.use();
  }
  flag = !flag;
}, 500);
复制代码

3、页面加载css前的transform

对于css的transform，简单来说：在加载 css 样式前，可以更改 css。这样，方便开发者根据业务需要，对 css 进行相关处理。

// style-loader增加options.transform属性，值为指定的 js 文件复制代码

// webpack配置
module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader",
            options: {
              transform: "./css.transform.js" // transform 文件
            }
          },
          {
            loader: "css-loader"
          }
        ]
      }
    ]
  }
};

// css.transform.js，这个文件导出一个函数，传入的参数就是 css 字符串本身。
module.exports = function(css) {
  console.log(css); // 查看css
  return window.innerWidth < 1000 ? css.replace("red", "green") : css; // 如果屏幕宽度 < 1000, 替换背景颜色
};
复制代码

二、scss懒加载

webpack v4中的 SCSS 提取和懒加载。值得一提的是，v4和v3在 Scss 的懒加载上的处理方法有着巨大差别。

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/",
    path: path.resolve(__dirname, "dist"),
    filename: "[name].bundle.js",
    chunkFilename: "[name].chunk.js"
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          // callback配置项，针对 不提取为单独css文件的scss样式 应该使用的 LOADER。即使用style-loader将 scss 处理成 css 嵌入网页代码
          fallback: {
            loader: "style-loader"
          },
          use: [
            {
              loader: "css-loader",
              options: {
                minimize: true
              }
            },
            {
              loader: "sass-loader"
            }
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      filename: "[name].min.css",
      allChunks: false // allChunks必须指明为false。否则会包括异步加载的 CSS！
    })
  ]
};复制代码

在项目入口文件app.js中，针对 scss 懒加载，需要引入以下配置代码：

/**webpack4: 针对scss的懒加载, 需要以下代码 */import "style-loader/lib/addStyles";import "css-loader/lib/css-base";/**************************************** */
import "./scss/base.scss";
var loaded = false;window.addEventListener("click", function() {    if (!loaded) {        import ( /* webpackChunkName: 'style'*/ "./scss/common.scss").then(_ => {            console.log("Change bg-color of html");            loaded = true;        });    }});复制代码

转载于:https://juejin.im/post/5c39f15551882525e90dcf62