小白学 Webpack之CSS 兼容插件

兼容css

还有浏览器不支持css3,CSS4 的属性,我们需要编写css的前缀来实现兼容属性。
例如

display:flex;
display:-webkit-flex;//兼容编写

安装插件

npm i postcss-loader autoprefixer@8.0.0 -D

postcss 文档

autoprefixer文档

配置

在css加载器加"postcss-loader"

var path = require('path');

//插件
var HtmlWebpackPlugin = require('html-webpack-plugin');

//css抽离
var MiniCssExtractPlugin=require('mini-css-extract-plugin');

module.exports = {
  //入口文件
  entry: './src/js/index.js',
  output: {
    //文件名
    filename: 'js/main.js',
    path: path.resolve(__dirname, './dist/'),
    publicPath:'',
  },
  plugins: [
    new HtmlWebpackPlugin({
      //title: 'My App',
      filename: 'index.html',
      template: "./src/index.html"
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: '[id].css',
    })
  ],
  devtool: "source-map",//地图
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css$/,//正则打包什么文件
        //先进后出,也就是先处理css-loader再进行style-loader
        use: [
          {
            loader:MiniCssExtractPlugin.loader,
            options:{
              publicPath:'../'
            }
          }
          ,
          { loader: 'css-loader', options: { importLoaders: 1 } },
          "postcss-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          {
            loader:MiniCssExtractPlugin.loader,
            options:{
              publicPath:'../'
            }
          }
          ,
          { loader: 'css-loader', options: { importLoaders: 1 } },
           'less-loader',"postcss-loader"
        ]
      },
      {
        test: /\.scss/,
        use: [
          'style-loader', 'css-loader', 'scss-loader'
        ]
      },
      {
        test: /(\.png|\.jpg|\.gif)$/,
        loader:'url-loader',//这个url-loader需要依赖file-loader,所以只需要引入一个即可
        options:{
          limit:1024*14,//设置图片大小小于这个则用base64 14KB转成base64
          name:'[name].[ext]', //打包存储位置
          outputPath:'img'//打包目录
        }
      },
      {
        test: /\.html$/,
        use:['html-loader']

      }

    ]
  }
}

创建postcss.config.js

const AutoPrefixer = require('autoprefixer')

module.exports = {

  plugins: [
    new AutoPrefixer({
      overrideBrowserslist : [
        '>0.15% in CN'
      ]
    })
  ]

}

描述

兼容css 4 postcss-preset-env

npm i -D postcss-preset-env

postcss-preset-env 已经包含了autoprefixer
那么就可以替换了 postcss.config.js

const PostcssPresetEnv = require('postcss-preset-env')

module.exports = {

  plugins: [
    new PostcssPresetEnv({
      browser : [
        '> 0.15% in CN'
      ]
    })
  ]

}

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。