Webpack5 learning – Resource module types and common plugins

asset module type

Before WebPack5, we need to use some loaders to load file resources, such as raw-loader, URl-loader, and file-loader

After Webpack5, we can use the Asset Module type directly instead of the loade above

{
  test: /\.(png|jpe? g|gif|svg)/,
  type: 'asset/inline'
}
Copy the code

{
  test: /\.(png|jpe? g|gif|svg)/,
  type: 'asset/resource'.generator: {
    filename: 'imgs/[name].[hash:5][ext]' // Tips: There is a bit of ext, which is different from file-loader}}Copy the code

{
  test: /\.(png|jpe? g|gif|svg)/,
    type: 'asset'.generator: {
      filename: 'imgs/[name].[hash:5][ext]'
    },

    parser: { // This is the same as the limit configuration item for file-loader
      dataUrlCondition: {
        maxSize: 100 * 1024}}}Copy the code

In addition to the above configuration, there is another way to globally configure the location and name of the resource

output: { // Set this in the top output
  path: path.resolve(__dirname, 'dist'),
  filename: 'main.js'.// This is a global configuration and usually requires a separate setting for the specific resource
  // Local and global exist simultaneously. The local configuration overrides the global configuration
  assetModuleFilename: 'imgs/[name].[hash:5][ext]' 
}
Copy the code

raw-loader

The content of resources is parsed into strings and then introduced. It is generally used when TXT and other format files are introduced into the module

#The installation
$ npm i raw-loader -D
Copy the code

{
  test: /\.txt/,
  loader: 'raw-loader'
}
Copy the code

Font package

For other resources, such as video, audio, and font files, you can use file-Loader directly to package them into links or use asset/ Resource directly

{
  test: /\.eot|ttf|woff2? /,
    type: 'asset/resource'.generator: {
      filename: 'font/[name].[hash:6][ext]'}}Copy the code

The plug-in

Loader is used to convert a specific module type

Plugins can be used to perform a wider range of tasks, such as packaging optimization, resource management, and environment variable injection

CleanWebpackPlugin

During the previous exercise, the dist folder needed to be manually deleted each time some configuration changes were made and repackaged

This can be done automatically with the help of a plug-in, CleanWebpackPlugin

#The installation
$ npm i clean-webpack-plugin -D
Copy the code

// The configuration section
/* 1. The import is an object, so you can use destruct to retrieve 2. Plugins are more or less classes, so import names with uppercase letters, and use new to create the corresponding instance object */
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

/ /... Other configurations are omitted here

module.exports = {
  plugins: [
    new CleanWebpackPlugin()
  ]
}
Copy the code

HtmlWebpackPlugin

In the previous exercise, our HTML file was written in the root directory, and the dist folder that was finally packaged had no index.html file

When you deploy a project, you also need an entry file, index.html

Second, our packaged JS files should also be imported automatically in index.html, rather than manually, because the JS names are different for each project

It is also possible to subcontract the packaged files, so manual introduction is clearly not appropriate

At this point we need a plug-in to help us do this automatically, namely HtmlWebpackPlugin

#The installation
$ npm i html-webpack-plugin -d
Copy the code

// js configuration -- part
const HtmlWebpakcPlugin = require('html-webpack-plugin')

/ /... Partial configuration omission
plugins: [
  new HtmlWebpakcPlugin() // If the HTML template is not set, the built-in default HTML template (default_index.ejs) is used.
]
Copy the code

Sometimes we want to add something special to our modules

• For example, add a noscript tag to prompt the user when his JavaScript is turned off
• For example, when developing a Vue or React project, we need a root tag that can mount subsequent components

// Customize the configuration
const HtmlWebpakcPlugin = require('html-webpack-plugin')

/ /...

plugins: [
  new HtmlWebpakcPlugin({
    title: 'webpack tutorial'.// This configuration item will be added to options
    // In general, we will store a public global static resource in the root public folder such as index.html,favicon.ico
    template: './public/index.html' // This configuration item will be used as an HTML template})]Copy the code

index.html

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <! The template is written using EJS by default. The value of title is the value of title in the passed configuration. The default value is Webpack App -->
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

</body>
</html>
Copy the code

DefinePlugin

DefinePlugin allows you to create configured global constants at compile time and is a built-in webPack plugin (no separate installation required)

// Configure -- part
const { DefinePlugin } =  require('webpack')

// ...

plugins: [
  new DefinePlugin({
    // Note that the value is taken out of the quotation mark and used as a value.
    // So './' will be treated as./, so it will report an error, so you need to write './'.
    BASE_URL: "'/'"})]Copy the code

At this point we can use the global variables we defined in DefinePlugin globally, that is, anywhere

For example, in the index. HTML template

<link rel="icon" href="<%= BASE_URL %>favicon.ico">
Copy the code

CopyWebpackPlugin

If we put some files in a public directory, we need to copy that directory to the dist folder at compile time

This copying function can be done using CopyWebpackPlugin

#The installation
$ npm install copy-webpack-plugin -D
Copy the code

// Configure -- part
const CopyWebpackPlugin = require('copy-webpack-plugin')

new CopyWebpackPlugin({
  patterns: [{from: 'public'.// to: 'dist', ===> to can be omitted. The default value is the value of the folder in which the code is stored after packaging, i.e. output.path

      globOptions: { // Options for each pattern
        ignore: [
          // If you want to ignore the file resources under public, you need to prefix them with **/.
          // The CopyWebpackPlugin plugin does not effectively help us ignore the index.html file when we write it directly
          '**/index.html'.// There is no need to copy, because we have already generated index.html using HtmlWebpackPlugin
          '**/.DS_Store' // A file that is automatically generated in the MAC directory and describes the information about the current folder]}}]})Copy the code