如何理解 react-router 项目中的 webpack 配置答案

【问题标题】：How to understand the webpack config in react-router project如何理解 react-router 项目中的 webpack 配置
【发布时间】：2017-01-08 02:52:08
【问题描述】：

我正在通过此链接https://github.com/ReactTraining/react-router/blob/master/docs/guides/DynamicRouting.md 学习 react-router 动态路由。巨大的应用程序项目是我正在研究的项目。我从https://github.com/ReactTraining/react-router 克隆了 react-router git repo 并按照说明进行设置。这里一切正常。但是我不明白examples目录下webpack配置中的某些部分配置。

下面是 webpack 配置的输出：

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

我可以看到所有的输出文件都放在/__build__ 目录下。在 huge-apps/index.html 文件中，我可以看到它加载了 javascript 文件，如下所示：

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

但是我在整个 react-router 项目下找不到__build__ 目录。我也找不到shraed.js 和huge-apps.js 文件。我对 webpack 将这些文件放在哪里感到困惑。从浏览器上的检查中，我可以看到它从 http://localhost:8080/build/huge-apps.js 加载了 javascript 文件。它们只存在于记忆中吗？

【问题讨论】：

标签： javascript reactjs webpack react-router

【解决方案1】：

React Router 示例使用webpackDevMiddleware 处理对__build__ 资源的请求，该资源从内存中提供文件。

来自server.js：

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

【讨论】：

有没有办法配置它从dist而不是内存加载js？
您可以从examples 文件夹中调用webpack 以编译应用程序，然后修改server.js 以使用/__build__ 路径为url 提供静态内容（类似于@ 987654330@，但我没有测试过）。

【解决方案2】：

如果您在开发模式下运行 webpack，所有文件都会加载到内存中。要在其中创建文件，您需要在 webpack 中添加“ExtractTextPlugin”插件

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

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

【讨论】：