webpack4學習筆記（4）

加載css所需的loader及其使用方式

1.瞭解loader——讓webpack能處理非Javascript文件

           loader可以將所有類型的文件轉化爲webpack能處理的有效模塊，然後就可以利用webpack的打包能力對它們進行處理。

2.安裝loader——style-loader和css-loader

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

3.配置loader

(1)在webpack.config.js文件中配置module中的rules

module:{

    rules:[

        {

            test:/\.css$/,

            use:['style-loader','css-loader']    //注意順序，style-loader在前

        }

    ]

}

兩個屬性：

        test屬性：用於識別應該被對應loader進行轉換的某個或某些文件

        use屬性：進行轉換時應該使用哪個loader

---

編譯less

1.安裝loader

npm install less-loader less --save-dev

2.在webpack.config.js文件中配置loader

{
    test:/\.less$/,
    use:['style-loader','css-loader'，'less-loader']
}

編譯sass

1.安裝loader

npm install sass-loader node-sass --save-dev

2.在webpack.config.js文件中配置loader

{
    test:/\.sass $/,
    use:['style-loader','css-loader'，'less-loader','sass-loade']
}

---

使用PostCSS處理瀏覽器前綴

方法一：在webpack.config.js中配置

1.安裝loader——postcss-loader、autoprefixer

npm install postcss-loader autoprefixer --save-dev

2.配置loader

use:['style-loader','css-loader','less-loader','sass-loader',{

    loader:'postcss-loader',

    options:{

        plugins:[

            require('autoprefixer')({

                browsers:[

                    'ie>=8', //ie版本大於等於8

                    'Firefox>=20', //火狐版本大於等於20

                    'safari>=5', //safari版本大於等於5

                    'Android>=4', //版本大於Android4

                    'Ios>=6', //版本大於IOS6

                    'last 4 version' //瀏覽器最新的4個版本

                ]

            })

        ]

    }

}]

方法二：在package.json中配置

 "browserslist":[
    "ie>=8",   
    "Firefox>=20", 
    "safari>=5",   
    "Android>=4",  
    "Ios>=6",          
    "last 4 version"      
  ]