搭建vue脚手架

1.需要的插件
npm i webpack webpack-cli vue-loader vue-template-compiler sass-loader sass css-loader style-loader babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime

安装loader，主要作用就是编译和转换。

webpack.config.js 是在node.js环境下运行的，配置文件用的是commonjs的语法。

webpack-cli 提供webpack的终端命令，去调用webpack

sass-loader css-loader style-loader：
比如把sass代码转换成css代码，style-loader将css引入到style标签。

babel-loader @babel/core（核心库） @babel/preset-env（预设的配置集合），
babel在转译的时候，会将源码分成syntax 和 api 两部分处理，处理api需要用到一些辅助函数， @babel/runtime包含两个文件夹：helpers（定义了一些处理新的语法关键字的帮助函数）、regenerator （ 仅仅是引用regenerator-runtime这个npm包）。
@babel/plugin-transform-runtime ： 当需要用到regeneratorRuntime的地方，会自动引入

把新的es6语法转换成旧的语法，让浏览器兼容。

vue-loader vue-template-compiler：
vue-loader是用来解析和转换.vue文件的，vue-loader会将vue组件里的js脚本（script），样式代码style 和template 模板提取出来，交给对应的loader去处理，比如js脚本会交给babel-loader，样式会交给css-loader，template模板会交给vue-template-compiler 处理，将html模板编译成可以执行的js代码。

图片，字体，图标等资源：
webpack4是用raw-loader，url-loader和file-loader，webpack5是通过资源模块类型代替了以前的loader，
asset/resource导出url形式，
asset/inline导出URI形式，base64，
asset/source 导出资源的源代码
asset是在 URL 和 URI 之间选择

                {
                    test: /\.jpg$/,
                    type: "asset",
                    parser: {
                        dataUrlCondition: {
                            // 少于4mb生成base64，选择inline类型
                            maxSize: 4 * 1024 * 1024
                        }
                    }
                },

2.完整webpack.config.js配置
webpack.config.js

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

module.exports = {
    // entry 入口是指定从哪个文件开始分析
    entry: './src/main.js',

    // output就是定义打包后的文件输出到哪个文件夹，以及定义文件的命名
    output: {
        // path必须是绝对路径 , __dirname是当前项目的绝对路径
        // 因为window和linux系统的路径符号不一样，需要用到path.resolve函数，会根据操作系统，拼接出绝对路径
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },

    // 模块，在webpack里，所有的文件都是模块，比如说js，css，vue组件，图片都被webpack视为一个模块
    // 然后用loader，对这些模块进行编译，转换
    module: {
        // rules，对象数组，模块的打包规则
        rules: [
            { test: /\.vue$/, use: 'vue-loader' },
            { test: /\.s[ca]ss$/, use: ['style-loader', 'css-loader', 'scss-loader'] }, // scss或sass

            // mjs或js
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use:{
                    loader: "babel-loader",
                    options: {
                        // 预设配置
                        presets:['@babel/preset-env'],
                        plugins: [
                            // 当需要用到regeneratorRuntime的地方，会自动引入
                            [
                                '@babel/plugin-transform-runtime'
                            ]
                        ]
                    }
                }
            },

            // 图片处理 ,旧语法,raw-loader,url-loader,file-loader
            // { test: /\.(png|jpe?g|gif|svg|webp)$/, use: { loader: "file-loader", options: {esModule:false}}}

            // 新语法 , 资源模块类型
            { test: /\.(png|jpe?g|gif|svg|webp)$/, type: "asset/resource"},


        ]
    },

    // plugins插件,是用来增强webpack的功能的，数组里面存放的是构造函数的实例
    plugins: [
        new VueLoaderPlugin(),
    ],

    devtool: 'source-map'
}

main.js

// 入口文件

// 创建一个vue的实例，绑定到id为app的元素上(创建真实dom，将app元素替换掉)
import { createApp } from 'vue'
import App from "./App.vue";

// 注册 vue-router
import router from "./router/index.js";

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