Question

我无法在开发模式下配置Webpack来进行反应。

这是我的包裹JSON：

  ...
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-es2015": "^6.24.1",
    "gulp": "^4.0.0",
    "gulp-sass": "^4.0.1",
    "webpack": "^4.12.2",
    "webpack-stream": "^4.0.3"
  }
  ...

我在浏览器中收到此error：

未捕获的错误：最小的React错误＃37；请访问http://facebook.github.io/react/docs/error-decoder.html?invariant=37查看完整消息，或使用非缩小版开发环境

当我将Web Pack设置为模式开发时：

const DIR_PAGES        = path.join(__dirname, 'pages');
const DIR_TARGET       = path.join(__dirname, '..', 'assets');
const DIR_TARGET_PAGES = path.join(__dirname, '..', 'assets', 'pages'); 
module.exports = {
    mode: "development",

    /**
     * DEFINE PAGES JS HERE
     */
    entry: {
        'test' : path.join(DIR_PAGES, 'test', 'test.js'),
    },


    resolve: {
        extensions: ['.js', '.jsx']
    },

    /**
     * HOW TO TRANSCODE JAVASCRIPT
     */
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
    },


    /**
     * OUTPUT LOCATION
     */
    output: {
        path: DIR_TARGET_PAGES,
        filename: '[name]/[name].js'
    },

};

我正在使用webpack-stream进行构建。这是我的构建任务：

const webpack_stream = require('webpack-stream');
const webpack_config = require('./webpack.config.js');

gulp.task('webpack', function() {
    return webpack_stream(webpack_config)
        .pipe(gulp.dest(DIR_TARGET_JS));
});

在使用gulp构建Web Pack时，我得到了error：

[13:57:12] 'webpack' errored after 161 ms
[13:57:12] WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'mode'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           mode: ...
         }
       })
     ]


...

我不知道该怎么办，请您帮忙

谢谢

webpack反应开发模式

0 个答案: