[BUNDLING]Webpack Assignment

January 19, 2023

시작

npm init -y

pakage.json 생성

웹팩 설치

npm install -D webpack webpack-cli

npm으로 webpack, webpack-cli를 설치

실제 프로젝트에 사용하지 않기 때문에 devDependency 옵션을 설정

webpack은 번들링을 원하는 파일 먼저 확인, import한 라이브러리나 코드가 있으면 해당 코드도 모두 인식, 하나의 번들 안으로 집합. 여기서 번들링을 원하는 파일 위치 entry, 번들링 결과물 output.

웹팩 config 파일 작성

webpack 설정파일 - webpack.config.js

entry, output 등의 정보 작성

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"), // './dist'의 절대 경로
    filename: "app.bundle.js", // 위 경로 안에 생성될 번들
  },
};

번들링

npx webpack

dist/app.bundle.js 생성

사용자가 프론트엔드 웹 애플리케이션을 빠르게 전달받을 수 있게 코드를 최소화(minifiy)

npm run build 설정

npm run build 스크립트로 번들링 쉽게 하는 법

package-json의 “scripts” 에 “build”: “webpack”, 추가

여기까지 script.js에 대한 번들링

index.html은 아직 <script src="script.js"></script> 이며 이를 app.bundle.js로 바꾸면 app.bundle.js를 참조하게된다.

하지만 아직 css연결 문제와 html 번들이 남아있다.

css 번들에 포함

index.html을 dist에 옯기고

<script src="app.bundle.js"></script> 로 변경

그리고 다시 npm run build를 하면

css를 참조하지 않는다.

css 파일 또한 dist에 옮기면 작동하지만 그건 번들이 아니기 때문에 로더를 활용해야한다.

index.html은 dist 안에 style.css와 script.js는 밖에 있다

index.html은 style.css를 불러오지 못하기 때문에 js파일 안에 css를 담아야한다.

script.js에 require('./style.css') 추가

하지만 Node.js는 그 자체만으로는 CSS를 읽을 수 없어 문법 에러가 발생

style-loader, css-loader

css-loader - CSS를 JS파일 내로 부름
style-loader - 불러온 CSS를 style 요소 내에 담음

설치

npm i -D css-loader style-loader

webpack.config.js 추가

  module: {
    rules: [
      {
				// 파일명이 .css로 끝나는 모든 파일에 적용
        test: /\.css$/,
				// 배열 마지막 요소부터 오른쪽에서 왼쪽 순으로 적용
				// 먼저 css-loader가 적용되고, styled-loader가 적용되어야 한다.
				// 순서 주의!
        use: ["style-loader", "css-loader"],
				// loader가 node_modules 안의 있는 내용도 처리하기 때문에
				// node_modules는 제외해야 합니다
        exclude: /node_modules/,
      },
    ],
  },

다시 npm run build

app.bundle.js를 확인하면 css가 추가된 것을 알 수 있다. 따라서 index.html의 <link rel="stylesheet" href="style.css"> 삭제 가능

HTML 번들에 포함

dist/index.html을 밖으로 보냄

설치

npm i -D html-webpack-plugin 설치

webpack.config.js에 플러그인 적용

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

plugins: [
  new HtmlWebpackPlugin({
    template: path.resolve(
      __dirname,
      /* index.html이 담긴 폴더이름 ,*/ "index.html"
    ),
  }),
];

추가

다시 번들

번들된 dist/index.html 파일생성

CSS는 app.bundle.js 파일에서, JavaScript는 html-webpack-plugin이 자동으로 <script defer="defer" src="app.bundle.js"></script> 스크립트 요소 추가

Advanced

작동 모드 설정

webpack.config.js에 mode: "development"

혹은

CLI에서 webpack --mode=development

development - DefinePlugin의 process.env.NODE_ENV를 development로 설정. 모듈과 청크에 유용한 이름을 사용 가능.
production - DefinePlugin의 process.env.NODE_ENV를 production으로 설정. 모듈과 청크, FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, TerserPlugin 등에 대해 결정적 망글이름(mangled name) 사용 가능
none - 기본 최적화 옵션에서 제외

output 관리

번들링 할 때마다 dist 디렉터리 정리

webpack.config.js

output : {
  clean: true,
}

output이 동적으로 변하도록

