Webpack - Entry & Output, Mode, Loader, Plugin

wontwopunch·2022년 5월 18일
0

독학

목록 보기
57/93
post-thumbnail

Entry & Output

모듈이 의존성 그래프를 만들고 번들 파일을 만든다.
Entry : 모듈의 의존 관계를 이해하기 위한 시작점을 설정
Output : webpack이 생성하는 번들 파일에 대한 정보를 설정

예 1

// $ npm init -y
// $ npm install webpack webpack-cli --save-dev
// $ npx webpack
// 에러남
// 새폴더 만들기 dist, src(index.js, log.js, mathUtil.js)
// $ npx webpack
// 또 에러남
// npx webpack --target=node
// $ node ./dist/main.js
// dist에 main.js가 잘 생성되었나 확인

예 2

// 예 1과는 다른 방식
// webpack.config.js 파일 생성
const path = require('path');

module.exports = {
  entry : './src/index.js,
  output : {
  	path : path.resolve(__dirname, 'dist'),
    filename : 'bundle.js'
},
  target : 'node'
}

// pathTest.js 파일 생성
const path = require('path');
console.log(__dirname);
const pathTest = path.resolve(__dirname, 'abc');
console.log(pathTest);
// $ node ./pathTest.js 
// 경로가 잘 나타나면

// $ npx webpack

설정 요소 1 Mode

  • package.json --save-dev, --save
    • 어플리케이션 내부에 직접 포함되는 모듈 예)jquery
      → dependencies : --save
    • 개발 과정에 필요한 모듈
      → devDependencies : --save-dev
  • 개발환경과 프로덕션 환경
  • Mode & Webpack-merge

설정 요소 2 Loader

웹팩이 의존성 그래프를 만드는 과정에서 다양한 모듈들을 입력받아 처리하는 역할

module.exports = {
	module : {
    	rlues : [ loader1, loader2 ]
        }
}
// 새로운  webpack 폴더 만들어서 vscode에 열기
// $ npm init -y
// $ npm install webpack webpack-cli --save-dev
// index.html, index.js 파일 생성

// index.html
<body><script src="./dist/bundle.js"></script></body>

// index.js
function component(){
  const el=document.createElement('div');
  el.innerHTML="Hello Webpack";
  return el;
}
document.body.appendChild(component());

// webpack.config.js 파일 생성
const path = require('path');
module.exports = {
  extry : './index.js',
  output : {
    filename: 'bundle.js',
    path : path.resolve(__dirname, 'dist')
  },
  mode : 'none'
}

// package.json
"script" {
  "build" : "webpack"
}
// $ npm run build
// index.html에 Hello Webpack 잘 나오는지 확인

// $ npm install style-loader css-loader --save-dev
// webpack.config.js
const path = require('path');
module.exports = {
  extry : './index.js',
  output : {
    filename: 'bundle.js',
    path : path.resolve(__dirname, 'dist')
  },
  modules : {
    rules : [
      {
        test : /\.css$/i,
        use : [
          'style-loader',
          {
            loader : 'css-loader'
          }
          ]
      }
      ]
  },      
  mode : 'none'
}

// $ npm install normalize.css --save
// index.js
import 'normalize.css';

function component(){
  const el=document.createElement('div');
  el.innerHTML="Hello Webpack";
  return el;
}
document.body.appendChild(component());

// index.css 파일 생성
div {
  color : red;
}

// index.js
import 'normalize.css';
import './index.css';

function component(){
  const el=document.createElement('div');
  el.innerHTML="Hello Webpack";
  return el;
}
document.body.appendChild(component());

// npm run build

// 구글에서 css-loader 검색
// webpack-contrib/css-loader:CSS Loader-GitHub
// webpack.config.js
const path = require('path');
module.exports = {
  extry : './index.js',
  output : {
    filename: 'bundle.js',
    path : path.resolve(__dirname, 'dist')
  },
  modules : {
    rules : [
      {
        test : /\.css$/i,
        use : [
          'style-loader',
          {
            loader : 'css-loader',
            options : {
              modules : true
            }
          }
          ]
      }
      ]
  },      
  mode : 'none'
}

// index.css
div {
  color : red;
}
.helloWebpack {
  color: blue;
}

// index.js
import 'normalize.css';
// import './index.css';
import styles from './index.css';

el.innerHTML
console.log(styles);
el.classList = styles.helloWebpack;
return;

function component(){
  const el=document.createElement('div');
  el.innerHTML="Hello Webpack";
  return el;
}
document.body.appendChild(component());

// npm run build

// webpack.config.js
const path = require('path');
module.exports = {
  extry : './index.js',
  output : {
    filename: 'bundle.js',
    path : path.resolve(__dirname, 'dist')
  },
  modules : {
    rules : [
      {
        test : /\.css$/i,
        use : [
          {
            loader : 'style-loader',
            options : {
              injectType : 'singletonStyleTag'
            }
          },
            loader : 'css-loader',
            options : {
              modules : true
            }
          }
          ]
      }
      ]
  },      
  mode : 'none'
}
// $ npm run build 
// index.html <style> 태그가 두개로 나눠진게 하나로만 보이는지 확인

설정 요소 3 Plugin

module.exports = {
	plugins : [ new Plugin({...option}),...]
}
// npm i html-webpack-plugin -D
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  extry : './index.js',
  output : {
    filename: 'bundle.js',
    path : path.resolve(__dirname, 'dist')
  },
  modules : {
    rules : [
      {
        test : /\.css$/i,
        use : [
          {
            loader : 'style-loader',
            options : {
              injectType : 'singletonStyleTag'
            }
          },
            loader : 'css-loader',
            options : {
              modules : true
            }
          }
          ]
      }
      ]
  },
  plugins : [
    new HtmlWebpackPlugin({
      template : './template.html'
    })
    ],
  mode : 'none'
}
// index.html을 template.html로 변경하고 script 다 삭제
// $ npm run build
// dist 폴더에 index.html이 생성되었는지 확인
profile
프론트엔드 취준생

0개의 댓글