webpack bundle되는 파일 크기 줄이기 - boostcamp-2020/Project15-A-Client-Based-Formula-Editor GitHub Wiki

webpack bundle 파일 줄이기

1. webpack에서 파일을 줄이는 것은 많이 어렵다고 생각합니다.
2. 이를 해결하기 위해서 webpack.config.js의 plugin을 사용해서 bundle되는 파일의 크기를 줄일 수 있습니다.
3. 먼저 bundle 파일이 압축되기 전의 상황을 살펴보겠습니다.
4. bundle 파일의 크기를 보면 1.74MB입니다.

• 하지만 아래의 소스를 추가하면 bundle되는 소스의 크기를 줄일 수 있다는 장점이 있습니다.

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
new UglifyJsPlugin(),

• 전체 webpack 소스입니다.

webpack.config.js

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const webpack = require('webpack');
module.exports = {
  entry:"./src/index",
  output:{
      filename:"bundle.js",
      path:path.resolve(__dirname+"/build")
  },
  mode:"none",
  resolve:{
      extensions:['.tsx', '.ts','.js','.jsx'],
      alias:{
          "@src" : path.resolve(__dirname, 'src')
      }
  },
  module:{
      rules:[
          {
              test:/\.html$/,
              use:[
                  {
                      loader:"html-loader",
                      options:{minimize:false}
                  }
              ]
          },
          {
              test: /\.jsx?$/,
              use: ['babel-loader'],
              exclude: "/node_modules",
          },
          // font loader 
          {
              test:/\.(woff|woff2|eot|ttf|otf)$/,
              loader:'flie-loader',
          },
          {
              test:/\.tsx?$/,
              use:'ts-loader',
              exclude:"/node_modules/",
          },
      ],
  },
  devServer:{
      contentBase: path.resolve(__dirname,'build'),
      port:8000,
  },
  plugins: [
      new HtmlWebPackPlugin({
        template: './public/index.html', // public/index.html 파일을 읽는다.
        filename: 'index.html' // output으로 출력할 파일은 index.html 이다.
      }),
      new UglifyJsPlugin(),  // 로더로 처리된 자바스크립트 결과물을 난독화하는 프로그램
      new CleanWebpackPlugin({
          cleanAfterEveryBuildPatterns: ['build']
      }),
      new webpack.BannerPlugin({
          banner: `build time : ${new Date().toLocaleTimeString()}`
      })
   ] 
}