如何为基于Mithril.js的现有Webpack项目添加本地服务器？

Hey there! Let's fix that local server issue so your Firebase-integrated Mithril app runs smoothly. The problem with your original command is that you're mixing Webpack and local-web-server (ws) arguments incorrectly—Webpack doesn't recognize ws as a valid flag, which is why you're seeing errors. Here are two solid solutions tailored to your setup:

Solution 1: Fix the local-web-server Setup with Concurrent Commands #

If you want to stick with local-web-server, we need to run Webpack's watch mode and the server separately (in parallel) so they don't interfere with each other.

1. First, install the required dependencies:

   npm install local-web-server concurrently --save-dev
   

   • concurrently lets you run multiple commands at the same time, which is perfect for keeping Webpack's auto-rebuild and the server running together.

2. Update your package.json scripts section to split the tasks:

   "scripts": {
     "build": "webpack -d",
     "watch": "webpack -d --watch",
     "serve": "ws --spa public/index.html",
     "start": "concurrently \"npm run watch\" \"npm run serve\""
   }
   

   • npm run watch: Keeps Webpack listening for file changes and rebuilding your app automatically.
   • npm run serve: Starts the local server with ws, using --spa to make sure all routes fall back to your public/index.html (critical for single-page apps like Mithril).
   • start: Runs both commands at once so you only need to type npm start to get everything going.

Solution 2: Use Webpack Dev Server (Recommended for Webpack Projects) #

Since you're already using Webpack, the official webpack-dev-server is a more integrated solution—it handles both compiling your app and serving it locally, with built-in hot reloading.

1. Install the dependency:

   npm install webpack-dev-server --save-dev
   

2. Update your start script in package.json:

   "scripts": {
     "start": "webpack-dev-server -d --open --content-base public/"
   }
   

   • -d: Enables development mode (source maps, unminified code for debugging).
   • --open: Automatically opens your app in the browser once the server starts.
   • --content-base public/: Tells the server to serve static files from your public directory, so your index.html loads correctly.

This setup is simpler because you don't need a separate server tool—Webpack handles everything in one place, and it plays nicely with Firebase's requirements for a proper HTTP server environment (no more file:// protocol issues!).

Whichever solution you choose, running npm start will now spin up a local server that works with your Firebase-integrated Mithril app.

内容的提问来源于stack exchange，提问作者Tal Yaron