wiki:javascript:webpack

차이

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

차이 보기로 링크

--- wiki:javascript:webpack [2020/08/19 09:46]
dhan
+++ wiki:javascript:webpack [2023/01/13 18:44] (현재)
@@ 줄 8: / 줄 8: @@
 <WRAP clear/>
 웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 갖고 있습니다.
 ===== 사용해야 하는 이유 =====
 ===== 장단점 =====
@@ 줄 23: / 줄 20: @@
 ===== Term =====
-Bundler(번들) \\
+bundler(번들) \\
-묶음
+묶음 \\
 \\
-import \\
+entry \\
 \\
 export \\
+\\
+import \\
 \\
@@ 줄 40: / 줄 39: @@
    output:{
        path: path.resolve(__dirname, "public"), // __dirname mean webpack.config.js가 위치한 위치
-       filename: 'index_Bundle.js'
+       filename: 'index_bundle.js'
    }
 }
@@ 줄 54: / 줄 53: @@
 ===== css =====
-Loader을 이용하여 css bundle [[https://webpack.js.org/configuration/|configuration]]
+Loader을 이용하여 css bundle [[https://webpack.js.org/loaders/|loaders]]
 <code bash>
 npm install --save-dev style-loader css-loader
@@ 줄 66: / 줄 65: @@
    output:{
        path: path.resolve(__dirname, "public"), // __dirname mean webpack.config.js가 위치한 위치
-       filename: 'index_Bundle.js'
+       filename: 'index_bundle.js'
    },
    module:{
@@ 줄 83: / 줄 82: @@
 > 실행: 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 공식 페이지]] \\

/volume1/web/dokuwiki/data/attic/wiki/javascript/webpack.1597797960.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)