webpack-serve v2 を動かすまでのメモ

春先にwebpack-serveのv1 が出てたと思ったけど、気がつけばv2のbeta版の話がGithub上でされてて、忙しくて追うのを放置してたらいつの間にかv2が公式リリースされてたので簡単に触ってみたメモ

npmでインストールしておくもの

必須 - webpack - webpack-cli - webpack-serve

サンプルを動作させるのに必要(webpack-serve)とは関係無し - html-webpack-plugin

各種ファイル

設定ファイル関連

  • webpakc-config.js
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve(`${__dirname}/src/js`, 'index.js'),
  output: {
    path: path.resolve(`${__dirname}`, 'dist'),
    filename: 'main.js'
  },
  mode: 'development',
  module: {
    rules: []
  },
  plugins: [
    new htmlWebpackPlugin({
      template: 'src/html/index.html',
      filename: 'index.html',
      chunk: ['main'],
      inject: true
    })
  ]
};
  • serve-config.js 外出は必須ではないが、外出した方が今後見通しがよくなりそうなので今回は外出してみた。
const serve = require('webpack-serve');
const config = require('./webpack.config.js');

serve({}, {config}).then((result) =>{});

srcフォルダ

  • index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Webpack-Serve V2 Sample</title>
</head>
<body>
  <h1>Webpack-Serve V2 Sample</h1>
</body>
</html>
  • index.js 今回はwebpack-serveの動作とwatchの確認のためのコードなので、コンソールに出力するだけのJavaScript
console.log('test1');

動作確認

$ npx webpack-serve

このコマンドで動作するはずなのだが、なぜか8080 ポートで2重起動というエラーが出てしまう。。。(原因調査中)

$ npx webpack-serve --port 8081

port optionを付けると動作した

index.jsを変更すると、webpack-serveがreloadeし、変更を検知してくれる

サンプルコード一式

github.com