webpack中的配置对象无效。

Question

webpack中的配置对象无效。

21

我正在跟随Eve Porcello的Lynda.com - React.js essential training。在视频“使用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还很陌生，所以我无法找出问题所在，也不知道需要哪种绝对路径。我还尝试了另一个（类似）问题的答案建议的绝对路径，但那也没有起作用。

谢谢！

- Indu Pillai

可能是重复的问题：无效的配置对象output.path不是绝对路径。 - Michael Jungo

你提供的副本对我不起作用。 - Indu Pillai

11个回答

5

我正在学习与你相同的课程，为了使Webpack正确输出bundle.js文件，我必须执行以下步骤：

Uninstall the latest webpack (2, if you just used npm install webpack)
Then in terminal run npm install -g webpack@1.13.3 (she recommends using sudo npm install -g so it's up to you on that one to use sudo or not)
The next issue few issues webpack was throwing may only apply to me but I had to require('path') because I got non-resolving path errors, and also had to npm install babel-loader because it wasn't being loaded through the package.json file for whatever reason, that also needed a path.resolve addition for the node_modules folder

My webpack.config file looks like the following now:

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

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

Finally, running webpack --display-error-details showed me what the errors were, but the config file I pasted here worked for me in the end.

需要注意的是，这将（希望）让您完成课程本身，但它不会帮助您学习已更新或需要迁移的内容，以保持当前并使用Webpack 2。这里有其他处理迁移的答案也应该被查看。

希望这能帮到您！

- rgjr

4

使用“规则（rules）”替换“加载器（loaders）”

module: {
    loaders: [
        {

显然这里的单词“loaders”被替换成了“rules”，因此正确的应该是：

module: {
    rules: [
        {

- Leo Leao

谢谢！互联网上有很多旧的例子使用“加载器”而不是“规则”，这就是修复方法。 - Andrew Koster

对于任何正在跟随 Sumar Buma 进行全栈 JavaScript 教程并遇到此问题的人，以下解决方法适用。 - ANimator120

2

这个教程是基于Webpack 1版本制作的，但是你正在使用更高版本的Webpack 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"]
        }
      }
    ]
  }
}

- Kmaschta

什么是错误？我可能在我的代码中犯了一个错误。 - Kmaschta

1

迁移指南链接为404。 - Phil

我已经更新了迁移指南的链接：https://webpack.js.org/migrate/3/ - Kmaschta

1

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

你可以跟随课程中的所有React代码，但不包括Webpack，因为create-react-app会编译JSX代码并完成Webpack等所有工作。

- Naveed Aheer

谢谢，我知道那个方法，但我想按照他们的教程步骤来做。 - Indu Pillai

1

作为一个附注，在练习文件中，讲师使用这种语法来加载 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)

这可以通过删除“babel-loader”周围的括号来解决：

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。

- paulular

0

为了使它与最新版本的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"
      }
    }

- Rakesh Jain

0

我也遇到了同样的问题，而且还有一些其他的问题。因此，我创建了一个shell脚本，使安装过程更简单、更快速。

针对Linux用户

尝试使用此bash脚本auto_conf_wb，它会

下载
安装
配置webpack
配置babel
配置sever

为您完成。

请注意，这仅适用于同时使用ES6+，webpack和babel的情况。

- Shakiba Moshiri

0

请确保在您的webpack.config.js文件顶部添加了const path = require('path');，并且路径应该像这样path: path.resolve(__dirname, 'dist/assets'),。

- Dushan

0

当你迁移到新版本的webpack时，会出现这个错误。为了解决这个问题，你需要提供你的目录的绝对路径，像这样：

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

- the_haystacker

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jean-Louis Brunet · Accepted Answer

这将与最新的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"],
        }]
    }
}