webpack使用loader编译css和打包图片(二)

这里主要介绍css-loader的常用配置项

如果需要对loader进行单独的配置，那么就需要把数组里面引入的loader改为对象的模式

之前是这么写的

{
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader', 'postcss-loader']
            }

例如我们需要对css-loader进行单独的配置

 {
                test: /\.scss$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        importLoaders:2,
                    }
                }, 'sass-loader', 'postcss-loader']
            }

importLoaders

在 css-loader 前应用的 loader 的数量，用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader。也就是如果在css中引入了其他的文件，这里也会执行下sacc-loader和postcss-loader

modules

是否开启css模块化 true开启

 {
                test: /\.scss$/,
                use: ['style-loader', {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2,
                        modules: true
                    }
                }, 'sass-loader', 'postcss-loader']
            }

使用：

import style from './index.scss'

style.类名称

打包字体图标

{
                test: /\.(eot|ttf|svg|woff)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        outputPath: 'static/font/'
                    }


                }
            }

参考：https://www.webpackjs.com/guides/asset-management/#%E5%AE%89%E8%A3%85