当我通过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;
