webpack基础知识学习(二)--css的转换

Inspire尘
285 阅读1分钟

上一小节我们打包的js文件，但是对于我们前端，js只是其中的一部分，接下来我们要打包css。

1.修改js文件，我们动态创建一个div标签，然后通过css给这个标签添加样式。在src下创建css文件夹，添加style.css文件。

// src/css/style.css

.title {
    color: red;
    font-size: 24px;
}

// src/js/start.js

import '../css/style.css';

const start = () => {
    console.log('我被加载了');
    const dom = document.createElement('div');
    dom.innerHTML = '学习webpack';
    dom.className = 'title';
    document.body.appendChild(dom);
}

export {
    start
} 

// index.html引入打包后的js文件

<script src="./build/boundle.js"></script>

我们运行 npm run build，显然会报错，因为我们引入里css文件，webpack是默认不支持转换css的，所以我们需要使用插件来转换css样式。

我们需要两个插件来处理css。css-loader，style-loader。
css-loader和style-loader都分别做了什么呢？webpack默认只支持js的导入，css-loader是为来让webpack识别css文件，读取css文件里的内容的。style-loader就是把css-loader识别出来的内容添加到html中。所以这两个loader是有先后顺序的，得先执行css-loader，再执行style-loader。

2.yarn add css-loader style-loader --dev 安装css-loader，style-loader。
3.修改webpack.config.js。我们新增了module属性，下面的rules就是处理各种loader的。例如我们匹配的css结尾的文件名，然后用css-loader，style-loader来处理。注意loader的写法是从右往左的，类似于组合函数。

// webpack.config.js

const path = require('path')

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'boundle.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

我们在重新运行npm run build，通过live-sever启动服务器，打开index.html，这时候我们发现页面上的css已经被运用上了。

image.png

image.png

我们在想想，我们平常开发都是用less或者sass等来书写样式，那我们来添加less的转换吧！ 4.yarn add less less-loader --dev 安装less转换依赖。添加一个less样式文件，同css文件一样，在js中引入。

// src/css/style.less

@backgroundcOLor: yellow;

.title {
    background-color: @backgroundcOLor;
}

// src/js/start.js

import '../css/style.less';

// webpack.config.js

const path = require('path')

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'boundle.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
}

如上图所示，我们添加了less文件，并将它加载到依赖图当中，我们在webpack的配置文件中也加上了处理less文件的规则，less-loader的作用就是将less文件的内容转换成css的内容，所以当使用完less-loader后，还要接上css-loader和style-loader。之后我们在运行npm run build,则less文件中添加的样式就被展示出来了。

image.png

说完less,我们还要解决css的兼容性问题，那我们到底要兼容哪些平台呢？这时候就有一个叫.browserslistrc的文件，他就是来规定我们要兼容哪些平台的文件。caniuse.com/usage-table 这个网站中展示的就是当今市面上浏览器的占有率。我们可以尝试运行yarn browserslist，因为webpack已经内置来这个插件。打印出来的就是需要兼容的浏览器的平台。在package.json中，会有一个browserslist的字段，用来指定要兼容的浏览器平台。

  "browserslist": [
    ">1%",
    "last 2 version",
    "not dead"
  ],

上述字段的意思就是兼容市场占有率超过1%的，用最新的两个版本，且24月之内有更新的没有死掉的平台。

为来兼容这些平台这里就需要加上postcss等插件插件，他能够为我们自动的加上那些需要兼容属性。 5.yarn add postcss-loader postcss-preset-env --dev 安装postcss所需的插件。 修改css文件添加一些高级用法。

// src/css/style.css
// 替换了颜色代码8位数，添加了css3的高级属性

.title {
    color: #12345678;
    font-size: 24px;
    transition: all .3s;
    user-select: none;
}


// webpack.config.js
// 添加postcss-loader插件

const path = require('path')

module.exports = {
    entry: './src/app.js',
    output: {
        filename: 'boundle.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('postcss-preset-env')
                                ]
                            }
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    }
}

修完完毕后，我们在运行npm run build，发现css的样式代码已经被做兼容了。

image.png

我们还可以修改package.json中browserslist的属性，我们把浏览器的市场占有率改为o.o1%后，在重新运行，会发现得到的样式又不一样了。

image.png

还有最后一个小问题，css是可以import其他css文件的，当我们在其他文件中用了高级特性，发现这些样式并不会被做兼容，也就是不会被postcss处理，所以这个还要对css-loader做一次修改。

// importLoaders属性意思就是当遇到import了其他css文件，那么这个css文件就从前一个（我们给的是
// 1）插件开始处理，想要从前两个插件开始处理，那就设置为2.

{
    test: /\.css$/,
    use: [
        'style-loader',
        {
            loader: 'css-loader',
            options: {
                importLoaders: 1
            }
        },
        {
            loader: 'postcss-loader',
            options: {
                postcssOptions: {
                    plugins: [
                        require('postcss-preset-env')
                    ]
                }
            }
        }
    ]
},

到目前为止我们css的转换就差不多学习完毕了，接下来将是图片的处理啦！

avatar
文章
阅读
粉丝