Webpack

웹팩은 기본적으로 필요한 자원은 미리 로딩하는게 아니라 그 때 그 때 요청하자는 철학을 갖고 있습니다.

1. 단점:

• 사용하기가 어려움

2. 장점:

• 오래된 브라우저에서 사용할 수 있도록 호환됨
• 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

bundler(번들)
묶음

entry

export

import

webpack.config.js configuration

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'
   }
}

실행1: npx webpack –config webpack.config.js or npx webpack –config webpack.config.prod.js
실행2: npx webpack (설정파일이 webpack.config.js일 경우 생략 가능)

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

Loader을 이용하여 css bundle loaders

npm install --save-dev style-loader css-loader

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
               ]
           }
       ]
   }
}

실행: npx webpack

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
               ]
           }
       ]
   }
}

npm install –save-dev html-webpack-plugin

webpack 공식 페이지
웹팩 핸드북