차이

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

--- wiki:javascript:webpack [2020/08/19 09:11]
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/>
 웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 갖고 있습니다.
 ===== 사용해야 하는 이유 =====
 ===== 장단점 =====
@@ 줄 17: / 줄 20: @@
 ===== Term =====
-Bundler \\
+bundler(번들) \\
+묶음 \\
 \\
-import \\
+entry \\
 \\
 export \\
+\\
+import \\
 \\
 ===== Configuration =====
-webpack.config.js
+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 ======
+===== 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
-. 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 =====
@@ 줄 39: / 줄 114: @@
 [[https://joshua1988.github.io/webpack-guide/guide.html|웹팩 핸드북]] \\
-{{tag>주레피 webpack}}
+{{tag>주레피 webpack 웹팩}}

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

사용자 도구

사이트 도구

차이

문서 도구