1, the picture

file-loader url-loader

Url-loader internally relies on file-loader

npm install file-loader
Copy the code
      // file-loader processes images
      {
        test: /\.(png|jpe? g|gif|webp)$/,
        use: {
          loader: 'file-loader'.// Use url-loader (file-loader)
          options: {
            name: '[name].[hash].[ext]'.outputPath: 'images'.// Image output position
            publicPath: '.. /images/'.// Image reference location, image path + image name
            // limit: 1024 * 11, // unit KB for url-loader}},},Copy the code

The [ext] placeholder represents the image suffix

use

Import PIC from '.. / img / 1. JPG '. The console log (PIC) / / output is url images / 1.53 e7 a457c334c930ff8ebf22ac397169. JPGCopy the code

2. Clean-webpack-plugin Cleans dist files

How to use

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// ....

  plugins: [
    //...
    new CleanWebpackPlugin(),
  ],
Copy the code

About the cache

The first time a browser client accesses a static resource link, the client has a cached file
2. To clear Chrome’s cache, follow these steps:

Open Chrome and press Ctrl+Shift+Delete to open the Clear Browsing data page. Select clear cache and click Clear Browsing Data.

Or click on the browser’s wrench -> Options -> Advanced Options -> Privacy Settings to view the data clearly and repeat the above steps.

Extracurricular development:

www.cnblogs.com/lguow/p/106…

Blog.csdn.net/wml00000/ar…

About hash (resource files followed by hash are fingerprint policies)

Set the cache

// server.js const http = require('http') const fs = require('fs') http.createServer(function (request, response) { console.log('request come', request.url) if (request.url === '/') { const html = fs.readFileSync('test.html', 'utf8') response.writeHead(200, { 'Content-Type': 'text/html' }) response.end(html) } if (request.url === '/script.js') { response.writeHead(200, { 'Content-Type': 'text/javascript', 'Cache-Control': 'max-age=200' // browser cache time}) response.end('console.log("script loaded twice")')}}).listen(8888)Copy the code

no-cache

Do not read from cache

‘cache-control ‘: ‘max-age=2000000, no-cache’, // with no-cache, the browser must verify to the server that it will not read from the Cache even if it is not expired.

No-store If no-store is set, even if the server sends a cache header, the browser ignores any cache information and directly requests the latest data without any cache header

3. Understand the fingerprint strategy

Hash:

The js for the entry is the entire runtime environment

Chunkhash: For Chunks

Contenthash: Indicates the content of a single file

For multi-page applications

entry: { 
  index: './src/index.js',
  list: './src/list.js',
}
Copy the code
// new HtmlWebpackPlugin({template: './index.html', filename: 'index.html', chunks: ['index']}), new HtmlWebpackPlugin({template: './list.html', filename: 'list.html', chunks: ['list']}), // with placeholders it will be named htmlWebPackplugin_0/1.htmlCopy the code