web-dev-qa-db-ja.com

webpackの無効な設定オブジェクト

私は Lynda.com-React.jsの基本トレーニング Eve Porcelloをフォローしています。ビデオ「Building with Webpack」では、著者が正確に説明した手順に従いましたが、「webpack」コマンドが次のエラーを出して失敗しました。

無効な設定オブジェクト。 Webpackは、APIスキーマと一致しない構成オブジェクトを使用して初期化されています。 -configuration.output.path：指定された値「dist/assets」は絶対パスではありません！

以下は私のwebpack.config.jsおよびpackage.jsonファイルです。

webpack.config.js

var webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: "dist/assets",
    filename: "bundle.js",
    publicPath: "assets"
  },
  devServer: {
    inline: true,
    contentBase: "./dist",
    port: 3000
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: "babel-loader",
        query: {
          presets: ["latest", "stage-0", "react"]
        }
      }
    ]
  }
}

package.json

{
  "name": "react-essential",
  "version": "1.0.0",
  "description": "A project focusing on React and related tools",
  "main": "index.js",
  "scripts": {
    "start": "httpster -d ./dist -p 3000"
  },
  "author": "Indu Pillai",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-loader": "^6.4.1",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "webpack": "^2.3.2",
    "webpack-dev-server": "^2.4.2"
  }
}

この手順を何度も繰り返しましたが、うまくいきません。私はこのwebpackのことを初めて知っているので、問題が実際に何であり、どのような絶対パスが必要なのかを知ることができません。また、別の（同様の）質問へのいくつかの答えが示唆する絶対パスを試しましたが、うまくいきませんでした。

ありがとうございました！

javascriptjsonreactjsnpmwebpack
14
Indu Pillai

これは最新のwebpackでコンパイルされます-2017年4月10日の時点：

var webpack = require("webpack");

module.exports = {
    entry: __dirname + "/src/index.js",
    output: {
        path: __dirname + "/dist/assets",
        filename: "bundle.js",
        publicPath: "assets"
    },
    devServer: {
        inline: true,
        contentBase: __dirname + "/dist",
        port: 3000
    },
    module: {
        rules: [{
            test: /\.js$/,
            loader: ["babel-loader"],
        }]
    }
}
18
Jean-Louis Brunet

このチュートリアルはWebpackのバージョン1で行われましたが、最新のバージョン2を使用します。

次の移行ガイドに従って、コードを実行できます。 https://webpack.js.org/migrate/3/

アップグレードされた構成は次のとおりです

var webpack = require("webpack");
var folder = __dirname;

module.exports = {
  entry: "./src/index.js",
  output: {
    path: folder + "dist/assets",
    filename: "bundle.js",
    publicPath: "/assets"
  },
  devServer: {
    inline: true,
    contentBase: folder + "dist",
    port: 3000
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: "babel-loader",
        query: {
          presets: ["latest", "stage-0", "react"]
        }
      }
    ]
  }
}
2
Kmaschta

〜loaders〜を〜rules〜に置き換えます

module: {
    loaders: [
        {

どうやらここのWordローダーはルールに置き換えられたので、正しいのは次のとおりです。

module: {
    rules: [
        {
2
Leo Leao

補足として、演習ファイルでは、インストラクターはbabelローダーに次の構文を使用します。

loaders: [
    {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: ["babel-loader"],
        query: {
            presets: ["latest", "stage-0", "react"]
        }
    },
]

webpack 2.5.0ではエラーで失敗します：

Error: options/query cannot be used with loaders (use options for each array item)

これは、「バベルローダー」の周りのブラケットを削除することで解決されます。

loader: "babel-loader", //no brackets - not an array

または、「use」構文を使用してローダーとそれに対応するオプションを指定します。

loaders: [
    {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['latest', 'stage-0', 'react']
            }
        }
    }
]

Lyndaのあちらこちらで修正されることを願っています！これらの新しいテクノロジーは非常に急速に進化しています！ babel-loaderの詳細： https://github.com/babel/babel-loader

1
paulular

Webpackはcreate-react-appよりも少し難しいです。 https://facebook.github.io/react/docs/installation.html の次のコマンドを使用して、Reactプロジェクトを作成する最も簡単で簡単な方法

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Create-react-appはjsxコードをコンパイルしてwebpackなどのすべてのことを行うため、コースのすべての反応コードに従うことができますが、webpackを期待できます。

1
Naveed Aheer

新しいバージョンのwebpackに移行すると、このエラーが発生します。これを解決するには、次のようにディレクトリへの絶対パスを指定する必要があります

module.exports = {
    entry: __dirname + '/src/index.js',
    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    }
};
0
iamsangeeth

これをwebpack v3の最新バージョンで動作させるには、webpack.config.jsファイルを少し変更する必要があります。更新後、コードは次のようになります。

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

            module.exports = {
                entry: path.resolve(__dirname + "/src/index.js"),
                output: {
                    path: path.resolve(__dirname + "/dist/assets"),
                    filename: "bundle.js",
                    publicPath: "assets"
                },
                devServer: {
                    inline: true,
                    contentBase: __dirname + '/dist',
                    port: 3000
                },
                module: {
                    loaders: [
                        {
                            test: /\.js$/,
                            exclude: /(node_modules)/,
                    use: {
                    loader: "babel-loader",
                            options: {
                                presets: ["latest", "stage-0", "react"]
                            }
                        }
                }
                    ]
                }
            }

package.jsonファイルは次のようになります

    {
      "name": "activity-counter-application",
      "version": "1.0.0",
      "description": "A project focusing on building Activity Counter using React and related tools",
      "main": "./index.js",
      "scripts": {
        "start": "./node_modules/.bin/webpack-dev-server"
      },
      "author": "RJ",
      "license": "MIT",
      "devDependencies": {
        "babel-cli": "^6.24.1",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "babel-preset-latest": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "babel-preset-stage-0": "^6.24.1",
        "webpack": "^3.5.1",
        "webpack-dev-server": "^2.7.0"
      },
      "dependencies": {
        "react": "^15.6.1",
        "react-dom": "^15.6.1"
      }
    }
0
Rakesh Jain

Output.pathを絶対パスとして定義する必要があります

Webpack.config.jsの前に次の行を追加できます

 var path = require('path')

出力を次のように変更します

 output: {
   path: path.resolve(__dirname, "dist/assets"),
   filename: "bundle.js",
   publicPath: "assets"
 }
0
Yu Huang

私は同じ問題を抱えていました。そこで、インストールプロセスをより簡単かつ高速にするシェルスクリプトを作成しました。

forLinuxユーザー

これを試してください bash script auto_conf_wb そしてそれ

  • ダウンロード
  • インストールする
  • 構成webpack
  • 構成babel
  • 構成sever

あなたのために。

はES6+、webpack、babelを一緒に。

0
Shakiba Moshiri

webpack.config.jsファイルの先頭にconst path = require('path');を追加し、パスがpath: path.resolve(__dirname, 'dist/assets'),のようになっていることを確認してください

0
Dushan