如何配置Webpack以服务现有开发站点？含React实时开发需求

Hey there! Let's walk through this setup step by step—no fancy jargon required, just practical stuff to get your React + Webpack Dev Server working with your CodeIgniter local site.

1. Tweak Your Webpack Config for Dev Server #

First, open your webpack.config.js file and add a devServer block. This tells Webpack how to run its live development server:

module.exports = {
  // Keep all your existing config (entry, output, module rules, etc.)
  devServer: {
    // Pick a port that doesn't conflict with your CodeIgniter server (3000 is safe)
    port: 3000,
    // Enable hot module replacement—this updates React components without full page reloads
    hot: true,
    // Allow cross-origin requests (since your CodeIgniter site is at mylocalwebdev.test and WDS runs on localhost:3000)
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    compress: true, // Speed up load times with gzip compression
    // Uncomment this if you're using React Router's BrowserRouter (fixes 404s on page reload)
    // historyApiFallback: true,
  },
};

2. Update Your CodeIgniter Demo Page View #

Create a view file in your CodeIgniter views folder (e.g., image_switcher_demo.php) for the /image-switcher-demo route. Instead of linking to your locally built bundle.js, point it to the live bundle served by Webpack Dev Server:

<!DOCTYPE html>
<html>
<head>
  <title>Image Switcher Demo</title>
</head>
<body>
  <!-- Root div where React will mount your app -->
  <div id="root"></div>

  <!-- Link to Webpack Dev Server's live bundle -->
  <script src="http://localhost:3000/bundle.js"></script>
</body>
</html>

Pro tip: When you're ready to deploy, switch this back to your locally built bundle.js path.

3. Start Your Servers in the Right Order #

• First, fire up your CodeIgniter local server (using XAMPP/WAMP, or CodeIgniter's built-in php spark serve—make sure http://mylocalwebdev.test is accessible).
• Then, in your React project's terminal, start Webpack Dev Server:

npx webpack serve --mode development

Or if you added a script to your package.json like "start": "webpack serve --mode development", just run:

npm start

4. Test the Live Development Flow #

Open http://mylocalwebdev.test/image-switcher-demo in your browser. Now, whenever you edit your React component files (like src/App.js) and save, Webpack Dev Server will automatically update the page—no manual re-building required!

Optional: Proxy Requests to Avoid Cross-Headaches #

If you don't want to mess with cross-origin headers, you can set up Webpack Dev Server to proxy all requests to your CodeIgniter site. This way, you'll access everything through WDS's port:
Update the devServer block in webpack.config.js:

devServer: {
  port: 3000,
  hot: true,
  // Proxy all requests to your CodeIgniter site
  proxy: {
    '/': {
      target: 'http://mylocalwebdev.test',
      changeOrigin: true,
      pathRewrite: {'^/' : ''} // Keep the original path when proxying
    }
  },
  historyApiFallback: true,
}

Now you can visit http://localhost:3000/image-switcher-demo directly—WDS will fetch the CodeIgniter page and serve the live React bundle, no cross-domain issues at all.

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