webpack4.35.2 详细配置

在使用webpack 4.35.2版本的时候下载loader会下载失败，是版本的问题，下面是以下完整用到过的loader配置的版本信息。

1.package.json文件代码 一些配置版本信息

{

  "dependencies": {

    "axios": "^0.21.4",

    "pubsub-js": "^1.9.3",

    "vue": "^2.6.14",

    "vue-router": "^3.5.2"

  },

  "devDependencies": {

    "@babel/core": "^7.15.5",

    "@babel/preset-env": "^7.15.6",

    "babel-loader": "^8.2.2",

    "css-loader": "^3.2.1",

    "file-loader": "^6.2.0",

    "html-webpack-plugin": "^3.2.0",

    "less": "^3.9.0",

    "less-loader": "^4.1.0",

    "style-loader": "^1.0.2",

    "url-loader": "^4.1.1",

    "vue-loader": "^15.9.8",

    "vue-template-compiler": "^2.6.14",

    "webpack": "^4.35.2",

    "webpack-cli": "^3.3.6",

    "webpack-dev-server": "^3.11.2"

  },

  "name": "webpack",

  "version": "1.0.0",

  "main": "webpack.config.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "show": "webpack -v",

    "start": "node ./src/main.js",

    "build": "webpack",

    "dev": "webpack-dev-server --open"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "description": ""

}

2.webpack-config.js 配置信息

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin');

const VueLoaderPlugin = require('vue-loader/lib/plugin')

const webpack = require('webpack')

module.exports = {

  // pro 开发版本 dev生产版本

  mode: 'production',

  //想要处理文件

  entry: './src/main.js',

  //出口

  output: {

    //打包文件的目录

    path: path.join(__dirname, './dist/'),

    //打包文件

    filename: 'main.js',

    //只要关于url都会拼接这个地址

    // publicPath:'dist/'

  },

  devServer: {

    contentBase: './dist',

    // open:true,

    hot: true

  },

  module: {

    rules: [{

        test: /\.css$/, //正则表达 规定css结尾的

        use: [

          'style-loader',

          'css-loader'

        ]

      },

      {

        test: /\.(png|svg|jpg|gif)$/,

        use: [{

          loader: 'url-loader',

          //可以定义一些东西

          options: {

            //当图片小于limit时候会用-loader进行加载

            //当图片大于limit时候会用file-loader进行加载

            limit: 5000,

            //意思是在img文件中创建图片 本身名字 + hash8位 + 后缀扩展名(jpg,png...)

            name: 'img/[name].[hash:8].[ext]'

          }

        }],

      },

      {

        test: /\.less$/,

        loader: [

          // compiles Less to CSS

          'style-loader',

          'css-loader',

          'less-loader',

        ],

      },

      {

        test: /\.m?js$/,

        exclude: /(node_modules|bower_components)/,

        use: {

          loader: 'babel-loader',

          options: {

            presets: ['@babel/preset-env']

          }

        }

      },

      {

        test: /\.vue$/,

        loader: 'vue-loader'

      }

    ]

  },

  plugins: [

    new HtmlWebpackPlugin({

      template: './index.html'

    }),

    new VueLoaderPlugin(),

    new webpack.HotModuleReplacementPlugin()

  ],

  //第二种vue解决办法 vue组件显示不出来的解决方案 一般都用render: h=>h.xxx(vue组件名)

  // resolve:{

  //   alias: {

  //     'vue$':'vue/dist/vue.esm.js'

  //   }

  // }

}