This is my participation 8 The fourth of the yuegengwen challenge 22 God , Check out the activity details ：8 Yuegengwen challenge

Handle css It's all for loader To carry out , The specific use is as follows ：

1、 Handle CSS

css-loader： distinguish import and url() such as import/require(), take css The file is loaded into... As a string common.js Module
style-loader: establish style label , And will js Integrate style resources in , And insert into head In the label

module: {// modular 
    rules: [// The rules 
        {test: /\.css$/, use: [{
                loader:'style-loader',
                options: {}
            }, 'css-loader']}
    ]
},
 Copy code 

option There are many configuration items in it , You can look it up in the document

2、 Handle less

Use less-loader To precompile

{
    test: /\.less$/, use: [
        {
            loader: 'style-loader',
            options: {}
        },
        'css-loader',
        {
            loader: "less-loader"
        }],
}
 Copy code 

3、 Integrate CSS, Extract into a separate file

After packaging ,css Will be integrated into js In the document , Exists as a string ;
So we need to put css Integrate into a css file

Use mini-css-extract-plugin plug-in unit Yes css、less To configure

{
    test: /\.css$/, use: [
        //  Instead of style-loader, extract js Medium css In a separate file 
        miniCssExtractPlugin.loader
        , 'css-loader']
},
{
    test: /\.less$/, use: [
        //  Instead of style-loader, extract js Medium css In a separate file 
       miniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: "less-loader"
        }],
}

 Copy code 

new miniCssExtractPlugin({
    // Specify the output file directory and file name 
    filename:'css/built.css'
}),

 Copy code 

css Compatibility processing

Use postcss-loader postcss-preset-env help postcss find packa.json in browserlist The configuration inside , Load the specified by configuration css Compatible styles
package.json To configure Can be in github Search on browserslist, There are detailed configurations

"browserslist": {
// The production environment has two , But the production environment is enabled by default , So you have to set up node Environment variables to configure the development environment 
  "development": [
    "last 1 chrome version", // Compatible with the latest Google browser version 
    "last 1 firefox version",
    "last 1 safasi version"

  ],
  "production": [
    ">0.2%", // compatible %99.8 Browser 
    "not head",// But don't use a dead browser 
    "not op_mini all"
  ]
}
 Copy code 

stay webpackp Configuration in profile node Environment variable to start the development environment
process.env.NODE_ENV = 'development';

webpack.config,js Configuration of

{
    test: /\.css$/, use: [
        //  Instead of style-loader, extract js Medium css In a separate file 
        miniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: "postcss-loader",
            options: {
                ident:'postcss',
                plugins:()=>[
                // postcss Plug in for 
                    require('postcss-preset-env')()
                ]
            }
        }

    ]
}
 Copy code 

Compress CSS

The use of plug-in optimize-css-assets-webpack-plugin
Call directly new optimizeCssAssetsWebpackPlugin()