Webpack 4.0.0 の Zero Configuration を試す
Webpack4.0.0が出てました。
さっそく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
無事バベれたことを確認。
感想
- デフォルトでバベって欲しい!
- 速さは良く分からない!