webpack

时间：2017-03-27 14:54:06

标签： javascript json reactjs npm webpack

我正在关注Eve Porcello的Lynda.com - React.js essential training。在视频＆＃34;使用Webpack构建＆＃34;中，我按照作者所描述的步骤进行了准确描述，但是＆＃34; webpack＆＃34;命令失败，出现以下错误，

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

以下是我的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事情很陌生，所以我无法找出问题究竟是什么，以及它需要什么样的绝对路径。我也尝试了另一个（类似的）问题的答案建议的绝对路径，但这没有用。

谢谢！

11 个答案:

答案 0 :(得分：17)

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

答案 1 :(得分：5)

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

  1. 卸载最新的网络包（2，如果您刚使用npm install webpack）
  2. 然后在终端运行中npm install -g webpack@1.13.3（她建议使用sudo npm install -g，以便您可以使用sudo来使用require('path')
  3. 接下来的问题webpack投掷的几个问题可能只适用于我，但我必须npm install babel-loader，因为我得到了非解决路径错误，而且还必须package.json，因为它不是{\ n}无论出于何种原因通过path.resolve文件加载，还需要为node_modules文件夹添加webpack.config

  4. 我的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

  5. 最后，运行personId向我展示了错误是什么，但我粘贴的配置文件最终为我工作。

    6. 应该注意的是，这将（希望）允许您自己完成课程，但它不会帮助您了解更新或需要迁移的内容以保持最新状态并使用Webpack 2。这里有其他解决移民问题的答案。

    希望这能帮到你！

答案 2 :(得分：2)

这个tutoriel完成了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"]
        }
      }
    ]
  }
}

答案 3 :(得分：2)

用〜规则替换~loader~ 

module: {
    loaders: [
        {

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

module: {
    rules: [
        {

答案 4 :(得分：1)

Webpack比create-react-app有点困难。 使用https://facebook.github.io/react/docs/installation.html

之后的命令创建反应项目的最简单，最简单的方法 
MATCH (userLoggedIn :User {EmailAddress:'email'})
MATCH (userLoggedIn)-[r:USER_SENTMESSAGE]-(otherUser)
WHERE r.Id = '123456'
SET 
  case when (userLoggedIn)-[r]->(otherUser) 
  then r.HideFromSender = true 
  else r.HideFromReceiver = true 
  end

你可以关注课程中的所有反应代码但是期望webpack因为create-react-app编译jsx代码并且做webpack等的所有事情。

答案 5 :(得分：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

答案 6 :(得分：0)

当您迁移到新版本的webpack时，将发生此错误。要解决此问题，您必须提供目录的绝对路径，如此

get(url: string, parmas: any): Observable<any> {
    return this.http.get(url, { search: parmas, headers: this.headers, withCredentials: true })
        .map((res: Response) => res.json())
        .do(data => console.log('server data:', data))  // debug
        .catch(this.handleError);
}

答案 7 :(得分：0)

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

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

 var path = require('path')

并将输出更改为以下

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

答案 8 :(得分：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"
      }
    }

答案 9 :(得分：0)

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

答案 10 :(得分：0)

我有同样的问题，还有更多。因此，我创建了一个Shell脚本，以使安装过程更简单，更快捷。

Linux用户

尝试使用此脚本auto_conf_wb

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

为您

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

相关问题
最新问题