无法启动本地主机。 npm Err Darwin 16.7.0

Question

所以我有一个较旧的项目，我正在尝试再次处理，当我在终端中输入命令 npm start 时，我收到一条很长的错误消息。在这里。

@开始/Users/juanlopez/tiy/week-5/day-4/portfolio-2.0 webpack-开发服务器

/Users/juanlopez/tiy/week-5/day-4/portfolio-2.0/webpack.config.js:88 新 webpack.optimize.OccurenceOrderPlugin(), ^

TypeError: webpack.optimize.OccurenceOrderPlugin 不是构造函数在对象。 (/Users/juanlopez/tiy/week-5/day-4/portfolio-2.0/webpack.config.js:88:5)

在 web pack 中出现这些错误后 npm 抛出这些错误

npm 错误！达尔文 16.7.0

npm 错误！ argv "/usr/local/Cellar/node/7.1.0/bin/node" "/usr/local/bin/npm" "start"

npm 错误！节点 v7.1.0

npm 错误！ npm v3.10.9

npm 错误！代码生命周期

npm 错误！ @开始：webpack-dev-server

npm 错误！退出状态 1

npm 错误！

npm 错误！ @ 启动脚本失败 '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

无法启动本地主机。 npm Err Darwin 16.7.0

Failure to start localhost. npm Err Darwin 16.7.0

javascript

npm

webkit

localhost

node-webkit