在Webpack构建的React组件中使用自定义JS文件的问题

Hey there! I’ve run into this exact scenario before when working with Webpack, React, and custom external scripts—those nosniff errors can be tricky, but we can get this sorted just like you did with Express. Here’s how to replicate that static directory behavior in Webpack:

Option 1: Use copy-webpack-plugin for Production & Development #

This plugin lets you copy your static script files directly to your Webpack output directory, ensuring they’re served with the correct MIME types.

First, install the plugin:

npm install copy-webpack-plugin --save-dev
# or
yarn add copy-webpack-plugin --dev

Then update your webpack.config.js to include the plugin configuration:

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ... your existing config
  plugins: [
    // ... other plugins like HtmlWebpackPlugin
    new CopyWebpackPlugin({
      patterns: [
        // Map /models path to your local models directory
        { from: path.resolve(__dirname, 'models'), to: 'models' },
        // Map /src path to your local src directory (adjust if needed)
        { from: path.resolve(__dirname, 'src'), to: 'src' }
      ]
    })
  ]
};

Now when you build your app, Webpack will copy those script files to your dist (or output) folder, and you can reference them in your component using paths like /models/your-custom-script.js.

Option 2: Configure Webpack Dev Server for Development #

If you’re using webpack-dev-server for local development, you can set up static directory mappings directly in the dev server config—just like your Express setup:

Update your webpack.config.js devServer section:

module.exports = {
  // ... other config
  devServer: {
    // ... your existing dev server settings (port, hot reload, etc.)
    static: [
      {
        directory: path.resolve(__dirname, 'models'),
        publicPath: '/models' // Maps localhost:3000/models to your local models folder
      },
      {
        directory: path.resolve(__dirname, 'src'),
        publicPath: '/src' // Maps localhost:3000/src to your local src folder
      }
    ]
  }
};

This tells the dev server to serve files from those local directories when requests come in for the /models or /src paths, and it’ll automatically set the correct MIME types to avoid the nosniff error.

Option 3: Load Scripts Dynamically in Your Component #

Once your static paths are configured, make sure you’re loading the scripts correctly in your React component. A common approach is to use useEffect to inject script tags dynamically:

import { useEffect } from 'react';

function YourRouteComponent() {
  useEffect(() => {
    // Load first script
    const script1 = document.createElement('script');
    script1.src = '/models/script-one.js';
    script1.async = true;
    document.body.appendChild(script1);

    // Load second script
    const script2 = document.createElement('script');
    script2.src = '/src/script-two.js';
    script2.async = true;
    document.body.appendChild(script2);

    // Cleanup on component unmount
    return () => {
      document.body.removeChild(script1);
      document.body.removeChild(script2);
    };
  }, []);

  return <div>Your Page Content</div>;
}

export default YourRouteComponent;

Why This Works #

The nosniff error happens because Webpack wasn’t serving your custom scripts as static assets by default—without proper configuration, the server returns them with an incorrect MIME type (like text/plain instead of application/javascript). By setting up static directory mappings (either via the copy plugin or dev server), you ensure the server sends the correct Content-Type header, which bypasses the nosniff restriction.

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