我又玩了一遍webpack

222 阅读2分钟

引言: 自vue2初期版本习惯使用了vue-cli,就再也没手动配置过vue的开发环境,趁今天闲着无聊自己又摸索了一遍Vue的webpack开发环境配置

版本工具 Vue3 + webpack5

  • webpack安装 npm i webpack webpack-cli webpack-dev-server

webpack配置-css

入口文件配置:

  • 思考为什么在webpack配置中entry:'./src/index.js' 入口文件为什么一直是./src/index.js, 不能是别的路径?
  1. css配置
  • 插件安装npm i style-loader css-loader

  • style-loader 用于打包之后的css, 通过style标签插入到页面中

  • css-loader 主要处理url @import引入的路径处理

   module: {
     rules: [
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader']
       }
     ]
   }

  1. less配置: npm i postcss-loader postcss-preset-env less less-loader - less-loader 用于处理webpack通过这个loader处理文件,具体交给less进行less文件 - postcss-loader 配置不同浏览器高级css特性配置前缀
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2, // 用于配置@import导入的less文件再次进行recursive处理
          }
        }
        'postcss-loader',
        'less-loader'
        ]
      }
    ]
  }
 // postcss.config.js
 
   module.exports = {
     plugins: [
       'postcss-preset-env'
     ]
   }

webpack配置-image

  • image文件处理:npm i file-loader url-loader
  • file-loader 主要是处理图片的路径,从一个文件到文件的路径拷贝
  • url-loader 默认会按照bese64图片处理 不会生成image图片文件,配置options.limited会根据值来区分是转换为base64还是生成图片
 module: {
     rules: [
       {
         test: /\.(png|jpe?g|svg|gif|webp)$/,
         use: [
           loader: 'file-loader',  只是对路径的复制
           options: {
             outputPath: 'images',
             filename: '[name].[hash:8].[ext]'
             // 或者
             name: 'images/[name].[hash:8].[ext]'
           }
         ]
       },
       // url-loader配置
        {
         test: /\.(png|jpe?g|svg|gif|webp)$/,
         use: [
           loader: 'url-loader',  默认都会生成base64
           options: {
             limit: 10 * 1024,  // 10k
             outputPath: 'images',
             filename: '[name].[hash:8].[ext]'
             // 或者
             name: 'images/[name].[hash:8].[ext]',
           }
         ]
       },
       // webpack5 内置asset资源配置
       {
         test: /\.(png|jpe?g|svg|gif|webp)$/,
         type: 'asset/resource', // === file-loader
         generator: {
           filename: 'images/[name].[hash:8][ext]' // 后缀名中ext包含了.
         }
       },
        {
         test: /\.(png|jpe?g|svg|gif|webp)$/,
         type: 'asset', // === url-loader
         generator: {
           filename: 'images/[name].[hash:8][ext]' // 后缀名中ext包含了.
         },
         parser: {
           dataUrlCondition: { // 限制条件设置
             maxSize: 10 * 1024
           }
         }
       }
     ]
   }

webpack配置-字体图标

  • 字体图标的设置主要是做字体文件路径的移动处理- file-loader
    {
        test: /\.(ttf|woff2?|eot)$/,
        use: {
          loader:'file-loader',
          options: {
            name: 'fonts/[name].[hash:8].[ext]'
          }
        }
      },

webpack配置-JavaScript

  • js高级语法的转换 npm i babel-loader @babel/core @babel/preset-env
    • babel-loader
    • @babel/core 包含了babel转换的核心包
    • @babel/preset-env 预设(插件的集合),包含了像@babel/plugin-transform-arrow-functions,@babel/plugin-block-scoping等多个插件的集合
       {
          test: /\.js$/,
          use: 'babel-loader'
        },
        
        // babel.config.js配置
         module.exports = {
           presets: [
             '@babel/preset-env'
           ]
          }
    

webpack配置-vue

  • vue模板文件配置: npm i vue-loader vue@next @vue/compiler-sfc vueLoaderPlugin
  • vue-loader 用于webpack处理.vue结尾的文件
  • vue@next 默认安装的是runtime版本的vue3.js
  • @vue/compiler-sfc用于处理单文件组件的vue文件编译 相当于vue2版本的vue-template-compiler插件
  • vueLoaderPlugin
   {
     test: /\.vue/,
     use: 'vue-loader'
   },
   plugins: [
     new VueLoaderPlugin()
   ]
  • 对于vue的runtime+compiler和runtime-only
    1. runtime+compiler 包含了对templete的处理,从template转换为render函数处理的过程是通过compiler完成的,包含了 runtime和compiler两个核心文件, 需要使用@vue/compiler-sfc进行模板处理
    2. runtime-only:不包含对template的转义,对render函数处理直接生成虚拟DOM节点
    3. vue-loader编译单文件 vue-loader内置了对.vue文件的转义和热更新的功能。

webpack环境配置