webpack解析css等样式文件

时间:2021-1-8 作者:admin

之前提到的插件是为了实现某些功能的,而加载器则是用来解析各种文件的。
通常加载器都是配置在rules下的

1、解析css文件

webpack只识别js文件,所以遇到css文件时,需要借助一些加载器。解析加载css文件需要两个loader:style-loadercss-loader

 module: {
    rules: [ // 存放各种loader:使用loader的顺序是:从下往上
      {
        test: /\.css$/,  // 匹配哪些文件(后缀是.css的文件)
        // 加载css文件至少需要 css-loader、style-loader两个加载器
        // 先用css-laoder加载css文件,再用style-loader加载到页面上
        use: ['style-loader','css-loader'] // 使用什么加载器
        /* use的值:
         * 1、直接写字符串:适用于只需要一个laoder
         * 2、数组:多个loader:加载的顺序是:从右往左
         * 3、对象:需要单独配置属性值
        */
      },
    ]
  }

2、解析less文件

解析less文件是先将less编程成css,之后再按照解析css文件处理。
将less编程成css需要用到:less-loader

{
   test: /\.less$/,
   // less首先编译成css,之后就按照加载css文件处理
   use: ['style-loader','css-loader','less-loader'],
   exclude: /node-modules/,  // 不会去加载node-modules中的less文件
      }

3、处理css兼容性问题

在写CSS3属性的时候,需要针对不同的浏览器加上不同的前缀才会被浏览器识别。想要兼容不同的浏览器,需要用到:postcss-loader

{
   test: /\.css$/,  // 匹配哪些文件(后缀是.css的文件)
   use: ['style-loader','css-loader', 'postcss-loader'] // 使用什么加载器
}

!注意:使用postcss-loader时,还需要配置两个文件:postcss.config.js.browserslistrc
postcss.config.js 文件配置如下
.browserslistrc 文件中只有一句: cover 99.9%

// postcss.config.js配置
module.exports = {
  plugins: [
    require('autoprefixer'), // 需要安装 autoprefixer 插件
  ]
}
// 使用 postcss-loader 是直接在 css-loader 后面添加
 {
    test: /\.css$/, // 匹配所有css文件
    // 对于css3属性处理兼容:postcss-loader
    use: ['style-loader', 'css-loader', 'postcss-loader'], // 使用 style-loader 是通过js生成style标签加载到页面中的
  },

4、处理css中引入less问题

在真实项目中不可避免会有在css文件中引入less文件的写法,如果只单独处理整个css文件,不处理css文件中的less,webpack会直接把less当做css来处理,所以会报错。
解决办法:对解析css的加载器进行一些额外的配置

{
  test: /\.css$/,  // 匹配哪些文件(后缀是.css的文件)
  use:['style-loader', {
          loader:'css-loader',
          options: {
            importLoaders: 1  // 先去使用后面的1个加载器去加载
          }
        }, 'less-loader']
   // 实践发现下面这种写法效果跟它是一样的
   // use: ['style-loader','css-loader','less-loader']
}

5、合并css文件

通过上面的各种加载器处理css/less文件,最后都是内嵌式,而且每加载一个样式文件,打包生成的html中就多一个style标签
想要将css文件合并成一个,通过外链式引用的,需要用到插件: mini-css-extract-plugin ,用插件中的 loader 取代 style-loader

// 在配置文件中引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 去plugins配置合并后的css文件信息
new MiniCssExtractPlugin({
    filename: 'css/[name].[hash:5].css', // 合并后的css文件名
      // chunkFilename: 'css/[id].[hash:5].css'
    }),
// 去rules中使用并配置
{
   test: /\.less$/,
    // less首先编译成css,之后就按照加载css文件处理
    use: [{
      loader: MiniCssExtractPlugin.loader, // 这里不再使用 style-loader
      options: {
      esModule: true,  // 支持通过esModule导入的样式
      }},
      'css-loader','postcss-loader','less-loader'],
        exclude: /node-modules/,  // 不会去加载node-modules中的less文件
      }

!注意:这里只会把使用了 MiniCssExtractPlugin.loader 的样式文件合并成一个之后通过link外链样式引入到页面,而没有使用该加载器的样式还是通过style内嵌样式引入到页面内。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。