Webpack Babel-Polyfill Postcss Autoprefixer 代码浏览器兼容作为一名前端开发者

简介

因为现在市面上的浏览器类型众多，作为一名前端开发者就需要面对很多兼容性的问题，因为我们不可能全部像从前的石器时代一样，都是手动进行处理，现在可以通过webpack打包构建的时候通过loader进行处理。

下面主要是对 js文件的polyfill的自动添加，以及 css文件的浏览器前缀添加

Js 浏览器兼容

配置步骤

npm install webpack webpack-cli --save-dev
npm install @babel/plugin-transform-runtime @babel/preset-env @babel/core babel-loader core-js --save-dev

webpack js配置参数

    module: {
        rules: [
          { test: /\.js$/, use: {
            loader: 'babel-loader',
            options: {
                presets: [
                    [
                      '@babel/preset-env',
                      {
                        useBuiltIns: 'usage',
                        "corejs": "3.22",
                         // 需要配置需兼容的浏览器范围
                         // targets: "> 0.25%, not dead"
                         // 可以在这制定浏览器范围，
                         // 也可以在 package.json 的 browserslist 中添加
                      }]
                  ],
                  // 这个插件主要是创建沙箱环境避免直接导入corejs造成的全局作用域的污染
                  plugins:['@babel/plugin-transform-runtime'] 
            }
          } }
        ]
      }

注意事项

打包的时候，默认babel-polyfill是不生效的，需要进行配置

css 浏览器兼容

npm install postcss-loader autoprefixer style-loader  --save-dev
// 或者不使用style-loader 使用 mini-css-extract-plugin 可以更方便观察
npm install mini-css-extract-plugin html-webpack-plugin --save-dev

webpack css配置参数

        {
            test: /\.css$/i,
            use: [
              MiniCssExtractPlugin.loader,
            "css-loader",
              {
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    plugins: ["autoprefixer"],
                  },
                },
              },
            ],
          },
        ],
    },
    plugins: [
        // 使用 MiniCssExtractPlugin 需要依赖 HtmlWebpackPlugin
        // 所以也安装的 HtmlWebpackPlugin 插件
        new MiniCssExtractPlugin()，
        new HtmlWebpackPlugin()
    ],

autoprefixer 生效需要配置参数

  "browserslist": [
    "> 5%",
    "Android >= 4.0",
    "not ie <= 8"
  ],

浏览器版本的范围

例子	说明
`> 1%`	全球超过1%人使用的浏览器
`> 5% in US`	指定国家使用率覆盖
`last 2 versions`	所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
`Firefox ESR`	火狐最新版本
`Firefox > 20`	指定浏览器的版本范围
`not ie <=8`	方向排除部分版本
`Firefox 12.1`	指定浏览器的兼容到指定版本
`unreleased versions`	所有浏览器的beta测试版本
`unreleased Chrome versions`	指定浏览器的测试版本
`since 2013`	2013年之后发布的所有版本

浏览器分类

例子	说明
`Android`	全球超过1%人使用的浏览器
`Baidu`	指定国家使用率覆盖
`BlackBerry`	所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
`Firefox ESR`	火狐最新版本
`Firefox > 20`	指定浏览器的版本范围
`not ie <=8`	方向排除部分版本
`Firefox 12.1`	指定浏览器的兼容到指定版本
`unreleased versions`	所有浏览器的beta测试版本
`unreleased Chrome versions`	指定浏览器的测试版本
`since 2013`	2013年之后发布的所有版本
`Android`	for Android WebView.
`Baidu`	for Baidu Browser.
`BlackBerry` or `bb`	for Blackberry browser.
`Chrome`	for Google Chrome.
`ChromeAndroid` or `and_chr`	for Chrome for Android
`Edge`	for Microsoft Edge.
`Electron`	for Electron framework. It will be converted to Chrome version.
`Explorer` or `ie`	for Internet Explorer.
`ExplorerMobile` or `ie_mob`	for Internet Explorer Mobile.
`Firefox` or `ff`	for Mozilla Firefox.
`FirefoxAndroid` or `and_ff`	for Firefox for Android.
`iOS` or `ios_saf`	for iOS Safari.
`Node`	for Node.js.
`Opera`	for Opera.
`OperaMini` or `op_mini`	for Opera Mini.
`OperaMobile` or `op_mob`	for Opera Mobile.
`QQAndroid` or `and_qq`	for QQ Browser for Android.
`Safari`	for desktop Safari.
`Samsung`	for Samsung Internet.
`UCAndroid` or `and_uc`	for UC Browser for Android.