loader in webpack

1.loader overview

In the actual development process, webpack can only package modules ending in. js suffix by default. Other non. js modules cannot be processed by webpack by default. You need to call the loader loader to package normally, otherwise an error will be reported
The role of loader loader: assist webpack to package and process specific file modules. For example:

• css loader packages and processes. css related files
• less loader can package and process. less related files
• Babel loader can package and handle Advanced js syntax that webpack cannot handle

1.1 calling process of loader

2. Common loader download configurations

2.1 package css files
Run NPM I style- loader@3.0.0 css- loader@5.2.6 -D
Run NPM I less-loader@10.0.1 less@4.1.1 -D (why is there no less in the configuration file rules? Because we want to use less loader, but less loader depends on less, so we need to download less)
2.2 package the url path and related files of the pictures in the style sheet
Run NPM I url-loader@4.1.1 file- loader@6.2.0 -D (file loader is the built-in dependency of URL loader as above)
Add the loader rule to the module - > rules array in webpack.config.js as follows:

module.exports={
   module:{
   rules:{
      {test:/\.css$/, ues:['style-loader','css-loader']},
      {test:/\.less$/, ues:['style-loader','css-loader','less-loader']},
      {test:/\.jpg|png|gif$/, ues:'url-loader?limit=22229'} 
    }
   }
}

Where test represents the matching file type, and use represents the corresponding loader to be called
be careful:

• The order of loaders specified in the use array is fixed, and the calling order of multiple loaders is from back to front
• loader ? The following parameter limit is used to specify the size of the picture. The unit is byte. Only pictures with a size of < = limit will be converted to base64 format

2.3 high level syntax in packaging js files

Webpack can only package and process part of js syntax. For those advanced js syntax that webpack cannot handle, it needs to be packaged with the help of Babel loader, such as es6 syntax such as let

Run npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D (the second is built-in dependency, and the third is used by the plug-in to resolve the decorator)
In the module - > rules array of webpack.config.js, add the loader rule as follows:

//Exclude means to exclude and remove the js files in the node_modules directory, because the js in the third-party package is compatible and does not need to be managed
module.exports={
   module:{
   rules:{
      {test:/\.js$/, ues:'babel-loader',exclude:/node_modules/},
    }
   }
}

Create a configuration file named babel.config.js in the project root directory, and define the configuration items of Babel as follows:

module.exports={ //Declare the plug-ins available for babel, load the plug-in before babel translation, and use the plug-in to convert the syntax of the decorator
   plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]

   }
}

3.webpack packaging and publishing

3.1 release

Under the scripts node of package.json file, add the build command as follows:

    "scripts":{
     "dev":"webpack serve", //In the development environment, run the dev command
     "build":"webpack --mode production" //When the project is published, run the build command
    }
    //When we package and run npm run build, a dist folder will be automatically generated, which is the published file

– mode is a parameter item used to specify the operation mode of webpack. Production represents the production environment and will compress the code and optimize the performance of the files generated by packaging
Note: the parameter item specified by – mode overrides the model option in webpack.config.js

3.2 optimization after release

Because the dist file generated after publishing is messy, it can be optimized to put different types of files in different folders

  //Processing js
   module.exports={
  mode:'development' ,
  entry:path.join( __dirname,'./src/index.js' )
  output:{
      path:path.join(__dirname,'./dist'),//Storage path of output file
      //Explicitly tell webpack to store the generated bundle.js file in the JS subdirectory under dist directory
      filename:'js/bundle.js' //Name of the output file 
  }
}
----------
 //Processing pictures
 
 module.exports={
     module:{
     rules:{
     //outputPath=images specifies that the image format is placed in the images folder, and multiple parameters are divided by the & symbol
       {test:/\.jpg|png|gif$/, ues:'url-loader?limit=22229&outputPath=images'} 
     }
     }
  }

3.2.2 automatically clean up old files in dist directory

Because it is troublesome to manually clean up the old dist files every time you modify and repackage and publish, you can install and configure the clean webpack plugin to operate in webpack.config.js

 //1. Install the plug-in
 npm i clean-webpack-plugin@3.0.0 -D
 //2. Import the plug-in as needed. After obtaining the constructor of the plug-in, create the instance object of the plug-in
 const { CleanWebpackPlugin }=require ('clean-webpack-plugin')
 const cleanPlugin=new CleanWebpackPlugin()
 //3. Mount the created cleanPlugin plug-in instance object to the plugins node
 plugins:[htmlPlugin,cleanPlugin]

3.3 source Map

The source map generated by default in the development environment records the location of the generated code. Source map is an information file that stores location information, that is, the source map file stores the code after compression confusion, which corresponds to the location before conversion
With it, when an error is reported, the line number of the error code displayed on the console is the line number of the source file rather than the converted code, which is convenient for us to debug

//Under the webpack.config.js file
  module.exports={
     mode:'development',
      //Devtool: 'Eval source map' will expose the source code when it is released
     //The source map generated by this option can ensure that the number of lines reporting errors is consistent with the number of lines of the source code, and will not expose that the source map is closed when the source code is online
     devtool:'nosources-source-map'
  }

3.4 configuration path@

Configure in webpack.config.js

  //Create resolve at the same level as module plugins devServer
  resolve: {
   alias:{
      '@': path.join(__dirname,'./src/')
   }
   
  }