webpack --json:错误:'output.filename'是必需的

时间:2017-09-28 17:30:35

标签: node.js webpack

我有一个有效的webpack.config.js我经常用于开发,其中包含以下内容:

var path = require('path')
const merge = require('webpack-merge');
const NpmInstallPlugin = require('npm-install-webpack2-plugin');
var webpack = require('webpack')
var ManifestPlugin = require('webpack-manifest-plugin')
var InlineChunkManifestHtmlWebpackPlugin = require('inline-chunk-manifest-html-webpack-plugin')
var WebpackChunkHash = require("webpack-chunk-hash")
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var CleanWebpackPlugin = require('clean-webpack-plugin')

const proxyTarget = 'http://localhost:2246/'
const visitPort = '8056'

const isMinimize =false

const outputFolderName = ''
const TARGET = process.env.npm_lifecycle_event;

isDebug = process.env.NODE_ENV === 'production' ?
        true :
        false;

const common = {
    entry: './src/app.js',
    devServer: {
      hot: true,
      historyApiFallback: true,
      noInfo: true
    },
    performance: {
        hints: false
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        }
    },
    module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test: /\.(woff|woff2|ttf|eot)(\?\S*)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
    resolve : {
        alias: {
            'vue$': 'vue/dist/vue'
        }
    }
}

if (process.env.NODE_ENV === 'production') {
    module.exports.plugins = [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"production"'
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]
} else {
    module.exports.devtool = '#source-map'
}

if(TARGET === 'build') {
    module.exports = merge(common, 
      {
        devtool: 'source-map',
      });
}

if(TARGET === "dev-server") {
    module.exports = merge(common, {
        devtool: 'cheap-module-eval-source-map',
        devServer: {
            historyApiFallback: true,
            hot: true,
            inline: true,
            stats: true,
            noInfo: true,
            quiet: true,

            stats: 'errors-only',
            // host: process.env.HOST,
            port: 3001
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new NpmInstallPlugin({
                save: true // --save
            })
        ]
    });
}

以下npm run命令位于package.json,所有命令都成功运行

"scripts": {
    "dev-server": "cross-env NODE_ENV=development webpack-dev-server",
    "dev": "cross-env NODE_ENV=development electron ./",
    "build": "cross-env NODE_ENV=production webpack --progress --profile --colors",
    "start": "cross-env NODE_ENV=production electron ./",
    "package": "npm run build; npm run package-osx; 
}

问题

我正在尝试使用webpack-bundle-size-analyzer来检查捆绑的软件包。以下命令

$ webpack --json | webpack-bundle-size-analyzer

产生了此错误

/usr/local/lib/node_modules/webpack/bin/convert-argv.js:507
                throw new Error("'output.filename' is required, either in config file or as --output-filename");
                ^
Error: 'output.filename' is required, either in config file or as --output-filename
    at processOptions (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:507:11)
    at processConfiguredOptions (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:150:4)
    at module.exports (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:112:10)
    at yargs.parse (/usr/local/lib/node_modules/webpack/bin/webpack.js:171:41)
    at Object.Yargs.self.parse (/usr/local/lib/node_modules/webpack/node_modules/yargs/yargs.js:533:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/webpack/bin/webpack.js:152:7)
    at Module._compile (module.js:573:30)
    at Object.Module._extensions..js (module.js:584:10)
    at Module.load (module.js:507:32)
    at tryModuleLoad (module.js:470:12)
    at Function.Module._load (module.js:462:3)
    at Function.Module.runMain (module.js:609:10)
    at startup (bootstrap_node.js:158:16)
    at bootstrap_node.js:598:3
Error: The input is not valid JSON.

Check that:
 - You passed the '--json' argument to 'webpack'
 - There is no extra non-JSON content in the output, such as log messages.

The parsing error was:

  SyntaxError: Unexpected end of JSON input

webpack:3.6.0

webpack-bundle-size-analyzer:2.7.0

附加说明

  1. 我已在项目目录
  2. 的根目录验证了webpack.config.js文件
  3. 据我所知,webpack.config.js文件中没有拼写错误
  4. 我只需要从webpack输出一个简单的JSON来提供给webpack-bundle-size-analyzer

0 个答案:

没有答案