npm ERR！ …開發腳本'webpack-dev-server'失敗

Question

鏈接到分支

在嘗試使用Webpack 2時，我必須使用node的最新穩定版本。

節點v.6.11 npm 3.10.10 webpack 2.6.1

我修復了不建議使用的后備和加載程序->使用錯誤，但是現在當我運行npm run dev ，出現以下錯誤：

我的npm腳本

"scripts": {
  "dev": "webpack-dev-server",
  "production": "webpack -p",
  "test": "jest"
}

我的webpack.config.babel.js

import fs from 'fs'
import webpack from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import path from 'path'

const coinhover = path.resolve(__dirname, "coinhover")
const src = path.resolve(__dirname, "public/src")

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/public/src/index.html',
  filename: 'index.html',
  inject: 'body'
})

const PATHS = {
  app: src,
  build: coinhover,
}

const LAUNCH_COMMAND = process.env.npm_lifecycle_event

const isProduction = LAUNCH_COMMAND === 'production'

const productionPlugin = new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production')
  }
})

const base = {
  entry: [
    PATHS.app
  ],
  output: {
    path: PATHS.build,
    filename: 'index_bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader", "sass-loader"],
          publicPath: coinhover
        })
      }
    ],
    loaders: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.css$/, loader: 'style-loader!css-loader' }
    ]
  }
}

const developmentConfig = {
  devtool: 'cheap-module-inline-source-map',
  plugins: [ExtractTextPlugin, HtmlWebpackPluginConfig]
}

const productionConfig = {
  devtool: 'cheap-module-source-map',
  plugins: [ExtractTextPlugin, HtmlWebpackPluginConfig, productionPlugin]
}

console.log('LAUNCH_COMMAND npm run', LAUNCH_COMMAND)

export default Object.assign({}, base,
  isProduction === true ? productionConfig : developmentConfig
)

npm-debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/Users/leongaban/.nvm/versions/node/v6.11.0/bin/node',
1 verbose cli   '/Users/leongaban/.nvm/versions/node/v6.11.0/bin/npm',
1 verbose cli   'run',
1 verbose cli   'dev' ]
2 info using npm@3.10.10
3 info using node@v6.11.0
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle coinhover@0.0.1~predev: coinhover@0.0.1
6 silly lifecycle coinhover@0.0.1~predev: no script for predev, continuing
7 info lifecycle coinhover@0.0.1~dev: coinhover@0.0.1
8 verbose lifecycle coinhover@0.0.1~dev: unsafe-perm in lifecycle true
9 verbose lifecycle coinhover@0.0.1~dev: PATH: /Users/leongaban/.nvm/versions/node/v6.11.0/lib/node_modules/npm/bin/node-gyp-bin:/Users/leongaban/projects/personal/CoinHover/coinhover.io/node_modules/.bin:/Users/leongaban/google-cloud-sdk/bin:/Users/leongaban/.nvm/versions/node/v6.11.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/leongaban/projects/GoogleSDK:/Users/leongaban/projects/go/bin:/Users/leongaban/projects/GoogleSDK/bin
10 verbose lifecycle coinhover@0.0.1~dev: CWD: /Users/leongaban/projects/personal/CoinHover/coinhover.io
11 silly lifecycle coinhover@0.0.1~dev: Args: [ '-c', 'webpack-dev-server' ]
12 silly lifecycle coinhover@0.0.1~dev: Returned: code: 1  signal: null
13 info lifecycle coinhover@0.0.1~dev: Failed to exec dev script
14 verbose stack Error: coinhover@0.0.1 dev: `webpack-dev-server`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/Users/leongaban/.nvm/versions/node/v6.11.0/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/Users/leongaban/.nvm/versions/node/v6.11.0/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:891:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid coinhover@0.0.1
16 verbose cwd /Users/leongaban/projects/personal/CoinHover/coinhover.io
17 error Darwin 16.6.0
18 error argv "/Users/leongaban/.nvm/versions/node/v6.11.0/bin/node" "/Users/leongaban/.nvm/versions/node/v6.11.0/bin/npm" "run" "dev"
19 error node v6.11.0
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error coinhover@0.0.1 dev: `webpack-dev-server`
22 error Exit status 1
23 error Failed at the coinhover@0.0.1 dev script 'webpack-dev-server'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the coinhover package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     webpack-dev-server
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs coinhover
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls coinhover
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Answer 1

看來您的問題出在您的插件上。 ExtractTextPlugin需要初始化，並采用文件名或對象 。 在第65和70行上，您應該具有諸如new ExtractTextPlugin('style.css') 。

為了將來參考，我意識到通過在webpack-dev-server拋出該錯誤的上一行添加console.trace 。