XXとしてる: Webpackで開発中に複数のページを確認したいとき

Reactを触ってみて、`create-react-app`コマンドでお手軽にかつService Workerとかのテンプレートも含まれて簡単に開発できるなぁと思っていたところ、
複数ページを作ったらときはどのように確認したらいいのかわからないことに気がついた。

<div style="text-align: center;">ちょっとわからないです・・・</div>

`create-react-app`で作ると中でWebpack的なことが行われているから、拡張できない？

そもそもReactってSingle Page Application向けのライブラリなんだから、ページを複数作ることを考えていない感じなのか？
React Routerもあるしなぁ・・・。

けどな〜一つのページで作っていくと後々困りそうだし、検索してみたらMultiple Page Applicationの中にSPAを組み込むことができるってあるから、
出来るならそうしたいな〜。

てな感じで結構な時間悩んでいたので、とりあえずWebpackを使って複数のページの開発を試してみようと思ったら、`webpack-dev-server`が一つのページにしか対応していないことにわかった。

<div style="text-align: center;">これは困ったぞ！</div>

<div style="text-align: center;">これを使うんだ！</div>

<div style="text-align: center; font-size: 24px;"><b><i>'''webpack-dev-middleware'''</i></b></div>

## 問題解決！

<a href="https://webpack.js.org/guides/development/#using-webpack-dev-middleware">Webpackの公式ガイドのwebpack-dev-serverの下に書いてあったwebpack-dev-middleware</a>を使えば複数ページでも確認が出来るぞ！

使うときは自前のサーバーを建てる必要があるけど、nodejsならexpressがあるし、なによりドキュメントにサンプルコードがあるのであっさりと準備が終わる。

```js
// 開発時の確認用サーバーを起動するためのプログラム
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});
```

必要になるパッケージのインストールこんな感じ。

```bash
yarn add -D express webpack webpack-cli webpack-dev-middleware
```

あと、webpackの設定もHTMLを複数出力するように修正すればOK！

`webpack-dev-middleware`も内部で`webpack-dev-server`を使っているのでその設定も必要になる。

後、HtmlWebpackPluginの`chunks`オプションに使いたいパックされたものを指定すれば、ページに必要なリソースだけを読み込むことが出来る。

```js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    //必要な分だけ書く。
    index: './src/index.js',
    about: './src/about.js'
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      chunks: ['index'], //使用するチャンク名を指定する。
      template: './src/index.html',
      filename: './index.html'
    }),
    new HtmlWebpackPlugin({
      chunks: ['about'],
      template: './src/about.html',
      filename: './about.html'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  }
};
```

## 余談 より本番環境に近づけるために (URLから'.html'を省く)

少し使ってみて、ページ遷移をするときに'.html'を付けないといけないのってよくよく考えてみると本番環境と違うよねと気がついたので、省略する方法を考えてみた。

あくまで開発用でページ遷移ができるだけでいいので、細かな動作の違いは考えないことにする。

const path = require('path')

const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);

//開発用にhtmlファイルにリダイレクトするコード
app.all('*', function (req, res, next) {
  if (path.extname(req.url) === '' && req.url !== '/') {
    const redirectURL = req.url+'.html'
    console.log(`!!Development Mode!! Redirect to ${redirectURL} from ${req.url}`)
    res.status(303).redirect(redirectURL)
  } else {
    next()
  }
})

// Tell express to use the webpack-dev-middleware and use the webpack.config.js
// configuration file as a base.
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath
}));

// Serve the files on port 3000.
app.listen(3000, function () {
  console.log('Example app listening on port 3000!\n');
});
```

拡張子がないURLに対して`.html`を付けたものでリダイレクトするだけのコードを追加した。

動作確認のためなので、これで十分だと思う。

（画像は以下のものを使用させていただきました。）

XXとしてる

2019年4月11日木曜日

Webpackで開発中に複数のページを確認したいとき

0 件のコメント:

コメントを投稿