webpack中的配置对象无效

Question

我正在关注Lynda.com - Eve Porcello的React.js基本训练.在视频"使用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事情很陌生,所以我无法找出问题究竟是什么,以及它需要什么样的绝对路径.我也尝试了一个回答另一个(类似)问题的绝对路径,但这没有用.

谢谢!

Answer 1

这将使用最新的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

我正在做与你相同的课程,我必须执行以下操作以使Webpack正确输出bundle.js文件:

1. 卸载最新的webpack(2,如果您刚刚使用npm install webpack)
2. 然后在终端运行中npm install -g webpack@1.13.3(她建议使用,sudo npm install -g所以由你决定使用sudo或不使用)
3. 接下来的问题,一些问题的WebPack被扔可能只适用于我,但我不得不require('path')因为我得到了非解决路径错误,也不得不npm install babel-loader因为它没有被通过加载的package.json文件无论出于何种原因,这还需要一个path.resolve另外的该node_modules文件夹

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

5. 最后,运行webpack --display-error-details显示了错误是什么,但我粘贴的配置文件最终为我工作.

应该注意的是,这将(希望)允许您完成课程本身,但它不会帮助您了解更新或需要迁移的内容以保持最新并使用Webpack 2.此处还有其他答案处理移民问题也应该加以研究.

希望这对你有所帮助!

Answer 3

本教程是使用 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"]
        }
      }
    ]
  }
}