webpack最常用的loader：style-loader、css-loader、less-loader、postcss-loader、babel-loader等

原创已于 2022-10-26 14:13:43 修改

· 2.9k 阅读

5 ·

版权

文章标签：

#webpack #css #less

于 2022-10-26 14:13:35 首次发布

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了webpack中处理CSS的style-loader、css-loader、less-loader以及postcss-loader的作用，详细讲解了它们在处理CSS及其兼容性问题上的功能。同时，提到了babel-loader对于处理JSX和TSX的重要性，确保webpack能够识别和转换这些语法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

style-loader、css-loader

less-loader

postcss-loader

bable-loader

style-loader、css-loader

我们在webpack中使用css，当我们npm run build ：dev打包的使用，会报错，因为webpack默认的状态下只能识别js，不能识别css，所以就需要安装loader来帮助我们去解析css文件进行打包

npm i style-loader css-loader -D

style-loader: 把解析后的css代码从js中抽离,放到头部的style标签中(在运行时做的)
css-loader: 解析css文件代码

配置文件

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.css$/,
        //注意webpack的使用的顺序是按照从右像左的所以先使用css去识别css文件，然后在把css提取出来放到，头部的style里面
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

less-loader

项目开发中,为了更好的提升开发体验,一般会使用css超集less或者scss,对于这些超集也需要对应的loader来识别解析。以less为例,需要安装依赖:

npm i less-loader  less -D

less-loader: 解析less文件代码,把less编译为css
less: less核心

配置文件

module.exports = {
  //...

  module: {
    rules: [
      {
        test: /.css$/,
        //注意webpack的使用的顺序是按照从右像左的所以先使用css去识别css文件，然后在把css提取出来放到，头部的style里面
        use: ['style-loader', 'css-loader'],
      },
      {
        test:/.less$/,
        use:['style-loader', 'css-loader','less-loader']
      },
    ],
  },
};

postcss-loader

虽然css3现在浏览器支持率已经很高了, 但有时候需要兼容一些低版本浏览器,需要给css3加前缀,可以借助插件来自动加前缀, postcss-loader就是来给css3加浏览器前缀的

npm i  postcss-loader autoprefixed -D

postcss-loader：处理css时自动加前缀
autoprefixer：决定添加哪些浏览器前缀到css中

module.exports = {
  //...

  module: {
    rules: [
      {
        test: /.css$/,
        //注意webpack的使用的顺序是按照从右像左的所以先使用css去识别css文件，然后在把css提取出来放到，头部的style里面
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.less$/,
        use: [
          'style-loader',
          'css-loader',
          //新增
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['autoprefixed'],
              },
            },
          },
          'less-loader',
        ],
      },
    ],
  },
};

配置完成后,需要有一份要兼容浏览器的清单,让postcss-loader知道要加哪些浏览器的前缀,在根目录创建 .browserslistrc文件

# 换行相当于 and
last 2 versions # 回退两个浏览器版本
> 0.5% # 全球超过0.5%人使用的浏览器，可以通过 caniuse.com 查看不同浏览器不同版本占有率
IE 10 # 兼容IE 105

以兼容到ie9和chrome35版本为例,配置好后,执行npm run build:dev打包,可以看到打包后的css文件已经加上了ie和谷歌内核的前缀

bable-loader

我相信都懂bable是干嘛的，偷个懒

安装依赖

由于webpack默认只能识别js文件,不能识别jsx语法,需要配置loader的预设预设 @babel/preset-typescript 来先ts语法转换为 js 语法,再借助预设 @babel/preset-react 来识别jsx语法。

npm i babel-loader @babel/core @babel/preset-react @babel/preset-typescript -D

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.(ts|tsx)$/, // 匹配.ts, tsx文件
        use: {
          loader: 'babel-loader',
          options: {
            // 预设执行顺序由右往左,所以先处理ts,再处理jsx
            presets: [
              '@babel/preset-react',
              '@babel/preset-typescript'
            ]
          }
        }
      }
    ]
  }
}

babel设置js兼容问题

npm i babel-loader @babel/core @babel/preset-env core-js -D

babel-loader: 使用 babel 加载最新js代码并将其转换为 ES5（上面已经安装过）
@babel/corer: babel 编译的核心包
@babel/preset-env: babel 编译的预设,可以转换目前最新的js标准语法
core-js: 使用低版本js语法模拟高版本的库,也就是垫片

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.(ts|tsx)$/,
        use: {
          loader: 'babel-loader',
          options: {
            // 执行顺序由右往左,所以先处理ts,再处理jsx,最后再试一下babel转换为低版本语法
            presets: [
              [
                "@babel/preset-env",
                {
                  // 设置兼容目标浏览器版本,这里可以不写,babel-loader会自动寻找上面配置好的文件.browserslistrc
                  // "targets": {
                  //  "chrome": 35,
                  //  "ie": 9
                  // },
                   "useBuiltIns": "usage", // 根据配置的浏览器兼容,以及代码中使用到的api进行引入polyfill按需添加
                   "corejs": 3, // 配置使用core-js低版本
                  }
                ],
              '@babel/preset-react',
              '@babel/preset-typescript'
            ]
          }
        }
      }
    ]
  }
}