skip to Main Content

I have had lingering questions about how webpack dev server emulates an output .js file that is an html file’s dependency. The current issue highlights this lack of understanding.

Here is a part of public/admin.html

<h1>admin.html</h1> // displays as expected
<div id="reactAdminDiv"></div>
<script src="adminArea.output.js"></script> // GET http://localhost:3000/adminArea.output.js net::ERR_ABORTED 404 (Not Found)

From AdminAreaFull.tsx

ReactDOM.render(<AdminAreaFull />, document.getElementById("reactAdminDiv"));

And my webpack.config.js:

const webpackConfiguration = {
  entry : {
    productFlow : "./frontEnd/productFlow/index.tsx"
    , adminArea : "./adminArea/AdminAreaFull.tsx"
  }
  , output : {
    filename : "public/[name].output.js"
    , path : path.join(__dirname, "public")
  }
  , watch : true
  // , watchOptions : { aggregateTimeout : 300 }
  , devtool : 'inline-source-map'
  , mode : "development"
  , devServer : {
    port: 3000
    , contentBase : ['./public']
    , hot : true
    , historyApiFallback : true
  }
  , plugins : [
    new webpack.HotModuleReplacementPlugin(),
    new dotEnvWebpack
  ]
  , node : {
    fs: "empty" // for dotenv to work correctly
  }
  , resolve : { extensions : ['.ts', '.tsx', '.js'] }
  , module : {
      rules : [
        {
        test : /.ts(x?)$/
        , use : {
          loader: 'awesome-typescript-loader'
        }
        , exclude : [/node_modules/, /outputScripts/, /.dependabot/, /.next/, /.idea/, /lib/, /pages/, /.dependabot/]
      }, {
        enforce : 'pre'
          , test : /.js$/
          , loader : 'source-map-loader'
        }
      ]
  }
};

when running webpack-dev-server in terminal:

「wds」: Project is running at http://localhost:3000/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /home/owner/PhpstormProjects/shopify/buyUsed/public
ℹ 「wds」: 404s will fallback to /index.html

I suppose I don’t have my output settings correct, or maybe there is a misconfiguration under devServer. Any pointers would be appreciated.

2

Answers


  1. Chosen as BEST ANSWER

    Fixed by

    1. Running npx webpack which builds the bundle files.
    2. Re-running webpack-dev-server

    It will auto-update from there. The important thing is that the output file must be generated before using webpack dev server


  2. I think you could try setting a different contentBase for devServer:
    try

    contentBase: [path.join(__dirname, "public")]
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search