Webpack 설치기
1. npm 프로젝트 생성
npm init -y-> package.json이 생성됨
2. Webpack과 Babel 설치
npm install webpack@4.41.3 // webpack 설치
npm install webpack-cli@3.3.10 // webpack-cli 설치
npm install webpack-dev-server@3.9.0 // webpack-dev-server 설치
npm install @babel/core
npm install @babel/preset-envwebpack은 위에 적은 버전별로 설치해야 webpack과 webpack-dev가 충돌하지 않는다. -> 이거땜에 엄청 고생함 ㅜㅜ
3. Package.json 수정
"scripts": {
"build": "webpack",
"devserver": "webpack-dev-server --open --progress"
},
npm run build를 할 때는 webpack이 실행됨
npm run devserver를 할 때는 개발용 서버가 띄워짐
4. webpack.config.js 생성
4-1. package.json와 같은 위치에 webpack.config.js파일을 생성 후 아래 내용을 복붙함
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
include: path.join(__dirname),
exclude: /(node_modules)|(dist)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}
]
}
};4-2. src폴더와 index.js 파일을 해당 위치에 옮겨 넣음
4-3. entry에 있는 ./src/index.js의 import된 js파일들은 번들링하여 /dist/bundle.js에 저장됨
4-4. index.js와 같은 위치에 index.html에 /dist/bundle.js를 넣어준다.(기존에는 /src/index.js를 땡겨왔음
<html>
<head>
..
</head>
<body>
....
<script src="./component/index.js" type="module></script>
</body>
</html>5. npm run devserver 실행
Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-env' from '/Users/dasom/Vanilla.js/mission5'
- Did you mean "@babel/env"? ...이런 에러가 나면서 실패함
=> Webpack.js의 modules/rules... option을 아래와 같이 수정함
options: {
presets: ['@babel/preset-env']
},webpack 빌드 시에 babel을 포함시켜 빌드하도록 설정을 추가
6. npm run devserver 실행
client:2 Uncaught Error: Cannot find module './index.js'또 실패..
=> webpack.config.js를 아래와 같이 수정함
module.exports = {
entry: ['babel-polyfill', './src/index.js'],webpack 을 실행할 때, src/index.js 파일을 babel-polyfill 을 사용해서 번들링 할 것이라는 의미
7. npm run devserver 실행
Uncaught Error: Cannot find module 'babel-polyfill'또..!!!!
npm install babel-polyfillbabel-polyfill를 설치하면 된다^^
- babel-polyfill은 ECMAScript 버전에 포함된 빌트인 객체나 메서드들을 추가해줌(=특정 버전의 런타임 환경을 만들어줌, Promise가 없는 브라우저 환경에 Promise를 만들어줌)
- 바벨로 트랜스파일된 코드를 사용하고자 한다면 번들링된 파일을 로드하기 전에 브라우저에 먼저 로드되어야함
- 웹팩 엔트리에 포함시킴
module.exports = {
entry: ['babel-polyfill', './src/index.js'],- 이렇게 설정하면 다른 프로젝트 디펜던스들과함께 vendors.bundle.js 파일에 번들링됨
8. 근데 이게 진짜 es5로 번역이 되나요?
나는 mac을 사용중이라 익스플로러에서 테스트가 불가하다ㅠ
임시방편으로 edge에서 실행시켜보았는데, ES6가 지원되는 edge에서 정상작동한다고 마음을 놓을 일이 아니라 es6test.js로 테스트해보았음.
출처) https://meetup.toast.com/posts/157
// es6test.js
const myconst = 123;
let mylet = 456;npx babel ./es6test.js
es6test.js를 터미널에서 실행해보니 원본 코드가 나온다. 실맹ㅠ
babel-cli는 트랜스파일을 진행해주는 코어 기능만 있고, 실제 코드를 변환할 때는 기능별로 확장된 플러그인들이 필요함.
프리셋을 설치해서 해결할 수 있다. 프리셋은 버전별로 필요 플러그인들을 모아놓은 셋트라고 생각하면 된다.
npx babel ./es6test.js --presets=@babel/env
'use strict'가 추가되고 let, const가 var로 변화됨을 볼 수 있다.
babelrc
바벨은 .babelrc라는 파일명으로 프로젝트의 바벨 관련 설정을 등록할 수 있고, Package.json에서도 babel이란 키로 설정을 추가할 수 있다.
.barbelrc
-
가장 상위 디렉토리에 .barbelrc 파일을 생성
-
{ "presets": ["@babel/preset-env"] }로 내용을 채움
ie11에서 TEST해봄
첫번째 시도
원인)
<script src="./dist/bundle.js" type="module"></script>type="module"을 삭제하니 되었다.
성공한 줄 알았다
두번째 시도
Babel을 사용하여 ES6+ 코드를 ES5 이하로 트랜스파일링하여도 브라우저가 지원하지 않는 코드가 남아 있을 수 있다. 예를 들어, ES6에서 추가된 Promise, Object.assign, Array.from 등은 ES5 이하로 트랜스파일링하여도 대체할 ES5 기능이 없기 때문에 그대로 남아 있다.
src/js/main.js를 아래와 같이 수정하여 ES6에서 추가된 Promise, Object.assign, Array.from 등이 어떻게 트랜스파일링되는지 확인해 보자.
//index.js
import 'babel-polyfill' 실패
세번째 시도
//index.html
<script src=https://cdn.jsdelivr.net/npm/promise-polyfill@8.1/dist/polyfill.min.js></script>
<script src=https://cdn.jsdelivr.net/npm/whatwg-fetch@3.0/dist/fetch.umd.min.js></script>ie11에서 fetch error는 사라짐. 이제 될 줄 알았지?
네번째 시도
4-1) IE에서는 prepend()와 append()는 동작하지 않습니다.
=> appendChild()로 대체
4-2) IE에서는 closet도 안됩니다.
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>추가로 해결
디버깅 모드
// webpack.config.js
devtool: 'inline-source-map',webpack.config.js에 추가해주면 디버깅이 가능해진다.(추가하기 전에는 bundle로 묶인 js만 개발자모드에서 확인 가능했음
이제 IE에서도 된다!
