問題描述

當我通過package.json的script去執行webpack-dev-server的時候就報以下錯誤

npm start> [email protected] start D:myreact-task> webpack-dev-server --inline --hot --colorsmodule.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:myreact-tasknode_moduleswebpack-dev-serverbinwebpack-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.7601npm ERR! argv 'C:Program Filesnodejsnode.exe' 'C:UsersxuygAppDataRoamingnpmnode_modulesnpmbinnpm-cli.js' 'start'npm ERR! node v4.4.4npm ERR! npm v3.10.5npm ERR! code ELIFECYCLEnpm ERR! [email protected] start: `webpack-dev-server --inline --hot --colors`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the [email protected] 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 --colorsnpm ERR! You can get information on how to open an issue for this project with:npm ERR! npm bugs react-tutorialnpm ERR! Or if that isn’t available, you can get their info via:npm ERR! npm owner ls react-tutorialnpm ERR! There is likely additional logging output above.npm ERR! Please include the following file with any support request:npm ERR! D:myreact-tasknpm-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;

問題解答

同問樓主，解決了嗎？

webpack-dev-server版本和webpack的問題

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

@左耳朵界面 正解

同樣的困擾不知道怎么解決

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

此類問題自測下 plugins 配置