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'
        })
    ]
}

未完待續，繼續學習繼續補充哦~