Webpack - Handlebars, Caching, Minification, Mangling

Handlebars

.hbs

// $ npm i handlebars -D
// $ npm i handlebars-loader -D

// template.hbs에 <meta> 태그 삭제
// template.hbs
<title>
  Webpack {{htmlWebpackPlugin.options.title}}
</title>


// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  extry : './index.js',
  output : {
    filename: 'bundle.js',
    path : path.resolve(__dirname, 'dist')
  },
  modules : {
    rules : [
      {
        test : /\.css$/i,
        use : [
          {
            loader : 'style-loader',
            options : {
              injectType : 'singletonStyleTag'
            }
          },
            loader : 'css-loader',
            options : {
              modules : true
            }
          }
          ]
      },
        {
  	       test : /\.hbs$/,
  	       use : ['handlebars-loader']
        }
      ]
  },
  // template.html을 template.hbs로 수정
  plugins : [
      title : 'Webpack',
      template : './template.html',
      meta : {
    			viewport: 'width=device-width, initial-scale=1.0'
    })
    ],
  mode : 'none'
}

// $ npm run build
// dist/index.html title 수정되었는지 확인

Caching

시간, 비용 최소화시키기 위해 캐싱 사용(리소스 복사본)
서버보다 가까운 위치에 데이터를 놓고 클라이언트에 제공

hash의 종류

hash, contenthash, chunckhash

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  extry : './index.js',
  output : {
    // filename: 'bundle.js',
    filename : 'bundle..[hash].js',
    path : path.resolve(__dirname, 'dist')
  },
  modules : {
    rules : [
      {
        test : /\.css$/i,
        use : [
          {
            loader : 'style-loader',
            options : {
              injectType : 'singletonStyleTag'
            }
          },
            loader : 'css-loader',
            options : {
              modules : true
            }
          }
          ]
      },
        {
  	       test : /\.hbs$/,
  	       use : ['handlebars-loader']
        }
      ]
  },
  // template.html을 template.hbs로 수정
  plugins : [
      title : 'Webpack',
      template : './template.html',
      meta : {
    			viewport: 'width=device-width, initial-scale=1.0'
    })
    ],
  mode : 'none'
}

// $ npm run build
// 바뀐 해쉬값이 적용된 파일이 계속 누적되어 지저분해진다.
// $ npm install clean-webpack-plugin -D
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  extry : './index.js',
  output : {
    filename: 'bundle.js',
    path : path.resolve(__dirname, 'dist')
  },
  modules : {
    rules : [
      {
        test : /\.css$/i,
        use : [
          {
            loader : 'style-loader',
            options : {
              injectType : 'singletonStyleTag'
            }
          },
            loader : 'css-loader',
            options : {
              modules : true
            }
          }
          ]
      },
        {
  	       test : /\.hbs$/,
  	       use : ['handlebars-loader']
        }
      ]
  },
  // template.html을 template.hbs로 수정
  plugins : [
      title : 'Webpack',
      template : './template.html',
      meta : {
    			viewport: 'width=device-width, initial-scale=1.0'
    }),
      new CleanWebpackPlugin()
    ],
  mode : 'none'
}

// $ npm run build
// dist 파일이 깔끔하게 정리되었는지 확인

Minification & Mangling

Module을 사용하지 않고 직접 최적화 시키기
Minification : 소스코드 리소스 최적화 시키기, 주석, console.log 제거. 어플리케이션이 동작하기 위해 필요한 소스만 남긴다.
Mangling : 난독화 과정

// webpack github - option 참고
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  extry : './index.js',
  output : {
    // filename: 'bundle.js',
    filename : 'bundle..[hash].js',
    path : path.resolve(__dirname, 'dist')
  },
  modules : {
    rules : [
      {
        test : /\.css$/i,
        use : [
          {
            loader : 'style-loader',
            options : {
              injectType : 'singletonStyleTag'
            }
          },
            loader : 'css-loader',
            options : {
              modules : true
            }
          }
          ]
      },
        {
  	       test : /\.hbs$/,
  	       use : ['handlebars-loader']
        }
      ]
  },
  // template.html을 template.hbs로 수정
  plugins : [
      title : 'Webpack',
      template : './template.html',
      meta : {
    			viewport: 'width=device-width, initial-scale=1.0'
    })
    ],
  mode : 'none'
}

// $ npm run build
// 바뀐 해쉬값이 적용된 파일이 계속 누적되어 지저분해진다.
// $ npm install clean-webpack-plugin -D
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  extry : './index.js',
  output : {
    filename: 'bundle.js',
    path : path.resolve(__dirname, 'dist')
  },
  modules : {
    rules : [
      {
        test : /\.css$/i,
        use : [
          {
            loader : 'style-loader',
            options : {
              injectType : 'singletonStyleTag'
            }
          },
            loader : 'css-loader',
            options : {
              modules : true
            }
          }
          ]
      },
        {
  	       test : /\.hbs$/,
  	       use : ['handlebars-loader']
        }
      ]
  },
  // template.html을 template.hbs로 수정
  plugins : [
      title : 'Webpack',
      template : './template.html',
      meta : {
    			viewport: 'width=device-width, initial-scale=1.0'
    },
    minify : {
      callapseWhiteSpace : true,
      useShortDoctype : true,
      removeScriptTypeAttribute : true
    }
}),
      new CleanWebpackPlugin()
    ],
  mode : 'none'
}

// $ npm run build 
// dist/index.html 파일 확인

// CSS 최적화 - cssnano
// $ npm i cssnano optimize-css-assets-webpack-plugin -D
// Github Example 참고

// JS 최적화
// $ npm i terser-webpack-plugin -D