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

  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. ]
  40. }
  41. ]
  42. }
  43. }

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'),
    }),
  ],
};