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し、変更を検知してくれる
サンプルコード一式