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

사용자 도구

사이트 도구

현재 위치: start » wiki » javascript » webpack
wiki:javascript:webpack

차이

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

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:javascript:webpack [2020/08/19 09:42]
dhan 		wiki:javascript:webpack [2023/01/13 18:44] (현재)
줄 8: 줄 8:
 <WRAP clear/> <WRAP clear/>
 웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 갖고 있습니다. 웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 갖고 있습니다.
- 
- 
  
 ===== 사용해야 하는 이유 ===== ===== 사용해야 하는 이유 =====
- 
  
 ===== 장단점 ===== ===== 장단점 =====
줄 23: 줄 20:
  
 ===== Term ===== ===== Term =====
-Bundler(번들) \\ +bundler(번들) \\ 
-묶음+묶음 \\
 \\ \\
-import \\+entry \\
 \\ \\
 export \\ export \\
 +\\
 +import \\
 \\ \\
  
줄 40: 줄 39:
    output:{    output:{
        path: path.resolve(__dirname, "public"), // __dirname mean webpack.config.js가 위치한 위치        path: path.resolve(__dirname, "public"), // __dirname mean webpack.config.js가 위치한 위치
-       filename: 'index_Bundle.js'+       filename: 'index_bundle.js'
    }    }
 } }
줄 54: 줄 53:
  
 ===== css ===== ===== css =====
-Loader을 이용하여 css bundle+Loader을 이용하여 css bundle [[https://webpack.js.org/loaders/|loaders]] 
 <code bash> <code bash>
 npm install --save-dev style-loader css-loader npm install --save-dev style-loader css-loader
줄 66: 줄 65:
    output:{    output:{
        path: path.resolve(__dirname, "public"), // __dirname mean webpack.config.js가 위치한 위치        path: path.resolve(__dirname, "public"), // __dirname mean webpack.config.js가 위치한 위치
-       filename: 'index_Bundle.js'+       filename: 'index_bundle.js'
    },    },
    module:{    module:{
줄 72: 줄 71:
            {            {
                test:/\.css$/,                test:/\.css$/,
-               use:[+               use:[ // 뒤부터 먼저 실행됨(chaining 체이닝)
                    'style-loader', // js -> css                    'style-loader', // js -> css
                    'css-loader' // *.css -> js                    'css-loader' // *.css -> js
줄 83: 줄 82:
 > 실행: npx webpack > 실행: 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 ===== ===== Ref =====
 [[https://webpack.js.org|webpack 공식 페이지]] \\ [[https://webpack.js.org|webpack 공식 페이지]] \\
/var/services/web/dokuwiki/data/attic/wiki/javascript/webpack.1597797757.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki