node.js - Cannot find module 'webpack/bin/config-yargs'

Question

当我通过package.json的script去执行webpack-dev-server的时候就报以下错误

 npm start

> react-tutorial@0.0.0 start D:\my\react-task
> webpack-dev-server --inline --hot --colors

module.js:327
    throw err;
    ^

Error: Cannot find module 'webpack/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (D:\my\react-task\node_modules\webpack-dev-server\bin\webpack-dev-server.js:24:1)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Function.Module.runMain (module.js:441:10)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\xuyg\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v4.4.4
npm ERR! npm  v3.10.5
npm ERR! code ELIFECYCLE
npm ERR! react-tutorial@0.0.0 start: `webpack-dev-server --inline --hot --colors`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the react-tutorial@0.0.0 start script 'webpack-dev-server --inline --hot --colors'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the react-tutorial package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --inline --hot --colors
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs react-tutorial
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls react-tutorial
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\my\react-task\npm-debug.log

但是当我手动去输入webpack-dev-server的时候却不会报错。

这是我webpack的配置

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('[name].css');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var node_modules_dir = path.resolve(__dirname,'node_modules');
var OpenPackPlugin = require('openpack');
var AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
var deps = [
  'react/dist/react.min.js'
];

var clientConfig = {
  entry:{
    app:'./src/client.js'
  },
  output:{
    path: path.resolve(__dirname, 'build'),
    public:'build/',
    filename:'js/[name].bundle.js'
  },
  resolve:{
    alias:{}
  },
  devtool:'#source-map',
  module:{
    loaders:[
      {
        test:/\.css$/,
        exclude:/node_modules/,
        loaders: [ 'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]']
      },
      { 
        test:/\.jsx?$/,
        include: [
          path.resolve(__dirname, './node_modules/react-routing/src'),
          path.resolve(__dirname, './src'),
        ],
        loader:'babel-loader'
      },
      // 加载html
      {test:/\.html$/,exclude:/node_modules/,loader:'raw-loader'},
      // 加载sass
      {
        test:/\.(scss|sass)$/i,
        exclude:/node_modules|public/,
        loaders: ['style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        'sass']
      },
      {
        test:/\.(scss|sass)$/i,
        include:path.join(__dirname,'src/public'),
        loaders: [
        'style?sourceMap',
        'css',
        'sass'
        ]
      },

        // 图片文件使用 url-loader 来处理，小于25kb的直接转为base64,超过就会输出到output的path
      {test:/\.(png|jpe?g|gif)$/,exclude:/node_modules/,loader: 'url-loader?limit=25000&name=assets/imgs/[name].[ext]'},
      // 字体
      { test: /\.(woff2|woff|ttf|eot|svg|otf)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loaders: ['url-loader?limit=1000&name=assets/fonts/[name].[ext]']
      },
      {test:/\.json$/,exclude:/node_modules/,
        loaders: ['url-loader?limit=1000&name=assets/data/[name].[ext]']
      }
    ],
    noParse:[]
  },
  babel:{
    presets:['react','es2015','stage-0'],
    plugins:['transform-runtime']
  },
  plugins:[
    extractCSS,
    new HtmlWebpackPlugin({
      template:path.resolve(__dirname,'src/module.html'),
      title:'react-task',
      filename:'index.html'
    }),
    new webpack.ProvidePlugin({
      'React':'react',
      CSSModules:'react-css-modules'
    }),
    new OpenPackPlugin({
      browser:'chrome',
      host:'localhost',
      port:'8080'
    }),
    new webpack.DllReferencePlugin({
      context:path.join(__dirname),
      manifest:require('./build/manifest.json')
    }),
    new AddAssetHtmlPlugin({
      filepath:require.resolve('./build/js/lib.js'),
      includeSourcemap:true
    }),
  ]
};

deps.forEach(function(dep){
  var depPath = path.resolve(node_modules_dir,dep);
  clientConfig.resolve.alias[dep.split(path.sep)[0] = depPath];
  clientConfig.module.noParse.push(depPath);
});

const serverConfig = {
  entry:{
    app:'./src/client.js'
  },
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: 'server.js',
    chunkFilename: 'server.[name].js',
    libraryTarget: 'commonjs2',
  }
};
module.exports = clientConfig;

Answer 1

同问楼主，解决了吗？

Answer 2

webpack-dev-server版本和webpack的问题

http://stackoverflow.com/ques...

Answer 3

@左耳朵界面 正解

Answer 4

同样的困扰不知道怎么解决

Answer 5

webpack-dev-server2版本与webpack1版本不匹配， 我把webpack改为webpack2高版本就好了。

Answer 6

此类问题自测下 plugins 配置