Webpack 生成器 https://createapp.dev/ 启动项目失败

Question

我发现 this website 基本上生成了一个非常好的 webpack/babel 样板结构问题是我在尝试运行我做的样板时遇到了一些错误不明白：

> empty-project@1.0.0 start /Users/user.name/Desktop/empty-project
> webpack serve --hot --mode development

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.plugins[3] should be one of these:
   object { apply, … } | function
   -> Plugin of type object or instanceof Function.
   Details:
    * configuration.plugins[3] should be an object:
      object { apply, … }
      -> Plugin instance.
    * configuration.plugins[3] should be an instance of function.
      -> Function acting as plugin.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! empty-project@1.0.0 start: `webpack serve --hot --mode development`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the empty-project@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

这是 webpack 配置文件：

const webpack = require('webpack');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const config = {
  entry: [
    'react-hot-loader/patch',
    './src/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new CopyPlugin({
      patterns: [{ from: 'src/index.html' }],
    }),
    new HtmlWebpackPlugin({
      templateContent: ({ htmlWebpackPlugin }) => '<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>' + htmlWebpackPlugin.options.title + '</title></head><body><div id=\"app\"></div></body></html>',
      filename: 'index.html',
    }),,
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
    }),
    new MiniCssExtractPlugin(),
    new CleanWebpackPlugin()
  ]
};

module.exports = config;

但您也可以检查 webpack 生成器，但我不确定为什么不起作用：|

Answer 1

HtmlWebpackPlugin 后有双逗号。只需删除两个 ',' 符号中的多余一个

应该是：

    }),
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
    }),
    new MiniCssExtractPlugin(),
    new CleanWebpackPlugin()
  ]
};

module.exports = config;

目前：

    }),,
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
    }),
    new MiniCssExtractPlugin(),
    new CleanWebpackPlugin()
  ]
};

module.exports = config;

Webpack 生成器 https://createapp.dev/ 启动项目失败

Webpack generator https://createapp.dev/ fail starting the project

javascript

ecmascript-6

webpack

babeljs

webpack-dev-server