javascript - npm 错误!失败...开发脚本 'webpack-dev-server'

Question

<强> Link to branch

我必须使用最新的稳定版本的 Node，同时尝试使用 Webpack 2。

Node v.6.11npm 3.10.10webpack 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 需要初始化，并采用 filename or an object 。在第 65 行和第 70 行，您应该有类似 new ExtractTextPlugin('style.css') 的内容。

为了将来引用，我意识到通过在 webpack-dev-server 抛出该错误的上面一行添加一个 console.trace 。