webpack 服务未启动

Question

我无法运行 webpack 服务。我的配置：

//webpack.config.js

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    mode: 'development',
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, './dist'),
        open: true,
        compress: true,
        hot: true,
        port: 8080,
        allowedHosts: 'all',
    },
    entry: {
        main: path.resolve(__dirname, './src/index.js'), // точка входа приложения
    },
    output: {
        path: path.resolve(__dirname, './dist'), // точка выхода приложения, директория
        filename: '[name].bundle.js',
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'webpack Boilerplate',
            template: path.resolve(__dirname, './src/template.html'), // шаблон
            filename: 'index.html', // название выходного файла
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin(),
    ],
    module: {
        rules: [...],
    }
}

// package.json { ... “脚本”：{ “开始”：“网络包服务”， “构建”：“网络包”， "test": "echo "Error: no test specified" && exit 1" }, ... }

错误：

skif@PC:~/WebstormProjects/webpack-tutorial$ yarn start
yarn run v1.22.5
$ webpack serve
[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'contentBase'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
skif@PC:~/WebstormProjects/webpack-tutorial$

有什么想法吗？我不知道发生了什么。

Answer 1

您需要从 devServer 部分删除 contentBase。错误是说 contentBase 不在可能的选项中

允许的主机
你好
客户
压缩
dev中间件 . . .

devServer 的配置在这里：https://webpack.js.org/configuration/dev-server/

顺便说一句，Webpack4 有 contentBase 选项 https://v4.webpack.js.org/configuration/dev-server/#devservercontentbase

为Webpack5使用 https://webpack.js.org/configuration/dev-server/#directory

webpack 服务未启动

webpack serve not started

webpack

webpack-dev-server