使用webpack打包样式资源

使用webpack打包样式资源需要用到比较多的loader，而且这些loader的顺序不能乱，遵循从右到左、从下到上的解析规则。

经过上一篇的文章，已经学习了使用webpack来打包图片文件，这一节就到了写如何使用webpack打包样式文件的时候了。虽然使用的loader比较多，但是只要按照顺序把loader写好，然后正确配置loader，其实样式文件的解析并不难。

本文首先从最简单的css文件解析入手，然后到scss文件解析，再到css3新特性自动加前缀一一进行学习。

 

打包css文件

现在有个目的，就是想给上一篇文章中的图片加上宽度、高度的样式。

1、在src目录下新建一个css文件夹，在里面新建一个index.css文件。

index.css

.img {
    width: 100px;
    height: 100px;
}

现在的目录如下：

 2、然后打开image.js文件，引入刚才新建的css文件。为img标签添加类。

image.js

3、配置webpack.config.js

因为css样式文件的后缀是.css，所以需要使用到style-loader、css-loader进行解析。

webpack.config.js

const path = require('path');

module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
          {
            test: /\.(png|jpg|gif)$/,
            use: [
              {
                loader: 'url-loader',