从0-1webpcak打包Vue项目——Vue项目的打包本文主要关注Vue（含ts/css）项目的配置以及打包，实现了n

从0-1webpcak打包Vue项目——基本打包讲了如何打包普通的HTML js 文件，这一篇文章主要关注Vue(含ts)文件

1 准备

首先是安装vue以及相应的loader

npm i vue@latest
npm i vue-loader
npm i @vue/compiler-sfc

webpack本身不支持.vue文件，后面两个包是用来解析Vue文件的

2 配置

webpack.config.js

// 配置智能提示
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')
/**
 * @type{Configuration}
*/


const config = {
    mode:"development",
    // 入口文件
    entry:"./src/main.ts",
    module:{
        // 解析app.vue
        rules:[{
            test:/\.vue$/,
            use:"vue-loader"
        },{
            test:/\.css$/,
            use:["style-loader","css-loader"]
        },{
            test:/\.ts$/,
            loader:"ts-loader",
            options:{
                configFile:path.resolve(process.cwd(),"tsconfig.json"),
                appendTsSuffixTo:[/\.vue$/]
            }
        }]
    },
    // 出口
    output:{
        filename:'[hash].js',
        path:path.resolve(__dirname,'dist')
    },
    plugins:[
       new htmlWebpackPlugin({
        template:"./public/index.html"
       }),
        //注册一下
       new VueLoaderPlugin(),
       new CleanWebpackPlugin()
    ]
}

module.exports = config

在plugin中注册了VueLoaderPlugin，同时在rules里配置了一个正则表达式，处理.vue结尾的文件。不只是.vue文件，其它文件比如说css文件/ts文件，webpack也无法识别，需要安装并引入css-loader,style-loader等，方法是一样的。

ts的配置里面多了一个options，由于vue文件里面有ts写法，这是对.vue文件做一个特殊处理。

此外，由于ts里面无法识别引入的vue文件，需要额外创建声明文件，新建vue.d.ts（根目录，与ts.config.json同级），写入

declare module "*.vue" {
    import { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}

并在ts.config.json里面加入

{
  "compilerOptions": {
     //省略
  },
  "include": ["vue.d.ts"],
}

3 基本的Vue项目

在app.vue里面写入一些简单的内容，由于已经配置了

<template>
    <span>Hello World, I am {{a}}</span>
</template>
<script setup lang="ts">
import {ref,reactive} from 'vue'
import '@/assets/index.css'
const a = ref<string>("webpack")
</script>
<style>

</style>

main.ts

import {createApp} from 'vue'
import App from './views/App.vue'
createApp(App).mount('#app')

通过createApp创建Vue实例并且挂载在id为app的元素上

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>webpack demo</title>
    </head>
    <div id="app"></div>
</html>

创建id为app的dom

4 结果

运行npm run build，发现app.vue里面的内容已经出现了

运行npm run dev, 展示正常，也支持热更新

5 优化

当前项目webpack打包时会输出很多信息，但这些信息对我们来说大多是无用的，希望能去掉。安装friendly-errors-webpack-plugin npm i @soda/friendly-errors-webpack-plugin

const FriendlyErrorsWebpackPlugin = require('@soda/friendly-errors-webpack-plugin');
const config = {
    ...
    plugins:[
       new FriendlyErrorsWebpackPlugin(),
    ]
    ...
}

module.exports = config