Question

问候一个人，

在做了React应用之后，我决定深入研究Webpack。我对整个npm自动化领域都很陌生，在阅读了一本食谱和各种教程之后，我不能让npm run dev捆绑我的应用程序。当我运行webpack时，它会生成一个完全正常的bundle.js，但是对我来说很有吸引力的是每当我改变某些东西时webpack都会生成一个物理文件。 Gulp和Grunt可以为我做这件事，但我也想让它与webpack一起工作。

所以，不用多说，一些代码。我运行npm run dev，其定义如下（package.json，只是脚本部分*）：

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

使用以下Webpack配置：

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服务器，但不会产生捆绑，也不会运行我的应用程序，导致无法GET / 错误。

有人能指出我正确的方向吗？我已尝试过配置的变体，但无济于事。只是为了完成，我将显示我的目录结构：

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

再次感谢您的帮助！

Answer 1

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

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

Answer 2

对我来说问题出在“脚本”

下的package.json

以下是修复：

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

“脚本”：{
     “开始”：“webpack-dev-server”，
     “build”：“webpack -p”    }

首先我运行构建然后开始。

纱线构建

如果您第一次构建，那么将创建您的bundle.js文件，之后您可以使用此命令：

纱线开始

您也可以使用npm

代替纱线

Webpack不会在npm run

2 个答案: