Javascript webpack 中的配置对象无效

Question

提问by Indu Pillai

I am following Lynda.com - React.js essential trainingby Eve Porcello. In the video "Building with Webpack", I followed the steps author described exactly, but the "webpack" command failed giving the following error,

我正在关注Lynda.com -Eve Porcello 的React.js 基本培训。在视频“使用 Webpack 构建”中，我完全按照作者描述的步骤进行操作，但是“webpack”命令失败并出现以下错误，

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.output.path: The provided value "dist/assets" is not an absolute path!

无效的配置对象。Webpack 已使用与 API 架构不匹配的配置对象进行初始化。- configuration.output.path：提供的值“dist/assets”不是绝对路径！

Following are my webpack.config.js and package.json files.

以下是我的 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

包.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"
  }
}

I repeated the steps again and again, but it's not working. I'm pretty new to this webpack thing, so I'm not able to find out what the problem really is, and what kind of absolute path it requires. I also tried an absolute path suggested by some answer to another (similar) question, but that didn't work.

我一遍又一遍地重复这些步骤，但它不起作用。我对这个 webpack 东西很陌生，所以我无法找出问题的真正所在，以及它需要什么样的绝对路径。我还尝试了另一个（类似）问题的一些答案所建议的绝对路径，但这没有用。

Thank you!

谢谢！

Answer 1

回答by Jean-Louis Brunet

This will compile with latest webpack - as of Apr 10, 2017:

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

Answer 2

回答by rgjr

I am doing the same course as you and I had to do the following to get Webpack to output the bundle.js file correctly:

我正在做与您相同的课程，我必须执行以下操作才能让 Webpack 正确输出 bundle.js 文件：

Uninstall the latest webpack (2, if you just used npm install webpack)
Then in terminal run npm install -g [email protected](she recommends using sudo npm install -gso it's up to you on that one to use sudoor 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-loaderbecause it wasn't being loaded through the package.jsonfile for whatever reason, that also needed a path.resolveaddition for the node_modulesfolder

My webpack.configfile 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-detailsshowed me what the errors were, but the config file I pasted here worked for me in the end.

卸载最新的webpack（2，如果你刚用过npm install webpack）
然后在终端运行npm install -g [email protected]（她建议使用，sudo npm install -g所以使用sudo与否取决于您）
下一个问题 webpack 抛出的几个问题可能只适用于我，但我不得不这样做，require('path')因为我遇到了无法解析的路径错误，并且还不得不npm install babel-loader因为package.json任何原因没有通过文件加载它，这也需要path.resolve添加该node_modules文件夹

我的webpack.config文件现在如下所示：

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']
            }
        }]
    }
}

最后，运行webpack --display-error-details向我展示了错误是什么，但我在这里粘贴的配置文件最终对我有用。

It should be noted that this will (hopefully) allow you to finish the course itself, but it won't help you learn what was updated or needs to be migrated in order to stay current and use Webpack 2. There are other answers here that deal with migrating that should be looked into as well.

应该注意的是，这将（希望）允许您完成课程本身，但它不会帮助您了解更新或需要迁移的内容以保持最新状态并使用 Webpack 2。这里还有其他答案处理迁移也应该考虑。

Hope this helps you!

希望这对你有帮助！

Answer 3

回答by Leo Leao

replace ~loaders~ by ~rules~

将 ~loaders~ 替换为 ~rules~

module: {
    loaders: [
        {

Apparently the word loaders here was replaced by rules, so the correct should be:

显然这里的单词加载器被规则取代，所以正确的应该是：

module: {
    rules: [
        {

Answer 4

回答by Kmaschta

This tutoriel was done with the version 1 of Webpack but you uses a most recent version 2.

本教程是使用 Webpack 的第 1 版完成的，但您使用的是最新的第 2 版。

You can follow this migration guide to make your code run: https://webpack.js.org/migrate/3/

你可以按照这个迁移指南来运行你的代码：https: //webpack.js.org/migrate/3/

Here is your upgraded configuration

这是您升级后的配置

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"]
        }
      }
    ]
  }
}

Answer 5

回答by Naveed Aheer

Webpack is little difficult than create-react-app. the simplest and easiest way to create react projects by using following commands by https://facebook.github.io/react/docs/installation.html

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

You can follow all react code from the course but expect webpack because create-react-app compile jsx code and do every thing of webpack etc.

您可以遵循课程中的所有反应代码，但期望使用 webpack，因为 create-react-app 编译 jsx 代码并完成 webpack 等的所有操作。

Answer 6

回答by paulular

As a side note, in the exercise files, the instructor uses this syntax for the babel loader:

附带说明一下，在练习文件中，讲师对 babel 加载器使用以下语法：

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

which fails on webpack 2.5.0 with an error:

在 webpack 2.5.0 上失败并出现错误：

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

This is solved by removing the brackets around "babel-loader":

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

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

or by specifying the loader and its corresponding options through the "use" syntax:

或者通过“use”语法指定加载器及其相应的选项：

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

Hopefully they get that fixed over there at Lynda! These new technologies evolve so rapidly! For more info on the babel-loader: https://github.com/babel/babel-loader

希望他们能在琳达那里解决这个问题！这些新技术发展得太快了！有关 babel-loader 的更多信息：https: //github.com/babel/babel-loader

Answer 7

回答by Rakesh Jain

To make this work with latest version of webpack v3 you need to make few chages to webpack.config.js file. Your code should look like this after updating

要使用最新版本的 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"]
                            }
                        }
                }
                    ]
                }
            }

and your package.json file should look like this

你的 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"
      }
    }

Answer 8

回答by Dushan

Make sure that you added the const path = require('path');to the top of your webpack.config.jsfile and path should be like path: path.resolve(__dirname, 'dist/assets'),

确保您将webpack.config.js文件和路径添加const path = require('path');到顶部path: path.resolve(__dirname, 'dist/assets'),

Answer 9

回答by Yu Huang

You need to define the output.path as absolute path

您需要将 output.path 定义为绝对路径

You can add the following line in the front of webpack.config.js

可以在 webpack.config.js 前面添加以下行

 var path = require('path')

and change the output to the following

并将输出更改为以下内容

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

Answer 10

回答by the_haystacker

when you migrate into new version of webpack, this error will occur. For solving this your have to provide absolute path to your directory like this

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

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

Javascript webpack 中的配置对象无效

提问by Indu Pillai

回答by Jean-Louis Brunet

回答by rgjr

回答by Leo Leao

回答by Kmaschta

回答by Naveed Aheer

回答by paulular

回答by Rakesh Jain

回答by Dushan

回答by Yu Huang

回答by the_haystacker

相关推荐

最近更新

标签

Javascript webpack 中的配置对象无效

提问by Indu Pillai

回答by Jean-Louis Brunet

回答by rgjr

回答by Leo Leao

回答by Kmaschta

回答by Naveed Aheer

回答by paulular

回答by Rakesh Jain

回答by Dushan

回答by Yu Huang

回答by the_haystacker

相关推荐

这个 JavaScript/jQuery 语法是如何工作的：(function( window, undefined ) { })(window)？

Javascript 通过 Angular 2 下载文件

Javascript 如何在 React.js 中刷新页面后保持状态？

Javascript 带有 eslint-config-airbnb 的扩展名为“.js”的文件中不允许使用 JSX

相关推荐

最近更新

标签