Quote: For example, the CSS can use autoprefixer toprefix the browser, so we don’t need to add it manually. However, this will also cause a problem. I may only need to add the prefix to some of the applicable browsers. Autoprefixer prefixes all browsers, which leads to an increase in code, so it may or may not be possible toprefix your CSS with autoprefixer, depending on which browser you want to use.

In many scaffold configurations, such as.browserslistrc in vue, browserslist in package.json in react, we see information like this:

>1%
last 2 versions
not dead
Copy the code

It’s all about giving the tools and telling the tools which browsers I’m going to use right now, for example >1%, so the market share of the browser is greater than 1%, so what’s the market share of the browser? The answer is on the Can I Use website.

Another question is how can we share the compatibility conditions of our configuration with CSS compatibility and JS compatibility? For example, we set the condition >1%, not only for CSS to be compatible with browsers with more than 1% market share, but also for JS. If we achieve this compatibility with tools such as Babel, Autoprefixer, how do we get them to share our configuration? The answer is Browserlist, which is a configuration that shares the target browser and node.js versions between different front-end tools

We’ve written all these conditions, what’s the relationship between these conditions? Conditions are union when separated by commas and intersection when separated by Spaces

Where is it written? One way is to write a Browserslist array in the devDependencies category of packge.json, For example,” browserslist”:[“>1%”,”last 2 versions”], bable and autoprefixer will automatically find browserslist; The other way is to create a.Browserslistrc file and write conditions in it, and don’t put conditions in quotes

Then these tools will get the relevant browser information based on our configuration. How? I used a tool called Caniuse-Lite, which uses data from the Caniuse website

PostCss

Postcss is a JavaScript style conversion tool. This tool can help you with some CSS transformations and adaptions, such as automatically adding browser prefixes, but to achieve these functions, you need to use postCSS plug-ins.

How to use it? 1. Look for PostCss extensions in build tools such as PostCSS-Loader in WebPack

NPM install postcsS-loader -d When configuring postcsS-loader, we configure the plug-in to use postcss-preset-env, which turns some modern CSS features into CSS that most browsers recognize, Polyfills are added depending on the target or runtime environment, and autoprefixers are automatically added

npm install postcss-preset-env -D

const path =require('path')
module.exports={
    entry:'./main.js'.output: {'bundle.js'.path:path.resolve(__dirname,'./build)'},module: {rules:[
            {
            test:/\.css$/,
            use:[
            "style-loader"."css-loader",
            {loader:"postcss-loader".options: {postcssOptions: {plugins: ["postcss-preset-env"]}}}]}}Copy the code

file-loader

To process JPG, PNG, etc., we also need to have a corresponding loader:file-loader (remember to install before using). File-loader is used to process the imported file resources and put them in the output folder. If we want to change the name of the packaged file, we can do this:

So our WebPack configuration can say:

const path =require('path')
module.exports={
    entry:'./main.js'.output: {'bundle.js'.path:path.resolve(__dirname,'./build)'},module: {rules:[
            {
            test:/\.(png|jpeg|jpg|gif|svg)$/,
            use:[
            {
                loader:"file-loader".options: {name:"[name].[hash:6].[ext]"
                    [name].[hash:6] is the name of the package file, which is the name of the original file plus a 6-bit hash value}}}}Copy the code

Options :{name:”img/[name].[hash:6].[ext]”} to put the matched files in the same folder: options:{name:”img/[name]

url-loader

Url-loader works the same way as file-Loader, but can convert smaller files to base64 URIs because if all images were converted to Base64, the js files would be very large. It takes a long time to download the js file when the web page loads the packaged JS file, so the smaller images are converted into Base64 and directly embedded in the packaged JS file, and the larger images send HTTP requests separately.

const path =require('path')
module.exports={
    entry:'./main.js'.output: {'bundle.js'.path:path.resolve(__dirname,'./build)'},module: {rules:[
            {
            test:/\.(png|jpeg|jpg|gif|svg)$/,
            use:[
            {
                loader:"url-loader".options: {name:"[name].[hash:6].[ext]".limit:100*1024.// Limit the size of the image to 100K. Convert the image to base64 if the size is below 100K}}}}Copy the code

asset module type

Before Webpack5, we need to use URl-loader and file-loader to load these resources. After Webpack5, we directly use asset Module type to replace these loaders

The asset Module type replaces these loaders by adding four new module types:

  • The asset/ Resource sends a separate file and exports the URL, which was previously implemented by file-loader
  • Asset/Inline exports the data URL of a resource, which was previously implemented using urL-loader
  • Asset /source source code for resources, previously implemented by raw-loader
  • The asset automatically selects between exporting a data URL and sending a separate file, previously by using url-loader and configuring the resource volume

Use:

const path =require('path')
module.exports={
    entry:'./main.js'.output: {'bundle.js'.path:path.resolve(__dirname,'./build)'},module: {rules:[
            {
            test:/\.(png|jpeg|jpg|gif|svg)$/,
            type:"asset/resource".generator: {filename:"img/[name].[hash:6][ext]"}}}Copy the code

Use asset to add volume limits

const path =require('path')
module.exports={
    entry:'./main.js'.output: {'bundle.js'.path:path.resolve(__dirname,'./build)'},module: {rules:[
            {
            test:/\.(png|jpeg|jpg|gif|svg)$/,
            type:"asset/resource".generator: {filename:"img/[name].[hash:6][ext]"},parser: {dataUrlCondition: {maxSize:100*1024  // 100KB image size}}}}Copy the code