使用webpack搭建vue3的项目（新手）

首先是对应的文件目录src下存放css文件index.css，项目的入口文件main.js以及vue模板app.vue

1.项目基本依赖

使用webpack搭建vue项目，一定少不了webpack的依赖包

具体安装 npm i webpack webpack-cli -D

自然也少不了vue3的下载，因为npm i vue默认下载的2.6的版本，所以下载vue3的话需要指定安装

具体安装：npm install vue @next 3.0.11

有了vue3与webpack基本目标需求后，开始进行项目搭建，在项目总目录下创建index.html，作为项目打开的网页文件，这里不使用插件自动生成。在html中引用之后打包的目标文件main.js,同时编写div，这里命名就直接用vue中的小案例的counter当作div的命名，在之前使用较多也广为人知的命名可能就是app。

有了html文件后需要考虑./dist/main.js，可以知道./dist/main.js是打包后的目标文件，但在打包前main.js该如何配置，以及webpack如何去处理main.js中的内容就需要相对的考虑。

2.配置打包环境

webpack.config.js中首要的就是配置入口文件，将src下的main.js作为打包的入口文件，而打包后的结果存放就放在index.js中所引用到的dist中，到这js文件在webpack中的处理已经告一段落，其次该处理对应的vue。

const path=require("path")
module.exports={
    entry:"./src/main.js",
    output:{
        path:path.join(__dirname,"dist"),
        filename:"main.js"
    }
    mode:"development"
}

 3.vue相关配置

项目到1，2为止，运行webpack已经可以达到使用的目的，但实际上这个程度与vue没有任何关系，接下来就要开始处理相关的静态资源文件。

在src下的main.js中，传统的vue-cli生成的vue2.x项目中，在入口文件中经常可以看到

i

import Vue from 'vue'

但在vue3的项目依旧使用将会导致一个警告

需要处理该警告的方式就是使用解构赋值按需将模块导入，如下所示：

import { createApp } from 'vue'

而vue3中vue的挂载方式也与vue2中有所区别，改为了

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

在这里，出现了app.vue文件，首先webpack本身是没有处理vue文件的能力，所以在webpack.config.js中配置对应的loader，使其能够解析vue文件

想要vue3的项目，对应的vue-loader版本是16.0.0-beta.4，而相关的安装，需要指定版本具体安装为

npm i vue-loader@16.0.0-beta.4 -D

而在vue2项目中，template编译使用的是vue-template-compiler，但是vue3项目再使用这个，将会提示版本不匹配

所以处理vue3项目的使用，vue-template-compiler已经被替代为@vue/compiler-sfc，具体的安装为：

npm i @vue/compiler-sfc -D

下载完成后自然少不了对应的配置，在webpack.config.js中有以下配置，到这里就完成了在webpack中对于vue解析已经完成，接下来顺便把css文件也一并处理了。

下载css-loader，style-loader

npm i style-loader css-loader -D

并在webpack的module中做相应的配置

const path=require("path")
const { VueLoaderPlugin }=require("vue-loader")
module.exports={
    entry:"./src/main.js",
    output:{
        path:path.join(__dirname,"dist"),
        filename:"main.js"
    },
    plugins:[
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {
                test:/\.css$/,
                use:["style-loader","css-loader"]
            },
            {
                test:/\.vue$/,
                use:["vue-loader"]
            }
        ]
    },
    mode:"development"
}

到次为止，已经完成对于vue，css文件的相应处理，最后就可以编写对应的css，vue的内容啦，以下随便编写些内容，App.vue中如下

<template>
    <div>
        {{ welcomeLanguage }}
    </div>
</template>
<script>
import { setup } from 'vue'
export default {
    name:"firstVueProJectInVue3",
    setup() {
        var welcomeLanguage="welcome to use Vue3 in Webpack"
        return { welcomeLanguage }       
    },
}
</script>

css文件中：

body{
    background-color: yellow;
}

最后的项目结构如1所示，在命令行中运行npx webpack后完成打包

 

最后查看index.html的运行结果

配置成功，能正常显示出结果。最后附带上所需要包的依赖版本：

  "dependencies": {
    "vue": "^3.0.11"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.11",
    "css-loader": "^5.2.6",
    "style-loader": "^2.0.0",
    "vue-loader": "^16.0.0-beta.4",
    "webpack": "^5.37.1",
    "webpack-cli": "^4.7.0"
  }