未能啓動本地主機。 npm Err Darwin 16.7.0

Question

因此，我有一個較舊的項目，我正在嘗試再次處理，並且當我在終端中輸入命令npm start時，我收到一條非常長的錯誤消息。這裏是。

@啓動/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 
)) 

Answer 1

你需要使用OccurrenceOrderPlugin而不是OccurenceOrderPlugin。 還有一件事你不需要這個插件了，現在發生順序是在默認情況下

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