webpack 配置出错（unknown property 'devServe'.）

Question

根据教程配置了webpack运行时出错

基础配置

const path = require('path')

const config = {
    target: 'web',
    entry: path.join(__dirname, '../src/index.js'),
    output: {
        filename: 'bundle.[hash:8].js',
        path: path.join(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.jsx$/,
                loader: 'babel-loader'
            },
            {
                test: /\.jsx$/,
        loader: 'babel-loader',
        exclude: /node_modules/
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            name: 'resources/[path][name].[hash:8].[ext]'
                        }
                    }
                ]
            }
        ]
    }
}

module.exports = config

开发环境配置

const path = require('path')
const webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'
const baseConfig = require('./webpack.config.base')
const merge = require('webpack-merge')
const defaultPlugins = [
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: isDev ? '"development"' : '"production"'
    }
  })
]
const devServe = {
    port: 8000,
    host: '0.0.0.0',
    overlay: {
        errors: true
    },
    hot: true,
    open: true
}

let config
if (isDev) {
    config = merge(baseConfig, {
        devtool: 'cheap-module-eval-source-map',
        module: {
            rules: [
                {
                    test: /\.styl/,
                    use: [
                        'style-loader',
                        'css-loader',
                        {
                            loader: 'postcss-loader',
                            options: {
                                sourceMap: true
                            }
                        },
                        'stylus-loader'
                    ]
                }
            ]
        },
        devServe,
        plugins: defaultPlugins.concat([
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoEmitOnErrorsPlugin(),
            new HTMLPlugin()
        ])
    })
}

环境依赖

"devDependencies": {
    "babel-loader": "^8.0.4",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.0",
    "stylus-loader": "^3.0.2",
    "url-loader": "^1.1.1",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^3.12.0",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^2.11.3",
    "webpack-merge": "^4.1.4"
  }

运行报错

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'devServe'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           devServe: ...
         }
       })
     ]

webpack明明是3.12.0，为什么还说webpack 2 no longer allows custom properties，还有devServer到底哪里不对，跟着教程走的还是跑不对，求教。

Answer 1

你拼错了 devServe是非法字段，正确字段是 devServer，仔细看你的代码