webpack从0到1构建Vue3

?????????从0到1构建，简单来讲，就是配置能够识别各种文件的loader，包括css、ts、vue等文件，配置完这些loader这些之后，你要配置的就是一些边角料了，比如读取的主文件在哪里，打包后的文件在哪里，这两个分别用entry和output两个属性来配置，除此之外还需要安装一些插件来增强对应的功能，比如安装htmlWebpackPlugin插件使webpack能够读取打包后的html文件。以下就是通过webpack简单实现的vue3配置。我觉得webpack就是一个容器，你需要什么，就往里面添加什么东西。就是这么简单。当然了，webpack远远不止这么简单，这还需要我不断地探索下去。

const { Configuration } = require('webpack')
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

const {VueLoaderPlugin } = require('vue-loader/dist/index')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')

/**
 * @type {Configuration}
 */
const config = {
    mode: 'development',
    entry: './src/main.ts',
    stats: 'errors-only',
    output: {
        filename: '[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './public/index.html'
        }),
        new VueLoaderPlugin(),
        new CleanWebpackPlugin(),
        new FriendlyErrorsWebpackPlugin({
            compilationSuccessInfo: {
                messages: ['Your Application running here: http://localhost:8080']
            }
        })
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.ts$/,
                use: ['ts-loader']
            }
        ]
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src')
        },
        extensions: ['.vue', '.js', '.ts']
    },
     /*
       表示打包时不打包Vue，而采用cdn引入的方式，降低打包后包的体积，而采用cdn的话，加载速度与网            
       络有关，白屏的时间可能会更长
     */
    externals: {
        vue: 'Vue'
    }
}

module.exports =  config

/**
 * @type {Configuration}
 */
 这一行注释加上以后，对于vscode来说可以拥有更友好的提示

以上内容来自于B站小满zs的学习总结。