TIL/TIL
WEBPACK with ES6(babel)
by koreashowme
2020. 2. 12.
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
comment