运行npm run dev ，控制台内容为编译内容

代码：

/**
 * @author: lap
 * @date: 2021-05-08 14:27
 */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
// const a = require('uglifyjs-webpack-plugin');
module.exports = {
  entry:'./src/main.js',//入口
  output:{
    path:path.resolve(__dirname,'dist'),//动态获取路径  __dirname:获取当前文件所在路径
    filename:'bundle.js',
    publicPath:'dist/',//打包后涉及URL问题会自动到dist文件夹去找
  },//出口
  module:{//模块
    rules: [
      {
        test: /\.css$/,
        //css-loader只负责加载css文件
        //style-loader负责将css样式添加到DOM中
        //使用多个loader时，从右向左
        use: ['style-loader','css-loader']
      },
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader" // creates style nodes from JS strings
        }, {
          loader: "css-loader" // translates CSS into CommonJS
        }, {
          loader: "less-loader" // compiles Less to CSS
        }]
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              //当加载的图片小于limit时，会将图片编译成base64字符串形式
              //当加载的图片，大于limit时，需要使用file-loader模块进行加载
              limit: 13000,
              //打包完后放到指定文件夹下；文件名[name] 这样name就是变量了,[]中的内容就是变量了，8位的hash值
              name:'img/[name].[hash:8].[ext]'
            },
          }
        ]
      },
      {
        test: /\.js$/,
        //exclude排除   include加入
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']//presets预设
          }
        }
      },
      {
        test: /\.vue$/,
        use:['vue-loader']
      }
    ]
  },
  resolve:{
    //alias别名
    alias:{
      //当进行import Vue操作时，先判断有没有这个，有的话走这个版本
      'vue$':'vue/dist/vue.esm.js'
    },
    //extensions（扩展名）；后缀省略，不配置的话，在引入文件时必须带后缀，不然打包报错
    extensions:['.js','.css','.vue']
  },
  //插件
  plugins:[
      new webpack.BannerPlugin('最终版权归AAA所有'),
      new HtmlWebpackPlugin({
        template:'index.html'
      }),
    new HtmlWebpackPlugin(),
    new UglifyjsWebpackPlugin(),
  ],
  devServer:{
    contentBase:'./dist',//路径
    inline:true,//是否实时监听
    port:83,//默认为8080端口
  },

}

控制台截图

最后不是说编译成功

正常显示：

我的package.json

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^3.6.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^2.30.1",
    "less": "^3.6.0",
    "less-loader": "^5.0.0",
    "path": "^0.12.7",
    "style-loader": "^2.0.0",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.3"
  },
  "dependencies": {
    "path": "^0.12.7",
    "vue": "^2.5.21"
  }
}

这种是不是代表这个和webpack版本不匹配啊？但我看教程上webpack3.6.0版本可以用1.1.1版本的uglifyjs-webpack-plugin