Core usage of source map, oneOf and cache in Webpack

What is a source map?

Source map is a mapping technology that provides post build code to source code. Errors in source code can be tracked according to this mapping.

Method for setting source map

We just need to add a configuration item in webpack.config.js.

devtool: "source-map"

Select type

  • Development environment: Eval source map
  • Production environment: source map

What is oneOf?

Sometimes, we write a lot of loaders in the webpack configuration, which means that a file must be filtered by multiple loaders, which is very redundant in some cases. Therefore, we want to match only one loader, which is why we need oneOf.

How to use oneOf?

module: {
    rules: [
      {
        // Perform an Eslint check
        test: /\.js$/,
        // Exclude other files
        exclude: /node_modules/,
        // Priority implementation
        enforce: 'pre',
        loader: 'eslint-loader',
        options: {
          // Set automatic repair
          fix: true
        }
      },
      {
        oneOf: [
          {
            // Handling CSS
            test: /\.css$/,
            use: [...commonCssLoader]
          },
          {
            test: /\.less$/,
            use: [...commonCssLoader, 'less-loader']
          },
          
          {
            // Handle js compatibility
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: [
                ['@babel/preset-env',
                  {
                    useBuiltIns: 'usage',
                    corejs: { version: 3 },
                    targets: {
                      chrome: '60',
                      firefox: '50'
                    }
                  }
                ]
              ]
            }
          },
          {
            // Package picture resources
            test: /\.(jpg|png|gif)/,
            loader: 'url-loader',
            options: {
              limit: 8 * 1024,
              name: '[hash:10].[ext]',
              outputPath: 'imgs',
              esModule: false
            }
          },
          {
            // Processing image resources in HTML
            test: /\.html$/,
            loader: 'html-loader'
          },
          {
            // Processing other resources
            exclude: /\.(js|css|less|html|jpg|png|gif)/,
            loader: 'file-loader',
            options: {
              outputPath: 'media'
            }
          }
        ]
      }
    ]
  }

It should be noted that in all loaders wrapped by oneOf, there cannot be two configurations to process files of the same type. If there are two loaders, you can extract one of them, just like the processing method above.

cache

The reason why caching is needed is that, taking babel as an example, compiling a project will waste resources if the whole project is recompiled every time, because we may only make minor changes to the project, which is why caching is needed.

Babel loader enable cache

Just add a configuration item to the options of Babel loader.

{
    // Handle js compatibility
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
      presets: [
        ['@babel/preset-env',
          {
            useBuiltIns: 'usage',
            corejs: { version: 3 },
            targets: {
              chrome: '60',
              firefox: '50'
            }
          }
        ]
      ],
      cacheDirectory: true
    }
  }

File resource cache

hash configuration

Each time a webpack is packaged, a different file name is generated for the file, so that the path name for the introduction of static resources will also change. Therefore, once it is repackaged, even the strong cache can sense the latest changes, because the file name has changed.

  • Modify the hash suffix of js file
output: {
    filename: 'js/built.[hash:10].js',
    path: resolve(__dirname, 'build')
  }
  • Modify the hash suffix of CSS file
new MiniCssExtractPlugin({
  filename: 'css/built.[hash:10].css'
})

Note: one disadvantage of the above method is that once repackaged, all caches will be invalidated, even if only one file is changed.

Contenthash (recommended)

contenthash generates a hash value according to the contents of the file. The hash values of different files must be different.

  • Processing JS files
output: {
    filename: 'js/built.[contenthash:10].js',
    path: resolve(__dirname, 'build')
  }
  • Processing CSS files
new MiniCssExtractPlugin({
  filename: 'css/built.[contenthash:10].css'
})

Tags: Front-end css3 Webpack html

Posted on Sat, 27 Nov 2021 19:14:02 -0500 by mrmachoman