webpack配置 抽离css样式

webpack抽离css样式

•   安装插件：npm i mini-css-extract-plugin -D
•   在webpack.config.js文件中引入 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
• 代码片段

​const MiniCssExtractPlugin = require('mini-css-extract-plugin');//引入插件
  
  module: {
        rules: [   
            {     
               
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,//使用 MiniCssExtractPlugin.loader代替style loader
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                          ident: 'postcss',
                          plugins: [
                            require('autoprefixer')(),
                           
                          ]
                        }
                      }//先于css-loader被处理
                  
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,//使用 MiniCssExtractPlugin.loader
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                          ident: 'postcss',
                          plugins: [
                            require('autoprefixer')(),
                           
                          ]
                        }
                      },
                     'less-loader'
                    ]
            }
           
        ]
    },
plugins: [
      
        new MiniCssExtractPlugin({
            filename: 'css/main.css',//产出目录
            
        }),
    ]

​