webpack 学习笔记-2 CSS

css-loader 和 style-loader

webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。

//安装
npm install --save-dev style-loader css-loader

在 webpack.config.js里添加配置：

module: { // 如何处理项目中不同类型的模块
        rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
            {
                test: /\.css$/, // 匹配特定文件的正则表达式或正则表达式数组
                use: [ // 应用于模块的 loader 使用列表
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }

请注意这里对同一个文件引入多个loader的方法。

接下来，在src文件夹里创建一个名字为”main.css”的文件，对一些元素设置样式:
main.css

body {
    padding: 20px;
    font-size: 20px;
    color: blue;
    font-family: Arial, sans-serif, 'Courier New', Courier, monospace;
    background: gray;
}

我们这里用到的webpack只有单一的入口，其它的模块需要通过 import, require, url等与入口文件建立其关联，为了让webpack能找到”main.css“文件，我们把它导入”main.js “中，如下
main.js

const greeter = require('./greeter.js');
import './main.css'
document.querySelector("#root").appendChild(greeter());

打包，命令行输入：

webpack

刷新页面，可以看到，已经有了样式了。

autoprefixer-loader

我们在写css样式时，有些情况下需要加样式前缀以兼容不同的浏览器。手动添加css前缀会写较多的重复代码，降低开发效率。autoprefixer-loader为我们提供了自动添加css前缀的功能。

安装

npm install --save-dev autoprefixer-loader

配置文件

module: { // 如何处理项目中不同类型的模块
        rules: [ // 用于规定在不同模块被创建时如何处理模块的规则数组
            {
                test: /\.css$/, // 匹配特定文件的正则表达式或正则表达式数组
                use: [ // 应用于模块的 loader 使用列表
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }, {
                        loader: 'autoprefixer-loader'
                    }
                ]
            }
        ]
    }

然后执行打包命令

webpack

这样就可以了，我么可以在页面中看到，已经自动添加了css前缀了。