Webpack构建本地网站部署咨询：dist文件无法直接访问

Hey there! Let's break down why your local Webpack build isn't working when opening index.html directly, and walk through how to deploy it properly to a server.

Why Opening index.html Directly Fails #

When you open index.html via the file:// protocol (double-clicking it), you'll run into two common issues:

• Absolute Path Mismatch: Webpack often generates absolute paths for assets (like /bundle.js) by default. In the file:// protocol, this points to your local filesystem root, not the dist folder—so the browser can't find bundle.js.
• Frontend Routing Problems: If you're using client-side routing (like React Router's BrowserRouter), the file:// protocol can't handle route navigation since it doesn't support rewrite rules.

First: Validate Your Build Locally #

Before deploying, let's confirm your build works in a server-like environment:

• Install a simple static file server globally:

  npm install -g serve
  

• Navigate to your dist folder:

  cd dist
  

• Start the server:

  serve
  

• Visit http://localhost:3000 (default port). If your app runs here, your build is valid—you just need to fix path configuration and deployment steps.

Adjust Your Webpack Configuration #

Looking at your config snippet, there are a couple key tweaks to make for production:

1. Set output.publicPath #

This tells Webpack what base path to use for all asset references. Add this to your config:

module.exports = {
  // ... existing config
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/' // Update this if deploying to a subdirectory (e.g., '/my-app/')
  },
  // ... existing config
}

• If deploying to your server's root (e.g., https://your-domain.com/), use /.
• If deploying to a subdirectory (e.g., https://your-domain.com/my-app/), use /my-app/.

2. Remove Dev-Only Entry Points #

Your entry includes react-hot-loader/patch and webpack-dev-server/client?http://localhost:3000—these are for development hot reloading and should NOT be in your production build. Split your config into dev/prod environments, or update your entry for production:

// Production entry
entry: ['./src/index.js'], // Replace with your actual app entry file

Then build with production mode to optimize:

webpack --mode production

Deploy to a Server #

Here are the most common deployment methods:

1. Nginx (Self-Hosted Server) #

Nginx is a popular choice for serving static files:

1. Open your Nginx config file (e.g., /etc/nginx/sites-available/default).
2. Update the server block to point to your dist folder:

   server {
     listen 80;
     server_name your-domain.com;
   
     root /path/to/your/project/dist;
     index index.html;
   
     # Handle frontend routing (if using client-side routes)
     location / {
       try_files $uri $uri/ /index.html;
     }
   }
   

3. Restart Nginx to apply changes:

   sudo systemctl restart nginx
   

2. Static Hosting Platforms (Vercel/Netlify) #

These platforms simplify deployment with zero server configuration:

• Vercel: Upload your dist folder directly, or link your GitHub repo. Add a vercel.json to automate builds:

  {
    "buildCommand": "webpack --mode production",
    "outputDirectory": "dist"
  }
  

• Netlify: Drag-and-drop your dist folder into the Netlify dashboard, or connect your repo and set the "Publish directory" to dist.

3. Apache (Self-Hosted Server) #

If using Apache:

1. Open your Apache config (e.g., /etc/apache2/sites-available/000-default.conf).
2. Update the VirtualHost block:

   <VirtualHost *:80>
     ServerName your-domain.com
     DocumentRoot /path/to/your/project/dist
   
     <Directory /path/to/your/project/dist>
       Options Indexes FollowSymLinks
       AllowOverride All
       Require all granted
     </Directory>
   
     # Handle frontend routing
     RewriteEngine On
     RewriteBase /
     RewriteRule ^index\.html$ - [L]
     RewriteCond %{REQUEST_FILENAME} !-f
     RewriteCond %{REQUEST_FILENAME} !-d
     RewriteRule . /index.html [L]
   </VirtualHost>
   

3. Restart Apache:

   sudo systemctl restart apache2
   

Final Check #

1. Rebuild your project in production mode: webpack --mode production
2. Upload all files in the dist folder to your server/hosting platform
3. Visit your server's URL—your app should now run correctly!

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