preface

I’ve been looking at webpack packaging lately, so here’s how we can achieve compatibility with WebPack.

demand

  1. To find out which browsers we need to be compatible with, we need to use BrowserList here to configure the browser version we need to be compatible with and tell the other plug-ins in WebPack to do so.
  2. CSS compatibility: specifically to our CSS automatically add prefix implementation, here we need to use the PostCSS package to achieve
  3. JS compatibility: JS compatibility is realized through Babel to convert ES6 syntax to previous versions to be compatible with browsers, but Babel alone is not enough. For advanced syntax like Promise, we also need to turn to Polyfill.

The overall picture is as follows:

implementation

Browserlist installation and configuration

Browser possession query: caniuse.com/usage-table

  1. Install browserlist
    yarn add browserlist -D
Copy the code
  1. Configure BrowserList: There are two ways to configure browserList

Browserslistrc (1) Create a new file in the root directory.

To explain: market share of more than 1% or satisfy the latest two versions of the browser or not dead (a browser is considered dead when there is no official update for 24 months) satisfy one of the appeal conditions

Method 2: Configure the following figure in package.json:

After this configuration, other Loaders will know that they need to pull the code for browser compatibility

CSS compatibility (PostTCSS: A tool for converting styles)

  1. Install postcss – loader
    yarn add postcss-loader
Copy the code
  1. Configuration postcss – loader

At this point, automatic prefixes are not available; we also need to introduce autoprefixer

  1. Install autoprefixer
    yarn add autoprefixer -D
Copy the code
  1. After configuring Autoprefixer for convenience we install PostCSs-preset -env (preset set)
    yarn add postcss-preset-env -D
Copy the code
  1. Configuration postcss – preset – env

Create a new postcss.config.js file and write the configuration as shown

This will automatically add compatibility to the CSS style according to the configuration of the Browserslistrc file.



The actual packaging results in CSS

This will make your CSS compatible across browsers. Is not soeasy ~

JS compatible

  1. Install babel-loder (solve some compatibility first)
    yarn add babel-loader 
Copy the code
  1. Configure babel-loader in webpack.config.js

The CONVERSION of JS code will not start at this point, and bebel-loader can only be used as a tool, it also needs the help of the plugin, @babel/preset-env 3. Download the @babel/ Preset -env plugin

    yarn add @babel/preset-env -D
Copy the code
  1. Create babel.config.js in the root directory and configure @babel/preset-env -d, as shown in the following figure

Babel is already able to convert some ES6 syntax, such as const,let, arrow functions, but not Promise, async, await, etc. Install the current updated version of Polyfill. The official of Polyfill suggests that it is enough to download core-JS and Regenerator under Polyfill when doing JS conversionDownload:

    yarn add core-js regenerator-runtime -D
Copy the code
  1. Configure Polyfill: as shown below

  1. We need to import packages manually when configuring useBuiltIns:’ Entry ‘in Polyfill

At the bottom line of (entry file) index.js introduce:

    import "core-js/stable"
    import "regenerator-runtime/runtime"
Copy the code

conclusion

Browser Control pack

  • browserlist
  • Configuration file:.browserslistrc

Package used by the CSS

  • postcss-loader
  • autoprefixer
  • postcss-preset-env
  • Configuration file: postcss.config.js

Package used by JS

  • babel-loder
  • @babel/preset-env
  • core-js
  • regenerator-runtime
  • Configuration file: babel.config.js

Webpack is a very powerful module packaging tool, here only a part of the functionality, there is a chance to continue to update ~