今日のつちや

田舎から元気に技術ネタと雑記を投稿します

Webpack 4.0.0 の Zero Configuration を試す

Webpack4.0.0が出てました。

github.com

さっそくZero Configurationを試してみます。 ウェブパック詳しくないマンなので、これでいいのか良く分からんですが・・・。

install

webpackとwebpack-cliを入れる

yarn add webpack webpack-cli

mode

modeオプションでdevelopmentとproductionを切り替えることができる

それぞれいい感じに設定してくれるみたい

package.jsonにscriptsを足す

  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },

srcとdist

デフォルトでは src/index.js に置くと、dist/main.jsに吐き出されるようになってる

src/index.jsに以下のように書いて

const test = () => console.log("Hello");
test();

ビルドする

yarn dev

dist/main.js見るとアローがそのまんまだった。 この時点ではbabel-loaderは適用されていないらしい。

バベる

.babelrc が 必要らしい

babelを入れる

yarn add babel-core babel-loader babel-preset-env

.babelrcを作る

{
    "presets": ["env"]
}

--module-bindオプションによって、*.jsはbabel-loaderを使用するよう指定できる

  "scripts": {
    "dev": "webpack --mode development --module-bind js=babel-loader",
    "build": "webpack --mode production --module-bind js=babel-loader"
  },

もっかいビルドする

yarn dev

無事バベれたことを確認。

感想

  • デフォルトでバベって欲しい!
  • 速さは良く分からない!

参考

https://www.valentinog.com/blog/webpack-4-tutorial/