webpack学习笔记-3-autoprefixer-loader

最新推荐文章于 2024-08-22 08:18:32 发布

doomliu

最新推荐文章于 2024-08-22 08:18:32 发布

阅读量7.2k

点赞数 1

分类专栏：前端-webpack

本文链接：https://blog.csdn.net/qq_38652603/article/details/73848910

版权

本文详细介绍了如何使用autoprefixer-loader来自动添加CSS前缀，以兼容不同浏览器。通过配置该loader，可以避免手动编写重复的样式前缀代码，提升开发效率。并提供了一个GitHub demo链接供参考。

摘要由CSDN通过智能技术生成

1.前言

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

2.配置autoprefixer-loader

首先安装

npm install --save-dev autoprefixer-loader

然后写配置文件

module.exports = {
    // 入口文件路径，__dirname是根目录
    entry: __dirname + '/src/main.js',
    // 打包生成文件
    output: {
        path: __dirname + '/output',
        filename: 'main.js'
    },

    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'autoprefixer-loader']
            },
            {
                test: /\.jpeg$/,
                // use: 'url-loader?limit=1024&name=[path][name].[ext]&publicPath=output/',
                us