Question

var webpack = require("webpack");
var path = require("path");

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },

    modules: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query: {
                    presets: [["react","es2015","stage-2"]]

                } 

            }


        ]
    }
};

module.exports = config;


{
  "name": "react-app",
  "version": "1.0.0",
  "description": "my first react app",
  "main": "index.js",
  "scripts": {
    "start": "npm run build",
    "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --hot",
    "build:prod": "webpack -p && cp src/index.html dist/index.html"
  },
  "keywords": [
    "\"React\""
  ],
  "author": "Dnyanesh",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.0.0-beta.40",
    "@babel/preset-env": "^7.0.0-beta.40",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  },
  "devDependencies": {
    "babel-loader": "^8.0.0-beta.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^4.1.0",
    "webpack-cli": "^2.0.10",
    "webpack-dev-server": "^3.1.0"
  }
}

无效的配置对象。 Webpack已使用与API架构不匹配的配置对象进行初始化。 - 配置具有未知属性＆＃39; modules＆＃39;。这些属性是有效的： object {mode？，amd？，bail？，cache？，context？，dependencies？，devServer？，devtool？，entry？，externals？，loader？，module？，name？，node？，output？，optimization ?, parallelism？，performance？，plugins？，profile？，recordsInputPath？，recordsOutputPath？，recordsPath？，resolve？，resolveLoader？，stats？，target？，watch？，watchOptions？ } 错别字：请纠正。对于加载程序选项：webpack＆gt; = v2.0.0不再允许配置中的自定义属性。应该更新加载程序以允许通过module.rules中的加载程序选项传递选项。在加载器更新之前，可以使用LoaderOptionsPlugin将这些选项传递给加载器：插件：[ new webpack.LoaderOptionsPlugin（{ // test：/.xxx$ /，//可能仅适用于某些模块选项：{ 模块：...... } }） ]

Answer 1

由于错误明确指出您的配置应包含module而不是modules，请检查here

Answer 2

const webpack = require('webpack');
const path = require('path');

const DIST_DIR = path.resolve(__dirname,"dist");
const SRC_DIR = path.resolve(__dirname,"src");

module.exports = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module: {
        rules: [
            {
                test: /\.js?$/,
                include: SRC_DIR,
                loaders: "babel-loader",
                options: {
                    presets: ["react", "es2016", "stage-2"]

                }
            }


        ]
    },
    performance: {
        hints: process.env.NODE_ENV === 'production' ? "warning" : false
    }
};

插件：[new webpack.LoaderOptionsPlugin（{// test：/\。xxx $ /，//可能仅适用于某些模块选项：{modules：...}}）]

2 个答案: