从零搭一个极简版webpack+React工程(三)

3,689 阅读2分钟

前言

从零搭一个极简版 webpack+React 工程(二)

书接上文,作者的 study-webpack 工程已经可以使用 React 和 Typescript 了。前端不只是有 js 还有 css。本篇文章将讲述 webpack 如何处理 css

文件地址

GitHub 地址

支持 css

安装依赖包


npm i style-loader css-loader -D

  • css-loader:js 中导入了 css,那么就需要使用 css-loader 来识别这个模块,通过特定的语法规则进行转换内容最后导出。3
  • style-loader: 是通过一个 JS 脚本创建一个 style 标签,里面包含一些样式。style-loader 是不能单独使用的,应为它并不负责解析 css 之前的依赖关系,每个 loader 的功能都是单一的,各自拆分独立。3

修改 webpack.common.js

 module: {
    rules: [
      {
        // other
      },
      {
        test: /\.(css)$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

修改 src/Home.jsx

import React from "react"

import "./Home.css"
type Props = {}

export default function Home({}: Props) {
  return <div className="box">我是typescript</div>
}

因为 src/Home.jsx 引入了 Home.css,所以在根目录新建 Home.css 文件

新建 Home.css

.box {
  color: red;
}

重新运行

npm start

在浏览器中,你应该可以看到如下效果:

image.png

本部分代码地址:支持 css

支持 less、sass

在开发过程中,作者会用到一些 css 预编译工具比如 less、sass,如何让 webpack 支持 less、sass 呢?

安装依赖

npm i less less-loader sass sass-loader -D

修改 webpack.common.js

 module: {
    rules: [
      {
        // other
      },
      {
       // other
      },
      {
        test: /\.(less)$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.(scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },

修改 src/Home.tsx

import React from "react"

import "./Home.css"
import "./style.less"
import "./style.scss"
type Props = {}

export default function Home({}: Props) {
  return <div className="box">我是typescript</div>
}

在 src/Home.tsx 引入 style.less、style.scss 文件,所以需要新建这两个文件并编辑如下代码

新建 style.less

.box {
  background: blue;
}

新建 style.scss

.box {
  border: 1px solid green;
}

工程目录图

新建的文件位置如下图所示 image.png

重新执行

重新执行 npm start你应该可以在浏览器中看到如下效果

image.png

行文至此代码地址:支持 less、sass

PostCSS

不了解 PostCSS 可以点击我

PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具

PostCSS 使用说明

安装依赖包

npm i postcss-loader autoprefixer -D

修改 webpack.common.js

 module: {
    rules: [
      {
        // other
      },
      {
        test: /\.(css)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: "postcss-loader",
          },
        ],
      },
      {
        // other
      },

    ],
  },

新增 postcss.config.js

postcss 生效需要使用一些配置,postcss-loader 会默认使用根目录下 postcss.config.js 文件

根目录新建 postcss.config.js 并编写如下代码:

module.exports = {
  plugins: [require("autoprefixer")],
}

目录结构

image.png

修改 src/Home.css

.box {
  display: flex;
  color: red;
  justify-content: center;
}

修改 package.json

  "dependencies": {
   // other
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "ie >= 9",
    "not op_mini all"
  ]

重新运行

在浏览器控制台可以看到如下图所示,postcss 生效了

image.png

最后

postcss需要在css-loader之前,less-loader或者scss-loader之前之后使用,所以修改webpack.common.js如下修改,可支持less和sass预编译文件支持自动添加浏览器前缀

 module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)/,
        loader: "babel-loader",
      },
      {
        test: /\.(css)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: "postcss-loader",
          },
        ],
      },
      {
        test: /\.(less)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2,
            },
          },
          {
            loader: "postcss-loader",
          },

          "less-loader",
        ],
      },
      {
        test: /\.(scss)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2,
            },
          },
          {
            loader: "postcss-loader",
          },
          "sass-loader",
        ],
      },
    ],
  },

支持文件与字体引入

在开发过程中需要使用一些图片后者自定义字体,有的需求是直接引用静态服务器,有的是直接打包在工程中。所以需要对引入的图片后者字体做一些处理

安装依赖

npm i url-loader file-loader -D

修改webpack.common.js

module: {
    rules: [
      {
        // other
      },
      {
        test: /\.(bmp|gif|png|jpe?g)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10 * 1024,
              name: "[name].[contenthash:8].[ext]",
              outputPath: "assets/images",
            },
          },
        ],
      },
      {
        test: /\.(ttf|woff|woff2|eot|otf)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "[name].[contenthash:8].[ext]",
              outputPath: "assets/fonts",
            },
          },
        ],
      },
    ],
  },

可以在study-webpack工程中使用后缀为.bmp、.gif、.png、.jpeg等格式的图片的。

结语

本篇极简,只讲述如何使用这些依赖包,并不详细描述为什么这么使用,所使用的依赖包具体作用是什么。但

下一篇:从零搭一个极简版webpack+React工程(四)

是文中有许多引用链接,读者如有兴趣可自行查阅。

作者水品有限,阐述或者讲解有误欢迎评论区留言指教,感谢之至

参考文献

1.style-loader

2.css-loader 和 style-loader 关系原理及作用

3.css-loader 和 style-loader 的区别和使用

4.less-loader