zoukankan      html  css  js  c++  java
  • (八)webpack学习之——单独提取css文件,css兼容性处理,压缩css

    一、提取单独的css文件

    前面学习的过程中,用css-loader和style-loader来处理css文件,是通过在html中创建style标签把css放进去的。为了能把css单独的打包成css文件,则不能用前面的方法。

    需要用到mini-css-extract-plugin插件,去掉style-loader,具体配置如下:

     loader配置:
    
    {
            test: /.css$/,
            use: [
              {
                loader: MiniCssExtractPlugin.loader,
                options: {
                  publicPath: '../',
                },
    
              },
              'css-loader'
            ],
       },
    
    插件配置:
     new MiniCssExtractPlugin({
          filename: 'css/css.css', //输出的文件名字
        }),

    二、css兼容性处理

      有一些css3的属性,需要加上浏览器前缀才能兼容不同的浏览器。如果我们自己手动添加,那将很麻烦,所以我们可以通过配置,自动添加浏览器相关的前缀,配置如下:

      

    {
       loader: 'postcss-loader',
       options: {
          ident: 'postcss',
          plugins: () => [
             require('postcss-preset-env')()
            ],
        },
     },

    使用到的包有postcss-loader,postcss-preset-env记得安装上

    三、压缩css

    压缩css能使得打包后的css文件变小,从而提高性能,配置如下即可

    插件配置:
    new OptimizeCssAssetsWebpackPlugin(),
  • 相关阅读:
    Graphics总结
    自动布局
    引导页总结
    日常记录未分类
    .net core linux部署方案宝典大全
    .net core linux部署方案宝典大全
    .net core linux部署方案宝典大全
    .net core linux部署方案宝典大全
    .net core linux部署方案宝典大全
    .net core linux部署方案宝典大全
  • 原文地址:https://www.cnblogs.com/qiaoyun/p/13375205.html
Copyright © 2011-2022 走看看