如何了解React-Router项目中的Webpack配置

Question

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?

Answer 1

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
  }
}))

Answer 2

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"),
   ...
  ],