Webpack不会在npm运行时生成包文件

Question

问候一个,所有,

在做了React应用程序后,我决定深入研究Webpack.我是整个npm自动化领域的新人,在阅读了一本食谱和各种教程后,我不能让npm run dev我的应用程序捆绑.它在我运行时生成了一个完全正常的bundle.js webpack,但吸引我的是每当我改变某些东西时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服务器,但不会导致捆绑,也不会运行我的应用程序,导致无法获取/错误.

谁能指出我正确的方向？我已经尝试了配置的变体,但无济于事.只是为了完成,我将显示我的目录结构:

./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"
  }