FullStackOpen Part7-d Webpack メモ

create-react-appのおかげで楽にReactの開発をすることができるが、それ以前は必要なファイルをまとめるのは非常に手のかかる作業だった。
webpackというツールを使ってその方法を見てみる

Bundling

ビルドするとJavascriptファイルが以下のように一つにまとめられる。

├── asset-manifest.json
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
├── robots.txt
└── static
    ├── css
    │   ├── main.1becb9f2.css
    │   └── main.1becb9f2.css.map
    └── js
        ├── main.88d3369d.js
        ├── main.88d3369d.js.LICENSE.txt
        └── main.88d3369d.js.map

jsフォルダに求められたmain.88d3369d.jsをルートにあるindex.htmlのscriptタグで呼び出している

Configuration file

Webpackの設定ファイル(./webpack.config.js)はこんな感じ

const path = require('path')

const config = () => {
  return {
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'main.js'
    }
  }
}

module.exports = config