webpack抽取项目中的less文件

前言

在项目中我一般喜欢一些预处理css处理器来开发代码，首先是因为灵活，其次就是能很好的处理样式的命名空间，防止样式冲突。

场景

在React相关的项目开发中，我们的开发方式是每一个组件中会有一个单独的less文件，如果需要让分散在项目中的less文件全部抽取到一个统一的css文件中，就需要用到extract-text-webpack-plugin插件实现样式的抽取。

该插件是webpack 4.0.0版本之前使用的，4.0.0的后续版本会有新的工具使用；

原因

之前会抽取到两个css文件，由于历史原因，只能加载一个css文件，这就导致了有一部分的样式缺失，没有办法加载。

解决方案

将css和less文件使用同一组loader去加载，这样就能输出到同一个css文件了，详细实现的代码如下；

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.(less|css)$/,
        use: ExtractTextPlugin.extract({
          use:[ 'css-loader','less-loader'],
          fallback: 'style-loader',
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: 'index.css',
      disable: false,
      //  这个参数是必须的，否则只能抽取到入口文件中的css文件
      allChunks: true,
    }),
  ],
};

需要注意的是，没个组件或者模块需要用自己独立的命名空间，否则合并成一个css后会导致样式覆盖的问题；

‍