webpack-dev-server@2.5.0需要webpack@^2.2.0的对等体,但没有安装

时间:2017-11-27 12:34:16

标签: reactjs webpack webpack-dev-server

如果之前有人问过我道歉,我找不到。我是初学者,我一直在尝试设置webpack,所以我可以开始学习反应。在youtube上关注教程之后,我安装了

npm install --save react react-dom

还尝试使用

启用ES6和JSX
npm install --save-dev babel-cli babel-preset-react
npm install babel-preset-env --save-dev

在尝试运行dev时,我遇到了这些错误:

npm ERR! code ELIFECYCLE
npm ERR! errno 1

npm ERR! webpack-starter@1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack-starter@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

这是我的webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
var path = require("path");

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'app.bundle.js'
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    stats: "errors-only",
    open: true,
    openPage: ''
  },
  module: {
    rules: [
      {test: /\.scss$/, use: ExtractTextPlugin.extract({fallback: 'style-loader', use: ['css-loader', 'sass-loader']})},
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Project Demo',
      minify: {
        collapseWhitespace: false // For minifying HTML to save on space
      },
      hash: false, // Name of app.bundle.js is changing to see if we're uploading the latest files
      template: './src/index.html', // Load a custom template (ejs by default see the FAQ for details)
    }),
    new ExtractTextPlugin("app.css"),
  ]
}

我还在src文件夹中创建了.babelrc。它包含这个:

{
  "presets": ["es2015", "react"]
}

安装上述所有内容时,我收到的唯一警告是

  

npm WARN webpack-dev-server@2.5.0需要一个webpack@^2.2.0的对等方   但没有安装。您必须自己安装对等依赖项。

但如果我理解正确,那不是错误,只是警告。意思是,一切都应该有效。我错了吗?

有人可以告诉我发生了什么事吗?我怎样才能解决这个问题? 谢谢!

编辑:这是我的package.json:

{
  "name": "webpack-starter",
  "version": "1.0.0",
  "description": "Webpack project starter",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "prod": "webpack -p"
  },
  "author": "Name",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2015-webpack": "^6.4.3",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.5.3",
    "react": "^16.1.1",
    "react-dom": "^16.1.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  },
  "dependencies": {}
}

0 个答案:

没有答案