react-从零开始搭建项目-配置各种webpack-loader

dreamer_sen
1,314 阅读2分钟

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战

上一篇

react-从零开始搭建项目-webpack-dev-server

前言

上一篇我们通过配置webpack-dev-server完成了项目的热更新，接下来需要完善我们的loader，因为我们还无法导入css文件，或者说导入了却不生效，这是为什么呢？

假设我们在一个组件中导入了一个index.css样式文件,如这样 import './index.css'; 会发现webpack在编译时直接报错了：

image.png

编译失败的原因是什么呢？

其实就是webpack还不理解css文件需要如何去编译，需要一个能帮助我们编译的工具，那就是loader，所以我们可以形象的把loader理解为一个翻译官，帮助webpack理解并编译css文件。

css-loader

既然是编译css那么我们盲猜一个css-loader，老步骤了：

  1. 安装依赖包 npm i css-loader -D
  2. 配置webpack.config.js文件
module.exports = {
  module: {
    rules: [
      ......
      {
        test: /\.css$/,
        loader: 'css-loader',
      }
    ]
  }
}

运行项目后发现样式并没有生效，因为css-loader的作用还不是一步到位的：

css-loader主要对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样，解析完就不管了，所以这个样式并没有用在界面中。是style-loader把css插入DOM中，才使得样式生效的。

我们还需要style-loader，老步骤：

  1. 安装依赖包 npm i style-loader -D
  2. 配置webpack.config.js文件
module.exports = {
  module: {
    rules: [
      ......
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }
    ]
  }
}

注意这里使用了 use: ['style-loader', 'css-loader']

运行项目后，样式成功显示在了界面上

image.png

题外话：好奇这里为什么不一步到位呢？为什么分开两个loader？

我们还有很多的loader（官方文档），使用方法是类似的，就不一一去写了。

另外webpack5还优化了一个点叫：asset module（资源模块） 是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。

感兴趣可以了解一下，以免配置了一些已经内置的loader。

总结

从零开始搭建项目react项目，暂时就到这吧，后面可能会更新eslint配置，写node来mock数据实现前后端接口联调。由于最近在准备面试，我就先暂停这里，多总结与面试相关的。八月加油

avatar
文章
阅读
粉丝