webpack.config.js

  entry : {
    app : './script.js'
  },
  output : {
    path : path.resolve(__dirname, 'dist'),
    filename : '[name].bundle.js',
    clean: true,
  },

라고 하면 entry 의 app 이 output의 name으로 들어가게됨

따라서 여러 개의 번들을 한번에 가능

Asset 관리

CSS에 minify 적용

mini-css-extract-plugin
css-minimized-webpack-plugin

mini-css-extract-plugin

CSS를 별도의 파일로 추출. CSS를 포함하는 JS 파일마다 CSS 파일 생성. CSS 및 SourceMaps의 On demand Loading(Lazy Loading)을 지원.

On demand loading - 웹 페이지 전체를 불러와서 한 번에 사용자에게 렌더링하는 방식 대신, 필요한 부분만 불러오고 나머지 부분은 사용자가 필요할 때까지 미루는 것으로 사용자의 데이터 낭비를 막아줍니다.

https://mari-mo.tistory.com/206

설치 npm install --save-dev mini-css-extract-plugin

webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins : [new MiniCssExtractPlugin()],

module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },

mini-css-extract-plugin 을 사용하면 style-loader 필요없음

dist 에 css 파일 생성

https://webpack.kr/plugins/mini-css-extract-plugin/

css-minimizer-webpack-plugin

cssnano를 사용하여 CSS를 최적화하고 축소

optimize-css-assets-webpack-plugin과 비슷하지만 쿼리 문자열을 사용하는 소스 맵 및 자산에서 더 정확하며 캐싱을 허용하고 병렬 모드에서 작동

설치 npm install css-minimizer-webpack-plugin --save-dev

webpack.config.js

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

  optimization: {
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },

프로덕션 모드에서만 CSS 최적화가 활성화

webpack.config.js

  optimization: {
    minimize: true,
  },

개발 중에도 실행가능 하도록

https://webpack.kr/plugins/css-minimizer-webpack-plugin/

개발용 서버

webpack-dev-server는 간단한 웹 서버와 실시간 다시 로딩 기능을 제공

설치 npm install --save-dev webpack-dev-server

webpack.config.js

  devServer: {
    static: './dist',
  },

  optimization: {
    runtimeChunk: 'single',
  },

webpack-dev-server에게 dist 디렉터리의 파일을 localhost:8080에서 제공

optimization.runtimeChunk: 'single'는 단일 HTML 페이지에 하나 이상의 엔트리 포인트가 있다면 추가한다.

webpack-dev-server는 output.path에 정의된 디렉터리에서 번들된 파일 제공. 예를 들면, 파일은 http://[devServer.host]:[devServer.port]/[output.publicPath]/[output.filename] 주소로 사용할 수 있습니다.

package.json

"start": "webpack serve --open",

https://webpack.kr/guides/development/#using-webpack-dev-server

브라우저 호환성

ES6를 지원하지 않는 브라우저에서 실행 가능하게 target 속성 활용

복수의 target을 작성하면 기능의 공통적인 하위 집합이 사용

webpack.config.js

target: ['web', 'es5'],

Webpack은 웹 플랫폼을 위해 런타임 코드를 생성하고 ES5 기능만 사용

https://webpack.kr/configuration/target/#string-1

webpack.config.js

module.exports = {
  // ...
  target: ["web", "node"],
};

에러 원인, 현재 webpack은 범용적인 target을 지원하지 않음

webpack.config.js

module.exports = {
  // ...
  target: false,
};

목록에 정의된 target 중에 원하는 target이 없으면 플러그인이 적용되지 않음

Twitter Facebook LinkedIn

Diiiiiikey

[BUNDLING]Webpack Assignment

시작

웹팩 설치

웹팩 config 파일 작성

번들링

npm run build 설정

css 번들에 포함

style-loader, css-loader

설치

다시 npm run build

HTML 번들에 포함

설치

다시 번들

Advanced

작동 모드 설정

output 관리

Asset 관리

mini-css-extract-plugin

css-minimizer-webpack-plugin

개발용 서버

브라우저 호환성

공유하기

댓글남기기

참고

[ReactThreeFiber] 3D 모델(sketchfab) - THREE.GLTFLoader: Unknown extension KHR_materials_pbrSpecularGlossiness

[ReactThreeFiber] 3D 모델 / 애니메이션

[ReactThreeFiber] 그림자(Drei)

[ReactThreeFiber] 그림자