webpack4配置vue项目----10.css样式前缀自动补全

这是一篇webpack4配置的系列文章,推荐从头开始看起
1.初始化
2.关于执行环境process.env.NODE_ENV
3.设置mode和sourceMap
4.加载css, scss文件,以及样式抽离
5.加载图片等文件
6.html-webpack-plugin插件
7.单vue文件的加载,以及babel的使用
8.配置devServer服务器,热更新,前端跨域代理
9.设置目录别名
10.css样式前缀自动补全
11.public公共静态资源目录拷贝
12.清理dist目录

安装依赖

npm install --save-dev postcss-loader autoprefixer

webpack.config.js添加postcss的相关配置

module.exports = {
    module: {
        rules: [ {
            test: /\.css$/,
            use: [
                //开发环境使用style-loader打包
                process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
                'css-loader',
                { //postcss-loader插件,用于自动补全样式的浏览器前缀
                    loader: 'postcss-loader',
                    options: {
                        plugins: [require('autoprefixer')({
                            browsers: [ //浏览器列表
                                'ie>=8',
                                'Firefox>=20',
                                'Safari>=5',
                                'Android>=4',
                                'Ios>=6',
                                'last 4 version',
                            ]
                        })]
                    }
                }
            ]
        }]
    },
    
};
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但...
    yichen_china阅读 1,515评论 0 3
  • 前言 本文主要从webpack4.x入手,会对平时常用的Webpack配置一一讲解,各个功能点都有对应的详细例子,...
    BetterChen阅读 2,056评论 0 3
  • A算是我一个遥远的辈分亲戚。 相识不长就见了一次面,此后一直没联系,直到某天他突然发信息给我说要借钱很急。 数目不...
    小忧郁的青年阅读 272评论 0 1
  • 早上五点多,郑先生的手机响了,通知他,省里来的检查组今天要到星星村检查扶贫情况。“终于还是被抽到了!”郑先...
    草叶上的歌_dd7d阅读 728评论 2 3
  • 今天看到的一开始是只小兔子,蜷缩在我的怀里,好像受了委屈。我把它抱到怀里,摸摸它,和它说对不起,请原谅,谢谢你,我...
    马兰_d023阅读 951评论 0 0

友情链接更多精彩内容