Webpack Css

2024年08月05日

柏拉文

越努力，越幸运

一、认识

基于 Webpack, 我们支持 Css 以及 Scss、Less 等预处理器。配置策略如下:

1. 插入/或者分离 Css 文件: 为了提高开发效率，Webpack 在开发模式下会启用热重载（Hot Module Replacement）和快速构建，CSS 会通过 style-loader 注入到页面中，而不是单独提取成文件，这样可以避免每次修改都重新加载整个 CSS 文件。在生产环境下，为了提升性能和缓存效果，CSS 会被提取成独立的文件，使用 MiniCssExtractPlugin 插件来实现。可以减小主产物体积, 也可以可以避免重复加载 CSS，提高页面的加载速度

2. 处理 Css 文件: 通过 css-loader 处理 Css 文件, 使其可以在JS中被引用和加载。并针对 *.module.css 的文件设置 modules: true / modules: { xx: 配置} 配置 Css Modules, 开启 CSS 样式模块化、局部化，解决了全局样式冲突的问题。

3. 优化、兼容、转换 Css: 通过 postcss-loader 优化、转换、兼容 Css。通过 Autoprefixer 插件自动为 CSS 添加浏览器前缀，保证不同浏览器的兼容性。postcss-preset-env：允许你使用未来的 CSS 特性，比如 CSS 自定义属性、嵌套等，并将其转换为当前浏览器可以理解的 CSS。

4. Sass、Less 预处理 Css: 使用 sass-loader、less-loader 来预处理 .scss 和 .less 文件, 使其转换为 .css 文件。

二、准备

安装相关依赖如下

# Css 相关依赖 
pnpm add css-loader style-loader sass-loader sass less less-loader postcss-loader mini-css-extract-plugin postcss-preset-env autoprefixer -D

# React 相关依赖 
pnpm add react react-dom -D

# Webpack 相关依赖 
pnpm add cross-env webpack webpack-cli webpack-merge html-webpack-plugin -D 

# Typescript 相关依赖 
pnpm add @swc/cli @swc/core typescript swc-loader @types/react @types/react-dom -D

三、配置

3.1 definitions

definitions/style.d.ts

declare module "*.css" {
  const content: { [className: string]: string };
  export default content;
}

declare module "*.scss" {
  const content: { [className: string]: string };
  export default content;
}

declare module "*.less" {
  const content: { [className: string]: string };
  export default content;
}

declare module "*.module.css" {
  const content: { [className: string]: string };
  export default content;
}

declare module "*.module.scss" {
  const content: { [className: string]: string };
  export default content;
}

declare module "*.module.less" {
  const content: { [className: string]: string };
  export default content;
}

3.2 package.json

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config ./webpack.config.js",
}

3.3 typescript.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*", "definitions/**/*"],
  "exclude": ["node_modules", "dist"]
}

3.4 webpack.config.js

const Path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const devMode = process.env.NODE_ENV !== "production";

const cssLoader = (modules = false) => {
  return [
    devMode ? "style-loader" : MiniCssExtractPlugin.loader,
    {
      loader: "css-loader",
      options: {
        modules: modules
          ? {
              namedExport: false,
            }
          : false,
      },
    },
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: ["autoprefixer", ["postcss-preset-env", {}]],
        },
      },
    },
  ];
};

const sassLoader = (modules = false) => [...cssLoader(modules), "sass-loader"];
const lessLoader = (modules = false) => [...cssLoader(modules), "less-loader"];

const cssRules = [
  {
    test: /\.css$/,
    exclude: /\.module\.css$/,
    use: cssLoader(),
  },
  {
    test: /\.module\.css$/,
    use: cssLoader(true),
  },
];

const sassRules = [
  {
    test: /\.(sa|sc)ss$/,
    exclude: /\.module\.(sa|sc)ss$/,
    use: sassLoader(),
  },
  {
    test: /\.module\.(sa|sc)ss$/,
    use: sassLoader(true),
  },
];

const lessRules = [
  {
    test: /\.less$/,
    exclude: /\.module\.less$/,
    use: lessLoader(),
  },
  {
    test: /\.module\.less$/,
    use: lessLoader(true),
  },
];

module.exports = {
  entry: {
    main: Path.resolve(process.cwd(), "src/index.tsx"),
  },
  output: {
    clean: true,
    path: Path.resolve(process.cwd(), "dist"),
    filename: devMode ? "[name]/[name].js" : "[name]/[name].[contenthash:8].js",
    chunkFilename: devMode
      ? "[name]/[name].js"
      : "[name]/[name].[contenthash:8].js",
  },
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
    alias: {
      "@": Path.resolve(__dirname, "../", "src"),
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "swc-loader",
          options: {
            jsc: {
              parser: {
                syntax: "typescript",
                tsx: true,
                dynamicImport: true,
              },
              transform: {
                react: {
                  runtime: "automatic",
                },
              },
            },
          },
        },
      },
      {
        type: "asset",
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        parser: {
          dataUrlCondition: {
            maxSize: 1 * 1024,
          },
        },
        generator: {
          filename: "images/[name].[hash:8].[ext]",
        },
      },
      {
        type: "asset",
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        parser: {
          dataUrlCondition: {
            maxSize: 1 * 1024,
          },
        },
        generator: {
          filename: "fonts/[name].[hash:8].[ext]",
        },
      },
      ...cssRules,
      ...sassRules,
      ...lessRules,
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: Path.resolve(process.cwd(), "public", `index.html`),
    }),
    ...(devMode
      ? []
      : [
          new MiniCssExtractPlugin({
            filename: "[name]/[name].[contenthash:8].css",
            chunkFilename: "[name]/[name].[contenthash:8].css",
          }),
        ]),
  ],
};

一、认识​

二、准备​

三、配置​

3.1 definitions​

3.2 package.json​

3.3 typescript.json​

3.4 webpack.config.js​