webpack webpack-dev-server 配置 we

最近更新webpack 版本 配置webpack-dev-server报错，以下是对应版本

webpack、webpack-cli、webpack-dev-server版本

主要报错是因为webpack更新了，但是webpack-cli 、webpack-dev-server 并没有对应的版本。所以导致报错。

• 报错信息一

  webpack-cli/bin/config-yargs  （版本不一致导致报错）
  

  解决方法

  将 webpack 、webpack-cli、webpack-dev-server 用

  npm uninstall webpack webpack-cli webpack-dev-server -D
  

  全部删除后，执行

  npm i webpack webpack-cli webpack-dev-server -D
  

  一次性安装，便可解决
  启动命令：

  "scripts": {
     "dev": "webpack serve --open --hot"
   }
  

  webpack.config.js 文件配置

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  
  const resolve = (filename) => {
   return path.resolve(__dirname, filename)
  }
  
  module.exports = {
     entry: path.resolve(__dirname, 'src/index.js'),
     output: {
         filename: '[name].bundle.js',
         path: path.resolve(__dirname, 'dist'),
         publicPath: './'
      },
     plugins: [
         new CleanWebpackPlugin(),
         new HtmlWebpackPlugin({  // Also generate a test.html
             filename: 'index.html',
             title: 'hello world',
             template: path.resolve(__dirname, 'public/index.html')
         })
     ],
     devServer: {
         contentBase: path.join(__dirname, "dist"),
         host: 'localhost', //服务器的ip地址
         port: 8080,  //端口
         open: true,  //自动打开页面
         inline: true,
         hot: true
     },
     resolve: {
       extensions: [".js", ".json"],
       alias: {
           '@src': resolve('src')
       }
   },
   module: {
       rules: [
           {
               test: /\.css$/,
               use: [
                   'style-loader',
                   'css-loader'
               ]
           },
           {
               test: /\.less$/,
               use: [
                   'style-loader',
                   'css-loader',
                   'less-loader'
               ]
           }
       ]
   }
  }
  

  项目结构

  项目目录结构