문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== Webpack ======
<WRAP left notice 80%>
  * description : 웹팩 관련 내용 기술
  * author      : 주레피
  * email       : dhan@repia.com
  * lastupdate  : 2020-08-19
</WRAP>
<WRAP clear/>
웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 갖고 있습니다.

===== 사용해야 하는 이유 =====

===== 장단점 =====
1. 단점:
  * 사용하기가 어려움
  * 
2. 장점:
  * 오래된 브라우저에서 사용할 수 있도록 호환됨
  * 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

===== Term =====
bundler(번들) \\
묶음 \\
\\
entry \\
\\
export \\
\\
import \\
\\

===== Configuration ===== 
webpack.config.js [[https://webpack.js.org/configuration/|configuration]]
<code javascript>
const path = require('path');
module.exports = {
   mode: "development", // 없으면 production
   entry:"./source/index.js",
   output:{
       path: path.resolve(__dirname, "public"), // __dirname mean webpack.config.js가 위치한 위치
       filename: 'index_bundle.js'
   }
}
</code>
> 실행1: npx webpack --config webpack.config.js or npx webpack --config webpack.config.prod.js
> 실행2: npx webpack (설정파일이 webpack.config.js일 경우 생략 가능)

===== Install =====
1. Node.js 설치 \\
2. npm init \\
3. npm install -D webpack webpack-cli %%//%% -D = --save-dev \\ 
4. npx webpack --entry source/index.js --output ./public/index_bundle.js

===== css =====
Loader을 이용하여 css bundle [[https://webpack.js.org/loaders/|loaders]] 
<code bash>
npm install --save-dev style-loader css-loader
</code>
\\
<code javascript>
const path = require('path');
module.exports = {
   mode: "development", // 없으면 production
   entry:"./source/index.js",
   output:{
       path: path.resolve(__dirname, "public"), // __dirname mean webpack.config.js가 위치한 위치
       filename: 'index_bundle.js'
   },
   module:{
       rules:[
           {
               test:/\.css$/,
               use:[ // 뒤부터 먼저 실행됨(chaining 체이닝)
                   'style-loader', // js -> css
                   'css-loader' // *.css -> js
               ]
           }
       ]
   }
}
</code>
> 실행: npx webpack
\\
===== Output =====
<code javascript>
const path = require('path');
module.exports = {
   mode: "development", // 없으면 production
   entry:"./source/index.js",
   output:{
       path: path.resolve(__dirname, "public"), // __dirname mean webpack.config.js가 위치한 위치
       filename: '[name]_bundle.js'
   },
   module:{
       rules:[
           {
               test:/\.css$/,
               use:[ // 뒤부터 먼저 실행됨(chaining 체이닝)
                   'style-loader', // js -> css
                   'css-loader' // *.css -> js
               ]
           }
       ]
   }
}
</code>
\\ 
===== Plugin =====

npm install --save-dev html-webpack-plugin

===== Ref =====
[[https://webpack.js.org|webpack 공식 페이지]] \\
[[https://joshua1988.github.io/webpack-guide/guide.html|웹팩 핸드북]] \\

{{tag>주레피 webpack 웹팩}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구