2.vue3引入[webpack搭建vue3脚手架]上一章我们完成了项目路的基本配置。接下来我们将vue3引入到我们的脚

这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战

脚手架git地址 持续更新中....

概览

上一章我们完成了基本配置（链接）。接下来我们将vue3引入到我们的脚手架中，并完善一些常见loader配置。

引入vue3，你需要知道

之前我在webpack中配置过vue2，配置vue2需要：

vue2
vue-loader 一般小于16版本
vue-template-compiler Vue 2.0 模板预编译为渲染函数

在webpack中配置vue3有些许的不一样

vue3
vue-loader 必须大于16版本
@vue/compiler-sfc 代替vue-template-compiler

vue3引入

配置vue-loader

module: {
    rules: [
      {
        test: /\.vue/,
        exclude: /node_modules/,
        use: 'vue-loader'
      }
    ]
}

配置VueLoaderPlugin

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    plugins: [
        new VueLoaderPlugin()
    ]
}

一般来说只需要配置一个loader即可，但是vue必须要配置这个插件。其主要作用在于处理rule，详情可以查找相关资料或者查看源码。

测试代码

App.vue代码如下：

<template>
  <h1>{{a}}</h1>
</template>

<script>
import { ref } from '@vue/reactivity'
export default {
  setup() {
    const a = ref('111')
    return {
      a
    }
  },
}
</script>

index.js如下

import { createApp } from 'vue'
import App from './App.vue'

const app =createApp(App)
app.mount('#app')

页面效果

样式、图片配置

对于一个前端项目配置一个css预编译语言和图片处理是比不可少。

样式配置

本项目我们选择scss这门预编译语言，主要配置的点如下：

browserslist在不同前端工具之间共享目标浏览器和 Node.js 版本的配置）
postcss配置自动加前缀
生产环境下使用mini-css-extract-plugin分离css

browserslist

使用autoprefixer的时候必须配置browserslist来指明目标浏览器。有三种方式来配置browserslist

根目录下创建.browserslistrc文件

last 15 versions

package.json下配置


"browserslist": [
    "defaults",
    "not IE 11",
    "maintained node versions"
  ]

postcss-loader中初始化autoprefixer的时候指定(官方没有给出这种配置，但个人觉得还十分方便的)

{
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        plugins: [
          require('autoprefixer')
        ]
      }
    }
}

dev下配置

module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader', 
          'css-loader', 
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer')
                ]
              }
            }
          },
          'sass-loader'
        ]
      }
    ]
  }

prod下分离css

生产环境下建议把css分离出来。如果不分离就是css-in-js，这样会到底js文件过大。

module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader', 
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer')
                ]
              }
            }
          },
          'sass-loader'
        ]
      }
    ]
 }
plugins: [
    new MiniCssExtractPlugin()
]

使用url-loader处理图片

webpack5对于资源，引入了新的模块类型（链接），配置更加方便

{
    test: /\.(png|jpg|gif)$/i,
    type: 'asset/resource'
}

我们也可以再webpack5中使用之前的loader配置，这里选择url-loader，是因为其有更丰富的配置。常见的就是当图片小于某个值的时候会将其自动转为base64.配置如下：

{
    test: /\.(png|jpg|gif)$/i,
    type: 'javascript/auto',
    use: [
      {
        loader: 'url-loader',
        options: {
          // 这里的单位是byte 字节
          limit: 200 * 1024,
          // 输出到相应的目录
          outputPath: "img/",
          // 图片可以单独加域名
          // publicPath: '',
          // 防止图片导入是 src为一个对象
          esModule: false,
        }
      }
    ]
 }

另外配置一个资源别名

resolve: {
    alias: {
      assets: path.resolve(process.cwd(), './src/assets')
    }
}

这样我们在代码中可以通过img引入图片，也可以在样式中设置图片，具体用法如下：

<img src="~assets/logo.png" alt="">
.bg {
    width: 200px;
    height: 200px;
    background: url("~assets/logo.png");
    background-size: 100% 100%;
}

总结

这一章引入了vue3，配置了样式，图片处理。下一章引入ts，配置eslint。