Babel, Webpack わからん

わからんので調べてみました

Babel

Javascriptをトランスパイルしてくれるやつ
トラスパイルとはコードを翻訳してくれるもので、Babelは
新しいJS --> 古いJS
に翻訳してくれます

Javascript ES6は、書く側としては書きやすくなったけど、ES6をサポートしてるブラウザは少ない
ので、いろんなブラウザで作ったアプリが動くように、Babelを入れてトランスパイルする

Babelの設定ファイルの例

.babelrc

{
  "presets": ["@babel/preset-env"]
}

Webpack

Babelとか、Babelと似たような機能をもついろんなものの設定をまとめてくれるもの

たとえば、JavascriptはBabelで古いコードにトランスパイルしたいし、CSSはSassで書きたい、というときにWebpackにまとめてその設定を書けるので便利

Webpackには loader と plugin の2つの機能があって、それぞれ

• loader: ソースコードを変形するもの
• plugin: loader以外のもの

という内容
loaderには、上のBabel (babel-loader)や、SassをCSSに変換してくれる sass-loaderなどがあります
pluginには、JSをuglifyするUglifyJSなどがあります

Webpackの設定ファイルの例

webpack.config.js

const path = require("path");

const config = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

module.exports = config;

参考

https://medium.com/front-end-weekly/what-are-npm-yarn-babel-and-webpack-and-how-to-properly-use-them-d835a758f987
この記事を抜粋して翻訳しました
BabelとWebpackの環境構築とか、npmとyarnの解説もあるのでおすすめです