关于webpack的问题

Question

按照菜鸟教程（http://www.runoob.com/react/r...）里面的例子来写，发现运行npm start后报错

webpack.config.js

var config = {
   entry: './main.js',
    
   output: {
      path:'./',
      filename: 'index.js',
   },
    
   devServer: {
      inline: true,
      port: 7777
   },
    
   module: {
      loaders: [ {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         loader: 'babel',
            
         query: {
            presets: ['es2015', 'react']
         }
      }]
   }
    
}

module.exports = config;

package.json

{
  "name": "runoob-react-test",
  "version": "1.0.0",
  "description": "菜鸟教程 react 测试",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.22.0",
    "webpack-dev-server": "^2.3.0"
  }
}

webpack版本是2.2.1 node版本是6.0

Answer 1

没有安装 webpack，devDependencies 里需要添加 webpack。因为 webpack-dev-server 里依赖 webpack 是 peerDependencies，npm@>=3 不会再自动安装 peerDependencies 下的依赖。

Answer 2

项目工程里装了webpack了？我看报错是未找到webpack的包，而且看你的package.json里也没有webpack啊

Answer 3

webpack 2.0 里面的loaders的写法改变了

module: {
    rules: [
        {
         test: /\.jsx?$/,
         exclude: /node_modules/,
         use: {
             loader: 'babel-loader',
             query: {
                presets: ['es2015', 'react']
             }
         }
        }
    ]
   }