webpack构建Vue3

利用npm init -y创建package.json
用tsc --init创建tsconfig.json
此时创建文件使得目录结构为：

txt

|-- webpack-demo,
    |-- package.json,
    |-- pnpm-lock.yaml,
    |-- tsconfig.json,
    |-- webpack.config.js,
    |-- pubilc,
    |   |-- index.html,
    |-- src,
        |-- App.vue,
        |-- main.ts,
        |-- assets,
        |-- views,

使用webpack还需要配置webpack和webpack-cli，用以下两条命令：

shell

pnpm add webpack

pnpm add webpack-cli

安装启动服务pnpm add webpack-dev-server
安装html模板pnpm add html-webpack-plugin
在webpack.config.js中配置模式，入口文件，输出文件，模板文件等，配置如下：

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

/**
 * 采用注解的方式引入代码提示
 * @type {Configuration}
 */
const config = {
    mode: "development",
    entry: './src/main.ts',
    output: {
        filename: '[hash].js',
        path: path.resolve(__dirname, 'dist')
    },

    plugins: [
        new htmlWebpackPlugin({
            template: './pubilc/index.html'
        })
    ]
}

module.exports = config

用pnpm add vue安装vue
在入口文件main.ts中将app挂载至vue中，需要在index.html中先定义一个div元素，例如：

index.htmlmain.ts

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack-demo</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

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

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

此时还不能识别<template>标签，需要安装vue-loader和@vue/compiler-sfc来解析vue，运用以下命令：

shell

pnpm add vue-loader

pnpm add @vue/compiler-sfc

安装clean-webpack-plugin，使其在重新打包的时候清空dist，并修改配置文件webpack.config.js如下：

const { Configuration } = require('webpack')
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader/dist/index')
/**
 * 采用注解的方式引入代码提示
 * @type {Configuration}
 */
const config = {
    mode: "development",
    entry: './src/main.ts',
    output: {
        filename: '[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test: /\.vue$/, //解析vue 模板
                use: "vue-loader"
            },
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './pubilc/index.html'
        }),
        new CleanWebpackPlugin(), //打包清空dist
        new VueLoaderPlugin(), //解析vue
    ]
}

module.exports = config

初始化App.vue，可以进行 pnpm run dev 或 pnpm run build进行测试：

vue

<template>
    <div>
        hello
        {{ Rarrot }}
    </div>
</template>

<script setup>
import { ref } from 'vue'
const Rarrot='nihao'
</script>
<style scoped>

</style>

此时项目还不能解析css文件的样式属性，需要安装css-loader和style-loader，跟vue-loader一样要在配置文件webpack.config.js中进行配置：

... 
rules: [
    {
        test: /\.vue$/, //解析vue 模板
        use: "vue-loader"
    },
    {
        test: /\.css$/, //解析css
        use: ["style-loader", "css-loader"],
    },
]
...

要使其可以识别ts，需要安装typescript和ts-loader，并在配置文件webpack.config.js中进行配置：

... 
rules: [    
    ...
    {
        test: /\.ts$/,  //解析ts
        loader: "ts-loader",
        options: {
            configFile: path.resolve(process.cwd(), 'tsconfig.json'),
            appendTsSuffixTo: [/\.vue$/]
        },
    }

]
...

webpack构建Vue3 ​

webpack构建Vue3