1, Understanding the webpack loader

1. Role of webpack loader
In the actual development process, webpack can only be packaged and processed by default js suffix end module, other non For modules ending in js suffix, webpack cannot handle them by default. You need to call the loader loader to package normally, otherwise an error will be reported!

less loader can be packaged less related files
sass loader can be packaged sass related files
url loader can package and process files related to url path in css

2. Calling process of loader

2, Basic usage of loader in webpack

1. Package css files
(1) Run the NPM I style loader css loader - D command to install the loader that handles css files
(2) In webpack config. In the module - > rules array of JS, add the loader rule as follows:

 module: {
        rules: [
            //test indicates the matching file type, use indicates the corresponding loader to be called, and use must be in order!!!
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }

If there are problems in the configuration process, most of them are caused by the configuration version. Delete the original version and try the version below.

For example, an error occurred while packaging css files
Using the command: NPM uninstall CSS loader style loader
Reuse NPM I style- loader@0.23.1 css- loader@2.1.0 -D is solved!

2. Package and process less files
(1) Run the NPM I less loader less - D command [provided that (1) in 1 is executed]
(2) In webpack config. In the module - > rules array of JS, add the loader rule as follows:

 module: {
        rules: [
            { test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] }
        ]
    }

3. Package scss files
(1) Run the NPM I sass loader node sass - D command
(2) In webpack config. In the module - > rules array of JS, add the loader rule as follows:

 module: {
        rules: [
            { test: /\.scss$/, use: ['style-loader', 'css-loader','sass-loader'] }
        ]
    }

4. Configure postCSS to automatically add css compatible prefixes
(1) Run the NPM I postcss loader autoprefixer - D command
(2) Create a configuration file for postcss in the project root directory config. JS and initialize as follows:

  const autoprefixer = require('autoprefixer')
    module.exports = {
        plugins: [autoprefixer]
    }

(3) In webpack config. In the module - > rules array of css, modify the loader rule of css as follows:

 { test: /\.css$/, use: ['style-loader', 'css-loader','postcss-loader'] }

5. Package the pictures and font files in the style sheet
(1) Run the NPM I URL loader file loader - D command
(2) In webpack config. In the module - > rules array of JS, add the loader rule as follows:

   module: {
        rules: [
            //Limit is used to specify the size of the picture in bytes. Only pictures smaller than the limit size will be converted to base64 pictures
             { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=109,677' },
        ]
    }

6. Package and process the high-level syntax in js files
(1) Install babel converter related packages: NPM I babel loader @ babel / core @ babel / runtime - D
(2) Install packages related to babel increasingly checked files: NPM I @ babel / preset env @ babel / piugin transform runtime @ babel / plugin proposed class properties - D
(3) In the project root directory, create the babel configuration file babel config. JS and initialize the basic configuration as follows:

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

(4) In webpack config. In the module - > rules array of JS, add the loader rule as follows:

//exclude is an exclusion item, indicating that Babel loader does not need to process js files in node modules
  { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }