webpack学习之webpack解析样式文件

webpack学习之webpack解析样式

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

1、解析css文件

webpack只识别js文件，所以遇到css文件时，需要借助一些加载器。解析加载css文件需要两个loader：style-loader、css-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内嵌样式引入到页面内。