Commonly used loader

Less – loader, sass – loader

Sass-loader and less-loader package sASS and less into output CSS files

css-loader

Load a CSS file into js as a CommonJS module, which contains style strings.

style-loader

Create a style tag and insert the js style resource into the head to take effect

module.exports = {
    module: {
        rules: [
          // Details loader configuration
          // Different files must be processed by different Loaders
          {
            // Which files to match
            test: /\.css$/.// Which loaders are used for processing
            use: [
              // The sequence of loader execution in the use array is from right to left and from bottom to top
              // Create a style tag and insert the js style resource into the head
              'style-loader'.// Change the CSS file into a commonJS module and load the js file with the style string
              'css-loader'] {},test: /\.less$/,
            use: [
              'style-loader'.'css-loader'.// Compile less files into CSS files
              Less-loader and less need to be downloaded
              'less-loader'}]}}Copy the code

Common plug-in

The mini – CSS – extract – the plugin plug-in

Replace the style – loader. Function: Extract CSS from JS into a separate file

The use of MiniCssExtractPlugin

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    module: {
        rules: [{test: /\.css$/,
            use: [
              // Create a style tag and place the style in
              // 'style-loader', 
              // This loader replaces style-loader. Function: Extract CSS from JS into a separate file
              MiniCssExtractPlugin.loader,
              // Integrate CSS files into js files
              'css-loader']]}},plugins: [
        new MiniCssExtractPlugin({
          // Rename the output CSS file
          filename: 'css/built.css'}}})]Copy the code

CSS compression

OptimizeCssAssetsWebpackPlugin

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
  module: {
    rules: [{test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'postcss-loader'.options: {
              ident: 'postcss'.plugins: () = > [
                // PostCSS plugin
                require('postcss-preset-env')()]}}]}]},plugins: [
    / / compress CSS
    new OptimizeCssAssetsWebpackPlugin()
  ]
};
Copy the code

CSS Compatibility

CSS compatibility processing: postCSS -> postCSs-loader postCSs-preset -env

Help Postcss find the configuration in package.json in Browserslist and load the specified CSS compatibility style through the configuration

Package. The json configuration

"browserslist": {
  // Development environment --> Set the node environment variable: process.env.node_env = development
  "development": [
    "last 1 chrome version"."last 1 firefox version"."last 1 safari version"].// Production environment: The default is production environment
  "production": [
    "0.2%" >."not dead"."not op_mini all"]}Copy the code

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    module: {
        rules: [{test: /\.css$/,
            use: [
              // Create a style tag and place the style in
              // 'style-loader', 
              // This loader replaces style-loader. Function: Extract CSS from JS into a separate file
              MiniCssExtractPlugin.loader,
              // Integrate CSS files into js files
              'css-loader',
              {
                loader: 'postcss-loader'.options: {
                  ident: 'postcss'.plugins: () = > [
                    // PostCSS plugin
                    require('postcss-preset-env')()]}}]}]},plugins: [
        new MiniCssExtractPlugin({
          // Rename the output CSS file
          filename: 'css/built.css'}}})]Copy the code