Webpack 사용 방법 - Webpack 사용해서 Three.js boilerplate 만들기 03

대략 필요한것들 설치하고 config파일 작성해주었으니 Three.js 용 boilerplate으로 쓸 수 있게 몇가지 설정을 더 해주고 gitgub에 배포해보겠습니다.

Dev-server 이용

Dev server 이용해서 개발용 빌드 빠르게 할 수 있도록 설정을 바꿔보겠습니다.

webpack-dev-server 공식 문서 참조

package.json 파일에서 개발용으로 작성했던 스크립트인 "start" 에 webpack-dev-server --config webpack.config.js 으로 작성을 변경해줍니다.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.prod.js",
    "start": "webpack-dev-server --config webpack.config.js"

그리고 config 파일에 아래 코드를 추가해주고

  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
    },
    compress: true,
    port: 9000,
  },

아래 명령어를 통해 개발용 서버를 띄워볼게요

npm run start

그럼 터미널에 이렇게 뜨면서 서버 주소가 뜨는걸 볼 수 있는데

들어가서 보면 잘 작동하고 있는게 보입니다.

로더 설치

현재 css 로더만 설치해둔 상태인데 three.js 개발중에는 이미지는 물론 glsl 등의 포맷 파일도 사용하게 될것입니다. 로더를 더 설치해주겠습니다.

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");

module.exports = {
  mode: "development",
  entry: "./source/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "index_bundle.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./source/index.html",
      filename: "./index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
    },
    compress: true,
    port: 9000,
  },
};

file-loader 설치

공식 문서 참조

file-loader란 CSS에서 url() 함수에 지정된 파일명을 file-loader를 통해 파일을 복사해 특정 폴더에 복사해주는 로더입니다.

설치 명령어:

npm install file-loader --save-dev

제이슨 파일을 보면 디펜던시에 이렇게 추가된것이 보입니다.

 "devDependencies": {
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",

config 파일의 ruler에 설정을 추가해줍시다. png, jpeg,gif 등으로 끝나는 파일들을 file-loader를 통해 불러오고 아웃풋 이름을 지정해주는 코드입니다.

 {
        test: /\.(png|jpe?g|gif)$/i,
        loader: "file-loader",
        options: {
          name: "[path][name].[ext]"
        },
      },

테스트로 이미지 파일 하나를 static 경로를 추가해 넣어주고 js 파일에서 불러와볼게요.

import img from '../static/img.png';

그리고 빌드를 한번 해보겠습니다. 이렇게 퍼블릭 폴더에 담겼네요.

그리고 저는 커스텀 shader를 종종 만들기 때문에 glsl 파일을 처리해줄 로더도 설치 해줍니다.

npm install --save-dev webpack-glsl-loader

그리고 config.js 파일의 rules에도 추가해줍니다.

     {
        test: /\.glsl$/,
        loader: 'webpack-glsl'
      }

entry 파일에서의 임포트 경로

import vertexGlsl from './shader/vertex.glsl'
import fragmentGlsl from './shader/fragment.glsl'

최적화 방법

흠 build를 했더니 이런 경고를 마주쳤습니다.

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.

일단 알아보니 번들링 결과물이 비효율적으로 큰것인데 이를 위해서 최적화를 해주어야합니다. 방법은 굉장히 여러가지가 있는데 아직 공부가 덜 된 관계로 일단 최적화는 더 알아보도록 해야겠습니다.

1. clean webpack 사용

npm install --save-dev clean-webpack-plugin

By default, this plugin will remove all files inside webpack's output.path directory, as well as all unused webpack assets after every successful rebuild.

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

const webpackConfig = {
    plugins: [
        /**
         * All files inside webpack's output.path directory will be removed once, but the
         * directory itself will not be. If using webpack 4+'s default configuration,
         * everything under <PROJECT_DIR>/dist/ will be removed.
         * Use cleanOnceBeforeBuildPatterns to override this behavior.
         *
         * During rebuilds, all webpack assets that are not used anymore
         * will be removed automatically.
         *
         * See `Options and Defaults` for information
         */
        new CleanWebpackPlugin(),
    ],
};

module.exports = webpackConfig;

2. 이미지 축소
3. 그 외 플러그인 사용하기
   참고