使用webpack-dev-server时，webpack构建中缺少bundle.js文件

Question

我查看了类似的内容，但没有找到一个能解决我的问题的确切答案。尽管我指定了输出路径并且浏览器中一切都正常，但我无法找到bundle.js文件。我知道webpack-dev服务器正在从内存中加载文件，并且没有任何东西被写入磁盘，我该如何建立这个文件并将其添加到在config文件中指定的目录中呢？

这是我的package.json：

    {
    "name": "redux-simple-starter",
    "version": "1.0.0",
    "description": "Simple starter package for Redux with React and Babel support",
    "main": "index.js",
    "repository": "[e-mail]:StephenGrider/ReduxSimpleStarter.git",
    "scripts": {
     "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js -- content-base build"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
      "babel-core": "^6.2.1",
      "babel-loader": "^6.2.0",
      "babel-preset-es2015": "^6.1.18",
      "babel-preset-react": "^6.1.18",
      "react-hot-loader": "^1.3.0",
     "webpack": "^1.12.9",
     "webpack-dev-server": "^1.14.0"
     },
     "dependencies": {
     "babel-preset-stage-1": "^6.1.18",
     "react": "^0.14.3",
     "react-dom": "^0.14.3",
     "react-redux": "^4.0.0",
     "redux": "^3.0.4"
    }
    }

Webpack配置：

    var path = require('path');
    var webpack = require('webpack');

    module.exports = {
     entry: [
       'webpack-dev-server/client?http://localhost:8080',
       'webpack/hot/only-dev-server',
       './src/index.js'
     ],
     output: {
       path: path.join(__dirname, 'assets'),
       publicPath: '/',
       filename: 'bundle.js'
     },
     module: {
       loaders: [{
         exclude: /node_modules/,
         loader: 'babel'
       }]
     },
     resolve: {
       extensions: ['', '.js', '.jsx']
     },
     devServer: {
       contentBase: './'
     },

     plugins: [
       new webpack.HotModuleReplacementPlugin()
     ]
    };       

- Abdi

---

我相信我以前见过这个 - 当运行 webpak-dev-server 时，我不相信 bundle.js 实际上会被创建，而只是存储在内存中。我怀疑如果你运行简单的纯净的 webpack 命令来构建项目，你将会在你的 assets 目录下看到你的 bundle.js。再次尝试从你的终端运行 webpack 命令。 - lux

@lux 很好！你应该把它作为一个答案发布！ - Abdi

Answer 1

当使用开发服务器时，输出结果将被放置在服务器上，因此您实际上无法在文件中看到它。您需要从 index.html 文件中从服务器加载它。

例如，对于我的应用程序，我首先加载开发服务器，然后是供应商文件和自己的代码。

<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="http://localhost:8080/build/vendor.js"></script>
<script src="http://localhost:8080/build/app.js"></script> 

这是我的webpack配置文件的相关部分。由于以前也从静态构建包中加载，所以有一些不必要的旧代码。

  app: [
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:8080',
        './client/index.js'
        ]

},
output: {
    path: __dirname + '/client/build',
    publicPath: '/build/',
    filename: '[name].js',
    pathinfo: true
},

- Austin Shoecraft

---

我知道它是从webpack服务器加载的，但我想要实际文件在我的目录中，这样我就可以在另一个环境中使用它，如果这样说的话。 - Abdi

这更像是一个设计问题，而不是一个webpack问题。如果您无法从服务器简单地引用构建，则应重新考虑在这种情况下要做什么。 - Austin Shoecraft

@AustinShoecraft，想象一下开发和生产环境。在生产环境中，您只需要放置内联JS文件，但在开发环境中，您可能需要热重载。如果您从服务器提供HTML，则无法使用Webpack开发服务器，因为它不会更改磁盘上的文件。 - Mr Jedi

Answer 2

这个Webpack插件可以强制服务器将程序包写入磁盘。

虽然我同意Austin和lux的观点，但如果需要将文件写入磁盘，请直接调用Webpack。

- Alejandro Napoles

Answer 3

请在webpack.config.js文件中包含以下脚本。

devServer: {
  writeToDisk: true
}

- Vivek

Answer 4

将您的 package.json 文件中的 scripts 对象替换为以下内容：

"scripts": {
     "start": "npm run build",
     "build": "webpack -p && ./node_modules/webpack-dev-server/bin/webpack-dev-server.js -- content-base build"
},

然后，运行$ npm start。

- solanki...

Answer 5

你也可以在配置文件中使用一个标志告诉Webpack进行监听。这将生成捆绑文件。

module.exports = {
    watch: true,
};

- Sun