Webpack04-Loader之CSS打包进JS

目的：通过压缩文件（比如js，css等），合并多个文件，从而减少http请求，提升访问速度

主要通过Loaders，简单的举几个Loaders使用例子：

可以把SASS文件的写法转换成CSS，而不在使用其他转换工具。
可以把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。
可以把React中的JSX转换成JavaScript代码。

注意：所有的Loaders都需要在npm中单独进行安装，并在webpack.config.js里进行配置。

打包css进JS

1、安装

npm install style-loader -s -d
npm install css-loader -s -d

2、配置

方式一：use方式

    module: { // 模块：例如解读CSS，图片转换压缩等
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    },

方式二：load方式

    module: { // 模块：例如解读CSS，图片转换压缩等
        rules: [{
            test: /\.css$/,
            loader: ['style-loader', 'css-loader']
        }]
    },

方式三：use+load方式（常用）

    module: { // 模块：例如解读CSS，图片转换压缩等
        rules: [{
            test: /\.css$/,
            use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
        }]
    },

image.png

3、css文件

image.png

4、运行

webpack

参考文章

https://jspang.com/posts/2017/09/16/webpack3.html#%E7%AC%AC05%E8%8A%82%EF%BC%9A%E6%A8%A1%E5%9D%97%EF%BC%9Acss%E6%96%87%E4%BB%B6%E6%89%93%E5%8C%85