webpack配置浏览器厂商前缀

最新推荐文章于 2024-07-25 09:10:56 发布

么心么肺

最新推荐文章于 2024-07-25 09:10:56 发布

阅读量346

点赞数

分类专栏： webpack

本文链接：https://blog.youkuaiyun.com/weixin_41545048/article/details/110929825

版权

webpack 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Webpack结合postcss-loader及autoprefixer插件自动为CSS样式添加浏览器前缀。通过具体步骤指导安装所需依赖，并配置Webpack加载器，实现开发过程中浏览器兼容性的自动化处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装
webpack打包时，自动配置浏览器前缀，需要用到一个loader(postcss.loader)和一个插件(autoprefixer),所以首先需要安装好插件和loader。

npm install postcss-loader -D
npm install autoprefixer@version -D

version为相应的版本号，部分较高版本不起效，亲测7.2.6和7.2.1版本有效,所以建议安装时指定版本号。

配置
安装完成后，在webpack.config.js的同级目录下新建postcss.config.js文件，并配置插件

module.exports = {
   plugins: [
        require('autoprefixer')
    ]
};

在webpack.config.js文件下，找到module下的rules属性，添加loader配置

const path = require('path')
module.exports = {
    mode: "production",     /** development*/
    entry: {
        main: "./src/index.js"
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/i,
                use: {
                    loader: "url-loader",
                    options: {
                        name: '[name]_[hash].[ext]',
                        outputPath: "static/images",
                        limit: 10240, 
                        //图片大小限制，若大于该值，则打包搭配dist/static/images下，若小于该值，打包到js文件
                    }
                }
            },
            {
                test: /\.scss$/i,
                use: ['style-loader','css-loader','sass-loader','postcss-loader'],
            }
        ]
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, "dist")
    }
}

由于loader执行顺序为从右向左，所以use里面的loader顺序不能写反。webpack打包时，首先会调用postcss-loader为浏览器添加厂商前缀，，然后通过sass-loader把sass语法转化为css语法，然后执行css-loader整合css代码，最后执行style-loader,讲整合的css代码添加到style标签中。所以此时需要安装以下loader:

npm i style-loader css-loader sass-loader node-sass -D