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

Question

我看了类似的，但找不到解决我问题的具体答案。我找不到 bundle.js 文件，即使我指定了它应该输出的位置并且一切都在浏览器中工作。我知道 webpack-dev 服务器正在从内存中加载文件并且没有任何内容写入磁盘，我如何才能构建文件并将其添加到配置文件中输出属性中指定的目录？

这是我的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": "git@github.com: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()
     ]
    };

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

Answer 2

此 Webpack plugin 强制服务器将包写入磁盘。

虽然我同意 Austin 和 lux 的观点，但如果您需要将文件放在磁盘中，请直接调用 webpack。

Answer 3

您还可以使用配置中的标志告诉 webpack 观看。这将生成捆绑文件

module.exports = {
    watch: true,
};

Answer 4

将 package.json 文件的脚本对象替换为以下对象：

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

然后，运行 $ npm start

Answer 5

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

devServer: {
  writeToDisk: true
}

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

bundle.js missing from webpack build when using webpack-dev-server

javascript

reactjs

webpack

webpack-dev-server