WEBPACK with ES6(babel)

Babel is a JavaScript compilerBabel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you: Transform syntax.

 

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

 

babel-polyfill. Babel includes a polyfill that includes a custom regenerator runtime and core-js. This will emulate a full ES2015+ environment and is intended to be used in an application rather than a library/tool. This polyfill is automatically loaded when using babel-node .

 

***babel polyfill***

babel-loader is the Webpack loader responsible for taking in the ES6 code and making it understandable by the browser of choice

npm install @babel/polyfill

 

webpack.config 설정이 바뀌면, 다시 dev:assets 이용하여 재실행 시켜야한다.

 

what does babel-loader do?

 

babel-loader is the Webpack loader responsible for taking in the ES6 code and making it understandable by the browser of choice

 

dev:assets "-w"=> (webpack 실행시 => static 폴더로 이동(app.js서버에 설정)

 

"dev:assets": "WEBPACK_ENV=development webpack -w",

 

Watch the files => CSS 파일 수정할 때마다, webpack 자동 실행.

That means it is going to watch CSS and run if any updates.

 

npm run dev:server => nodemon

npm run dev:assets => webpack

 

When do you usually use process.env?

=> When you want to know if you're developing or on production.

요즘엔 webpack 설정이 잘 되어있어서, 코드를 보고 어떤 내용이 들어가 있는지 이해할 줄만 알면된다. 

ex) loaders => babel-loader, css-loader, postcss-loader, sass-loader