Webpack 2 - 'Debug'出错

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Webpack 2 - 'Debug'出错相关的知识,希望对你有一定的参考价值。

从webpack 1升级到webpack 2.运行时出错...

WebpackOptionsValidationError:无效的配置对象。 Webpack已使用与API架构不匹配的配置对象进行初始化。 - 配置具有未知属性'debug'。这些属性是有效的:

我已经为web pack.config.js文件包含了我的代码。

非常感谢有关此问题的任何帮助。

'use strict';

/**
 * Module dependencies
 */
var path = require('path'),
  webpack = require('webpack'),
  htmlWebpackPlugin = require('html-webpack-plugin'),
  minimist = require('minimist'),
  ngAnnotatePlugin = require('ng-annotate-webpack-plugin');


var argv = minimist(process.argv.slice(2));
var DEBUG = !argv.release;
var STYLE_LOADER = 'style-loader';
var CSS_LOADER = DEBUG ? 'css-loader' : 'css-loader?minimize';

var GLOBALS = {
  'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
  '__DEV__': DEBUG
};


module.exports = {

  output: {
    path: path.join(__dirname, 'www'),
    filename: '[name].js',
    chunkFilename: '[chunkhash].js'
  },

  devtool: 'source-map',

  cache: DEBUG,
  debug: DEBUG,

  stats: {
    colors: true,
    reasons: DEBUG
  },

  entry: {
    app: ['./app/index.js']
  },

  module: {
    //preLoaders: [{
    //  test: /.js$/,
    //  exclude: /node_modules|dist|www|build/,
    //  loader: 'eslint-loader'
    //}],

    rules: [{
      test: /.css$/,
      loader: 'style-loader!css-loader'
    }, {
      test: /.html$/,
      loader: 'html'
    }, {
      test: /.json$/,
      loader: 'json'
    }, {
      test: /.scss$/,
      loader: 'style!css!sass'
    }, {
      test: /.(woff|ttf|eot|svg)(?v=[0-9].[0-9].[0-9])?$/,
      loader: 'url?prefix=font/&limit=10000&name=font/[hash].[ext]'
    }, {
      test: /[/]angular.js$/,
      loader: 'exports?angular'
    }, {
      test: /[/]ionic.js$/,
      loader: 'exports?ionic'
    }, {
      test: /.*.(gif|png|jpe?g)$/i,
      loaders: [
        'file?hash=sha512&digest=hex&name=img/[hash].[ext]',
        'image-webpack?{progressive:true, optimizationLevel:1, interlaced: false, pngquant:{quality: "65-90", speed: 4}}'
      ]
      //' + DEBUG ? '1' : '7' + '
    }]
  },

  resolve: {
    modules: [
      'node_modules'
    ],
    alias: {}
  },

  plugins: [

    new HtmlWebpackPlugin({
      pkg: require('./package.json'),
      template: 'app/entry-template.html'
    }),
    new ngAnnotatePlugin({
      add: true
    })
    // new webpack.optimize.DedupePlugin(),
    // new webpack.optimize.UglifyJsPlugin()
    // new webpack.BannerPlugin(banner, options),
    // new webpack.optimize.DedupePlugin()
  ]
};
答案

这是一个迁移指南,查找它声明已在loaderoptionsplugin下移动的调试属性

plugins: [ new webpack.LoaderOptionsPlugin({ debug: true }) ]

https://webpack.js.org/guides/migrating/

附注:如果要迁移到版本2,为什么不升级到版本4?

以上是关于Webpack 2 - 'Debug'出错的主要内容,如果未能解决你的问题,请参考以下文章

TypeError: Cannot read property 'compilation' of undefined

[转] webpack debug in webstorm

Angular 13 Webpack 异常:TypeError:无法读取未定义的属性(读取“NODE_DEBUG”)

webpack 问题Can't resolve webpack/hot/dev-server'怎么解决

Vue学习之webpack打包报The 'mode' option has not been set

React 使用webpack构建React项目