차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:javascript:webpack [2020/08/19 08:57]
dhan 만듦
+++ wiki:javascript:webpack [2023/01/13 18:44] (현재)
@@ 줄 1: / 줄 1: @@
 ====== Webpack ======
+<WRAP left notice 80%>
+  * description : 웹팩 관련 내용 기술
+  * author      : 주레피
+  * email       : dhan@repia.com
+  * lastupdate  : 2020-08-19
+</WRAP>
+<WRAP clear/>
+웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 갖고 있습니다.
+===== 사용해야 하는 이유 =====
+===== 장단점 =====
+. 단점:
+  * 사용하기가 어려움
+  *
+. 장점:
+  * 오래된 브라우저에서 사용할 수 있도록 호환됨
+  * 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
+===== Term =====
+bundler(번들) \\
+묶음 \\
+\\
+entry \\
+\\
+export \\
+\\
+import \\
+\\
-====== Install ======
+===== 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 =====
 . Node.js 설치 \\
 . npm init \\
-. npm install -D webpack webpack-cli \\
+. npm install -D webpack webpack-cli %%//%% -D = --save-dev \\
+. 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

사용자 도구

사이트 도구

차이

문서 도구