一：版本不一致会出现问题

  1. sass less -> sass sass-loader
  2. postcss插件 postcss-loader -> autoprefixer 解决css 等浏览器前缀的问题
  3. css-loader 模块化解析
  4. vue-style-loader

    二：处理版本的几种问题

    1、搭建webpack4需依赖的版本号

    webpack@4 需要webpack-cli@3和webpack-devserver@3版本来依赖
    同时vue-loader@15.7.0版本 ```javascript /**”devDependencies”: { “@webpack-cli/serve”: “^1.6.1”, “html-webpack-plugin”: “^4.5.2”, “webpack”: “^4.46.0”, “webpack-cli”: “^3.3.12”, “webpack-dev-server”: “^3.11.3” }, “dependencies”: { “css-loader”: “^5.2.7”, “style-loader”: “^2.0.0” }
    • */ //vue-loader@15.7.0版本 const VueLoaderPlugin = require(‘vue-loader/lib/plugin’); // 高版本 const { VueLoaderPlugin } = require(‘vu-loader’)

// 配置处理.vue结尾的文件 /*
“devDependencies”: { “@vue/compiler-sfc”: “^3.2.31”, “html-webpack-plugin”: “^4.5.0”, “vue-loader”: “^17.0.0”, “vue-template-compiler”: “^2.6.14”, “webpack”: “^4.44.2”, “webpack-cli”: “^3.3.12”, “webpack-dev-server”: “^3.11.2” }, “dependencies”: { “vue”: “^3.2.31” } /

  1. ```javascript
  2. const { VueLoaderPlugin }  = require('vue-loader')
  3. module.exports = {
  4.   modules: {
  5.     rules: [
  6.       // 用vue-loader处理.vue结尾的文件
  7.       {
  8.         test: /\.vue$/,
  9.         loader: 'vue-loader'
  10.       },
  11.       {
  12.          test: /\.scss$/,
  13.         // 配置loader
  14.         use: [
  15.           'vue-style-loader',
  16.           'css-loader',
  17.           {
  18.             loader: 'postcss-loader',
  19.             // 对postcss-loader进行配置 
  20.             option: {
  21.               postcssOptions: {
  22.                 // 配置插件
  23.                 plugins: [
  24.                   // 配置autoprefixer插件处理浏览器前缀的问题
  25.                   autoprefixer({
  26.                     //  配置浏览器的版本
  27.                     overrideBrowserlist: [
  28.                       // 兼容大于1%的所有浏览器
  29.                       "> 1%",
  30.                       // 配置最近的浏览器的版本
  31.                       "last 2 version"
  32.                     ]
  33.                   })
  34.                 ]
  35.               }
  36.             }
  37.           },
  38.           'sass-loader'
  39.         ]
  41.       }
  42.     ]
  43.   }
  44. }

2、style课程中config.js配置

  1. "devDependencies": {
  2.     "@vue/compiler-sfc": "^3.2.31",  // 处理vue3安装的
  3.     "autoprefixer": "^10.4.4",      // 解决各大厂商浏览器前缀的插件
  4.     "css-loader": "^4.3.0",
  5.     "html-webpack-plugin": "^4.5.0",
  6.     "postcss": "^8.4.12",            // 解决各大厂商浏览器前缀
  7.     "sass": "^1.50.1",               // 安装cass使用sass语法
  8.     "vue-loader": "^17.0.0",         // 配置vue-loader处理.vue文件
  9.     "vue-style-loader": "^4.1.3",   // 将.css文件挂载到style上
  10.     "vue-template-compiler": "^2.6.14",  // 处理template模板
  11.     "webpack": "^4.44.2",           
  12.     "webpack-cli": "^3.3.12",           
  13.     "webpack-dev-server": "^3.11.2"    
  14.   },
  15.   "dependencies": {
  16.     "postcss-loader": "^4.3.0",   // 在编写的css上加上前缀
  17.     "sass-loader": "^10.1.1",
  18.     "vue": "^3.2.31"
  19.   }
const HtmlWebpackPlugin = require("html-webpack-plugin"),
      {resolve} = require('path'),
      // vue2.0  @15.7.0
      // VueLoaderPlugin = require('vue-loader/lib/plugin');
      // vue3.0
      {VueLoaderPlugin} = require('vue-loader'); 
      const autoprefixer = require('autoprefixer');
/**
 * vue2.6   npm  i vue-loader@15.7.0 -D
 * vue3.2   npm i vue-loader@next -D
*/
module.exports = {
  mode: 'development',
  entry: './src/main.js',
  output: {
    filename: 'main.js',
    path: resolve(__dirname, 'dist'),
  },
  externals: {
    vue: 'Vue', // 打包外部cdn引入的文件
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },   
      {
        test: /\.scss$/,   // 处理.scss 结尾的文件
        use: [
          'vue-style-loader',
          'css-loader',
          // loader配置项
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                    autoprefixer({
                    overrideBrowserslist: ['>1%', 'last 2 versions'],
                  }),
                ],
              },
            },
          },
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),

    new HtmlWebpackPlugin({
      template: resolve(__dirname, 'public/index.html'),
    }),
  ],
};