前语

从零搭一个极简版 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

在浏览器中，你应该能够看到如下效果:

从零搭一个极简版webpack+React工程（三）

本部分代码地址:支撑 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;
}

工程目录图

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

从零搭一个极简版webpack+React工程（三）

从头执行

从头执行 npm start你应该能够在浏览器中看到如下效果

从零搭一个极简版webpack+React工程（三）

行文至此代码地址：支撑 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")],
}

目录结构

从零搭一个极简版webpack+React工程（三）

修正 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 收效了

从零搭一个极简版webpack+React工程（三）

最终

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