[WebPack] 캐싱

웹팩으로 빌드한 결과물이 변경되지 않았으면 계속 캐싱 상태로 남겨서,

별도의 HTTP 요청이 발생하지 않도록 하는 기법에 대해서 정리.

 

[contenthash]는 변경된 내용이 있을경우 해쉬코드로 알아서 변경되니,

사용자는 새로운 버전을 항상 받을 수 밖에 없음 캐쉬 지울필요도 없고 개꿀

 

webpack.config.js

  const path = require('path');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: './src/index.js',
    plugins: [
      // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
       title: 'Caching',
      }),
    ],
    output: {
-     filename: 'bundle.js',
+     filename: '[name].[contenthash].js',
      path: path.resolve(__dirname, 'dist'),
    },
  };

 

파일 내용이 변경되지 않더라도 [chunkhash] 값이 변경되며 웹팩에서 빌드 시 항상

초기화 코드(runtime or manifest)를 포함하기 때문

 

웹팩으로 빌드를 할 때 마다 발생하는 초기화 코드를 CommonsChunkPlugin로 분리할 수 있다.