where does /static/js folder come from?

user_9623401 0
Viewed 2709

I'm new to React, just a question on the bundle js files produced by webpack. Currently when I I run my app, and I check chrome dev tool, I found 0.chunk.js, bundle.js, main.chunk.js are under localhost/static/js, I don't have static folder in my react app, so where does /static/js folder come from? was it create by chrome?

webpack reactjs
1 Answers

Those files are generated by webpack. To specify, you can run command npm run eject then you can see a folder named scripts.

In this folder, first let's check file start.js where run when you run npm start.

const devServer = new WebpackDevServer(compiler, serverConfig);

It using WebpackDevServer create a dev server run on your local to host your app, so you can access app through localhost:3000. Next let's check compiler parameter.

const compiler = createCompiler({
      appName,
      config,
      devSocket,
      urls,
      useYarn,
      useTypeScript,
      webpack,
    });

Inspect config you can see it created from configFactory 

const config = configFactory('development');

Check configFactory you can see it is a function return server configuration as an object include property named output. 

output: {
    ...
    filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/bundle.js',
      // TODO: remove this when upgrading to webpack 5
      futureEmitAssets: true,
      // There are also additional JS chunk files if you use code splitting.
      chunkFilename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].chunk.js'
        : isEnvDevelopment && 'static/js/[name].chunk.js',
}

Here is what you are looking for.

user_120773760
Related