Javascript Webpack在npm运行时不生成捆绑文件

大家好,

在做了一个React应用程序之后，我决定深入研究这个网页包。 我对整个npm自动化领域相当陌生，在学习了一本烹饪书和各种教程之后，我不能让

npm运行dev

捆绑我的应用程序。当我运行

webpack

时，它生成一个bundle.js非常好，但吸引我的是每当我更改某些内容时，webpack都会生成一个物理文件。Gulp和Grunt可以帮我做到这一点，但我也想让它与webpack一起工作

因此，无需更多的麻烦，一些代码。我运行

npm-run-dev

，定义如下（

package.json

，仅脚本部分*）：

使用以下网页包配置：

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

module.exports = {
    entry: path.resolve(__dirname, 'src/js/main.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '/js/bundle.js',
        publicPath: '/'
    },
    devServer: {
        inline: true,
        contentBase: './dist'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
    plugins: [
        new webpack.ResolverPlugin([
                new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
            ], ["normal"], "loader")
    ]
};

案例：

webpack

：将我的应用程序绑定到dist/js/bundle.js中，效果非常好。

webpack-dev-server

：似乎可以从我的JS流式传输内存包，但不会在磁盘上生成包。

npm run dev

：启动webpack服务器，但不会导致捆绑，我的应用程序也不会运行，从而导致无法获取/错误

谁能给我指出正确的方向吗？我尝试过配置的变化，但没有用。。为了完整起见，我将显示我的目录结构：

./project
    ./dist
        ./js
            ./bundle.js
    ./src
        ./js
            ./main.js
./package.json
./webpack.config.js

---

再次感谢您的帮助

这是由于package.json文件中的脚本编写错误造成的。将脚本替换为以下内容。这是因为您没有为需要创建的bundle.js文件提供正确的路径。“-p”表示读取webpack.config.js的输入和输出键。然后运行此cmd:

$npm运行构建

"scripts": {
    "build": "webpack -p",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  }

---

对我来说，问题在于“脚本”下的package.json

以下是修复方法：

在package.json文件中，在脚本下添加以下内容：

“脚本”：{
“开始”：“网页包开发服务器”，
“构建”：“网页包-p” }

首先，我运行构建，然后启动

成纱

如果您首先构建bundle.js文件，那么将创建bundle.js文件，然后您可以使用以下命令：

起纱

---

你也可以用npm代替纱线，我明白了。我发现有趣的是，当运行

webpack

命令时，它确实会生成一个bundle.js文件。从我读到的源代码中，包括package.json->scripts节点中的命令，应该可以在运行

npm run dev

时包含该功能。所以问题是

webpack dev server

工作，但

npm run dev

不工作？在这两种情况下，您是否使用相同的参数调用

webpack dev server

？“我发现有趣的是，在运行webpack命令时，它确实会生成一个bundle.js文件。”这就是

webpack

命令应该做的。它们是具有不同用途的不同命令。无论您是直接调用它们还是通过

npm run*

调用它们都没有什么区别。不确定我是否理解问题所在。我希望的是，在运行

npm dev run

时，使用实际的bundle.js文件，而不是与webpack dev server重新绑定和流式处理。由于在调用

webpack

的脚本中包含一个build参数，我假设webpack可以生成物理包，而不是流式传输。因为它在刚进入

webpack

时会创建一个物理路径。请注意，我在npm和/或webpack方面没有那么先进，我只是想了解/让它工作：）因为我确实喜欢这项技术。开发服务器不向磁盘写入数据，我认为没有任何选项可以做到这一点。您可以编写自己的小脚本，启动本地服务器，并在文件更改时自动刷新，如果确实需要磁盘上有一个包的话。这实际上是错误的<代码>-p表示优化[p]生产：

"scripts": {
    "build": "webpack -p",
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
  }