초보 개발자

const path = require('path') module.exports = { mode: "development", // 이 부분을 추가하면 개발 모드로 변환가능 'production' 완성 모드 entry: "./source/index.js", output: { path: path.resolve(__dirname, "public"), filename:'index_bundle.js' } } webpack은 JS가 아닌 다른 것 또한 번들링을 해준다. 그것을 도와 주는것이 LOADER이다 CSS 로더 STYLE 로더 npm install --save-dev(-D와 같음) style-loader css-loader 명령어를 활용하여 설치를 해준다. module: { rules: [ { test:/\...

여러가지 파일을 웹팩을 통과시키면 단순한 형태의 파일로 만들어 지는 것을 보여주는 그림이다. bundle 1에서 npx webpack --entry ~~ 와 같은 긴 형태의 명령어를 설정 하였지만 webpack.config.js 파일을 만들고 const path = require('path') module.exports = { entry: "./source/index.js", output: { path: path.resolve(__dirname, "public"), filename:'index_bundle.js' } } 이렇게 설정 해주면 npx webpack 만 해줘도 실행이 가능하다.

1. node.js 를 설치를 한다 2. node.js의 프로젝트 폴더를 설정( npm init -y) 3. package.json이 생기면 npm install -D(개발을 하기위한 옵션) webpack webpack-cli 으로 웹펙을 설치 4. index.js와 같은 엔트리 파일을 생성하여 번들러를 만들 준비를 한다. 5. 설치한 webpack을 실행할때는 npx 를 사용 npx webpack --entry ./source/index.js --output-path ./public/index_bundle.js 우리의 입구에 해당하는 파일은(entry file) source안에 있는 index.js이고 public안에 있는 index_bundle.js로 아웃풋을 만들꺼야 라는 의미 번들러를 사용하지 않..