CODEWITHSUNDEEP
javascriptreactjswebpackreact-router
Joey Yi Zhao
Joey Yi Zhao

Reputation: 42546

How to understand the webpack config in react-router project

I am learning react-router dynamic routing from this link https://github.com/ReactTraining/react-router/blob/master/docs/guides/DynamicRouting.md. The huge-apps project is the one I am looking into. I cloned the react-router git repo from https://github.com/ReactTraining/react-router and followed the instruction to set it up. Everything works fine here. But I don't understand some parts of the configuration in webpack configuration under examples directory.

Below is the output of the webpack config:

output: {
    path: __dirname + '/__build__',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js',
    publicPath: '/__build__/'
  },

I can see that all the output files are put under /__build__ directory. In huge-apps/index.html file, I can see it load the javascript files as below:

<script src="/__build__/shared.js"></script>
<script src="/__build__/huge-apps.js"></script>

But I couldn't find the __build__ directory under the entire react-router project. And I couldn't find the shraed.js and huge-apps.js file either. I am confused about where webpack put these files. From the inspect on browser I can see it loads the javascript files from http://localhost:8080/build/huge-apps.js. Are they in memory only?

Upvotes: 0

Views: 114

Answers (2)

Khalid Azam
Khalid Azam

Reputation: 1643

If you are running webpack indevelopment mode all the file get loaded in memory. to create the file in you need to add "ExtractTextPlugin" plugin in webpack

 output: {
    path: __dirname + '/__build__',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js',
    publicPath: '/__build__/
  },

  plugins: [
     ....
    new ExtractTextPlugin("[name].css"),
   ...
  ],

Upvotes: 0

Paul S
Paul S

Reputation: 36787

The React Router examples use webpackDevMiddleware to handle requests to __build__ resources, which serves files from in-memory.

From server.js:

app.use(webpackDevMiddleware(webpack(WebpackConfig), {
  publicPath: '/__build__/',
  stats: {
    colors: true
  }
}))

Upvotes: 1

Related Questions