demo: 仓库地址https://github.com/weixiaoshiaishang/zfpx/tree/master/webpack
概要：
- 将 css 通过 link 标签引入
- 将 css 放在 style 标签里
- 动态卸载和加载 css
- 页面加载 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; }); }});复制代码