Webpack 之 css-Loader 详解

Css- Loader

安装

npm install --save-dev  style-loader css-loader

用法

css-laoder 是解释 @import 和 url()。

// common.css
html , body {
    background: pink;
    padding: 0px;
    margin: 0px;
    background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1521820324449&di=2930f7026f4242fdfdabf7b5cc0cac35&imgtype=0&src=http%3A%2F%2Fimg0.pconline.com.cn%2Fpconline%2F1312%2F04%2F3938137_2886_thumb.jpg');
}

// flex布局
div {
    display: flex;
}
// postcss处理后会为其添加兼容各浏览器的前缀
// 当你打开打包后的html文件后，会在head中发现多了些style标签，里面就是你的样式内容

// app.js
import './common/common.css'; // 引入css

// webpack.config.js
module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,  // 优化处理加快速度
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']            // 这里需要npm安装babel-preset-latest
                    }
                }
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ] //可以是数组的格式，指定需要的loader,这里顺序需要注意一下，执行的时候是先执行  css-loader -> style-laoder 
                // 这里也可以传入参数
            }
        ]
    },

options 参数

root

默认是 / 。对于 / 开头的URL， 默认行为是不转义的。

url(/image.png) => url(/image.png)

如果设置了 root 参数 ,那么查询参数将被添加到 URL 前面。

use: [
    {
        laoder: 'css-loader',
        options: {root: '.'}
    }
]

// url(/image.png) => require('./image.png')

// root参数不建议使用，使用旧版的即可

url

是否禁用url()解析
默认是false.

url(image.png) => require('./image.png')
url(~module/image.png) => require('module/image.png')

import

要禁用css-loader 解析 @import 可以设置import为false

• 但是提示要谨慎使用，一般没有人会这么做的

modules

modules 会启用 CSS 模块规范。

importLoaders

用于配置「css-loader 作用于 @import 的资源之前」有多少个 loader。

var htmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')
module.exports = {
    mode: 'development',
    entry: './src/app.js',
    output: {
        filename: 'js/bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,  // 优化处理加快速度
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                exclude: '/node_modules/',
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1  //当css文件中又有引入了其他的css的时候，需要设置一下importLoaders
                        }
                    },
                    {
                        loader: 'postcss-loader',            // 需要npm安装postcss-loader
                        options: {
                            ident: 'postcss',
                            plugins: (loader) => [
                              require('postcss-import')({ root: loader.resourcePath }),
                              require('postcss-cssnext')(),
                              require('autoprefixer')(),
                              require('cssnano')()
                            ]
                          }
                    }
                ]
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html',
            inject: 'body',
            filename: 'index.html'
        })
    ]
}

未完待续，继续学习继续补充哦~