1. GET http://localhost:8080/js/data.js net::ERR_ABORTED 404 (Not Found) 뜻 : html에 연결된 data.js파일을 찾을 수 없음 상황 : html에 있던 script태그에서 에러가 남. 해결 : webpack은 파일을 읽어들이는 진입점이 js파일이기 때문에 html에서 script태그로 js파일을 연결할 필요가 없다. 따라서 html에 있던 script 태그 삭제하면 된다. 2. Uncaught ReferenceError: begin is not defined at HTMLButtonElement.onclick 뜻 : begin 함수를 HTMLButtonElement.onclick에서 사용불가 상황 : html에서 버튼 클릭 시 start.js..
💻 Babel 설치 1. 터미널에 npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime 입력 2. 루트경로에 .babelrc.js 파일 생성 후 다음 코드 저장 module.exports = { presets: ['@babel/preset-env'], plugins: [ ['@babel/plugin-transform-runtime'] ] }3. webpack.config.js module에 babel-loader 추가 { test: /\.js$/, use: [ 'babel-loader' ] }4. 터미널에 npm i -D babel-loader 입력
💻 Autoprefixer 설치 벤더 프리픽스를 자동으로 붙여주는 Autoprefixer를 설치해보자 1. 터미널에 npm i -D postcss autoprefixer postcss-loader 입력 2. webpack.config.js의 module 수정 module: { rules: [ { test: /\.s?css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader' ] } ] },use에 postcss-loader를 추가하고 순서에 주의하자. 3. package.js파일에 browserslist 추가 "browerslist": [ "> 1%", "last 2 ver..
1️⃣첫 번째 방법. static 안에 css 넣기 1. html 파일에 다음과 같은 link태그로 css를 연결 2. static 폴더에 css 폴더를 만들고 그 안에 style.css 파일 넣기 이렇게 하면 dist 파일에 css 폴더가 들어가게 된다. 3. 터미널에 npm run dev 입력 개발 서버가 열리고 내용을 확인하면 css가 잘 적용된 것을 확인할 수 있다. 2️⃣두 번째 방법. js 에서 css 가져오기 다시 루트 경로에 css 폴더를 꺼내놓자. 1. main.js에서 import로 css 가져오기 import '../css/style.css'webpack의 진입점을 js파일로 해놓았기 때문에 webpack은 main.js부터 읽어나가면 main.js에 연결된 css 파일..
🌓 Webpack의 장점과 단점 장점 : 매우 꼼꼼한 구성 옵션을 설정할 수 있으며 중/대형 사이즈의 규모있는 프로젝트에 적합하다. 단점 : 디테일한 옵션까지 제공하다보니 확인해야 할 요소가 많다. 🌕 Webpack으로 프로젝트 구성하기 1. 터미널에 npm init -y 입력 2. 터미널에 npm i -D webpack webpack-cli webpack-dev-server@next 입력 parcel은 cli가 자동화되어 있었지만 webpack은 그렇지 않기 때문에 webpack-cli를 설치해줘야 한다. 또한 개발 서버를 열고 수정사항이 바로바로 반영될 수 있게 하기 위해 webpack-dev-server를 설치한다. dev-server는 cli와 버전 일치를 위해 뒤에 @next까지 붙여준다. 3...