未能启动本地主机。 npm Err Darwin 16.7.0

问题描述：

因此，我有一个较旧的项目，我正在尝试再次处理，并且当我在终端中输入命令npm start时，我收到一条非常长的错误消息。这里是。未能启动本地主机。 npm Err Darwin 16.7.0

@启动/Users/juanlopez/tiy/week-5/day-4/portfolio-2.0 的WebPack-DEV-服务器

/用户/ juanlopez/TIY /周-5 /天-4 /组合-2.0/webpack.config.js：88 新webpack.optimize.OccurenceOrderPlugin（）， ^

类型错误：webpack.optimize.OccurenceOrderPlugin不在对象的构造。（/Users/juanlopez/tiy/week-5/day-4/portfolio-2.0/webpack.config.js:88:5）

在网络包NPM这些错误后抛出这些错误

npm ERR！达尔文16.7.0

npm ERR！ argv“/usr/local/Cellar/node/7.1.0/bin/node”“/ usr/local/bin/npm”“start”

npm ERR！ node v7.1.0

npm ERR！ npm v3.10.9

npm ERR！代码ELIFECYCLE

npm ERR！ @ start：webpack-dev-server

npm ERR！退出状态1

npm ERR！

npm ERR！在@ start脚本'webpack-dev-server'失败。

有没有人知道我在这里做错了什么？这与我正在运行的webpack版本有关吗？我已经尝试更新webpack和节点。

这里是我的JSON

{ 

"private": true, 

"scripts": { 

"deploy": "npm run build && surge ./public --domain portfolio-2-0.chriskramer2020.surge.sh", 

"start": "webpack-dev-server", 

"build": "rm -rf public && NODE_ENV=production webpack --optimize-minimize --progress --profile --colors" 
}, 

"dependencies": { 
"extract-text-webpack-plugin": "^2.1.0", 

"jquery": "^3.1.1", 

"json-loader": "^0.5.4", 

"mobx": "^3.0.0", 

"react": "^15.4.1", 

"react-dom": "^15.4.1", 

"react-router": "^3.0.1", 

"whatwg-fetch": "^2.0.1" 
}, 

"devDependencies": { 
"autoprefixer": "^6.5.4", 

"babel-core": "^6.20.0", 

"babel-eslint": "^7.1.1", 

"babel-loader": "^6.2.10", 

"babel-preset-es2015": "^6.18.0", 

"babel-preset-react": "^6.16.0", 

"babel-preset-stage-0": "^6.16.0", 

"browser-sync": "^2.18.5", 

"browser-sync-webpack-plugin": "^1.1.3", 

"css-loader": "^0.26.1", 

"eslint": "^3.12.2", 

"eslint-config-standard": "^6.2.1", 

"eslint-config-standard-react": "^4.2.0", 

"eslint-plugin-promise": "^3.4.0", 

"eslint-plugin-react": "^6.8.0", 

"eslint-plugin-standard": "^2.0.1", 

"file-loader": "^0.9.0", 

"html-webpack-plugin": "^2.24.1", 

"json-loader": "^0.5.4", 

"node-sass": "^4.0.0", 

"postcss-loader": "^1.2.1", 

"raw-loader": "^0.5.1", 

"react-hot-loader": "next", 

"sass-loader": "^4.1.0", 

"style-loader": "^0.13.1", 

"stylelint": "^7.6.0", 

"stylelint-config-standard": "^15.0.0", 

"surge": "^0.18.0", 

"webpack": "^2.3.2", 

"webpack-dev-server": "^2.4.2", 

"webpack-merge": "^1.1.1", 

"webpack-validator": "^2.3.0" 
} 
}

这里是我的Webpack.config

enter code here 
const path = require('path') 
const webpack = require('webpack') 
const merge = require('webpack-merge') 
const validate = require('webpack-validator') 
const HtmlWebpackPlugin = require('html-webpack-plugin') 
const BrowserSyncPlugin = require('browser-sync-webpack-plugin') 

const ROOT_PATH = path.resolve(__dirname) 
const SRC_PATH = path.resolve(ROOT_PATH, 'src') 
const BUILD_PATH = path.resolve(ROOT_PATH, 'public') 

const common = { 
entry: [ 
'whatwg-fetch', 
SRC_PATH 
], 
output: { 
filename: 'bundle.js', 
path: BUILD_PATH, 
publicPath: '/' 
}, 
plugins: [ 
new HtmlWebpackPlugin({ 
    template: path.resolve(SRC_PATH, 'index.html'), 
    inject: 'body', 
    filename: 'index.html' 
}), 
new webpack.DefinePlugin({ 
    'process.env': { 
    'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development') 
    } 
}) 
], 
module: { 
loaders: [{ 
    test: /\.js$/, 
    include: [SRC_PATH], 
    loader: 'babel' 
}, { 
    test: /\.(png|jpe?g|gif|svg)$/, 
    loader: 'file' 
}, { 
    test: /\.(sass|s?css)$/, 
    loaders: [ 
    'style', 
    'css', 
    'postcss', 
    'sass' 
    ] 
    }] 
}, 
postcss:() => { 
return [ 
    require('autoprefixer') 
] 
} 
} 

const development = { 
entry: [ 
'react-hot-loader/patch', 
'webpack-dev-server/client?http://localhost:8080', 
'webpack/hot/only-dev-server' 
], 
output: { 
devtoolModuleFilenameTemplate: '[resource-path]' 
}, 
devServer: { 
historyApiFallback: true, 
hot: true, 
stats: { colors: true, chunks: false } 
}, 
plugins: [ 
new webpack.HotModuleReplacementPlugin({ multiStep: true }), 
new webpack.SourceMapDevToolPlugin(), 
new BrowserSyncPlugin({ proxy: 'http://localhost:8080/' }, { reload: false }) 
], 
module: { 
loaders: [{ 
    test: /\.html$/, 
    loader: 'raw' 
}] 
} 
} 

loaders: [ 
{ 
    test: /\.css$/, 
    loaders: [ 
     "style-loader", 
     { loader: "css-loader", query: { modules: true } }, 
     { 
      loader: "sass-loader", 
      query: { 
       includePaths: [ 
        path.resolve(__dirname, "some-folder") 
       ] 
      } 
     } 
    ] 
} 
] 

const production = { 
plugins: [ 
new webpack.optimize.OccurenceOrderPlugin(), 
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) 
] 
} 

new webpack.LoaderOptionsPlugin({ 
test: /\.css$/, // optionally pass test, include and exclude, default affects 
all loaders 
minimize: true, 
debug: false, 
options: { 
    // pass stuff to the loader 

} 
}) 

module.exports = validate(merge.smart(
process.env.npm_lifecycle_event === 'build' 
? production 
: development, 
common 
))

请编辑您的帖子并添加项目的package.json。 – Myonara

@Myonara我已经添加了我的JSON文件和我的webpack.config文件。我也一直在看这个链接试图理解它，也许它会对你更有意义。 https://gist.github.com/sokra/27b24881210b56bbaff7 – user7400006

答

你需要使用OccurrenceOrderPlugin而不是OccurenceOrderPlugin。还有一件事你不需要这个插件了，现在发生顺序是在默认情况下

https://gist.github.com/sokra/27b24881210b56bbaff7#occurrence-order

未能启动本地主机。 npm Err Darwin 16.7.0

相关推荐