在前面的文章中，我们已经介绍了 Webpack 的基础知识和使用方法，以及如何在 React 项目中使用 Webpack。本文将介绍如何使用 Webpack 打造 Vue3 项目脚手架。
为什么要使用 Vue3
Vue 是一款流行的前端框架，它具有以下优点：
- 简单易用：Vue 的 API 简单易懂，学习成本低。
- 易于集成：Vue 可以很容易地集成到现有的项目中。
- 高效灵活：Vue 的渲染性能优秀，可以应对各种复杂的场景。
Vue3 是 Vue 的最新版本，它在性能和开发体验方面都有很大的提升。如果你正在考虑使用 Vue，那么 Vue3 是一个不错的选择。
打造 Vue3 项目脚手架
下面我们将介绍如何使用 Webpack 打造 Vue3 项目脚手架。我们将使用以下工具和库：
- Webpack 5：最新版本的 Webpack。
- Vue3：最新版本的 Vue。
- Babel：用于将 ES6+ 代码转换为浏览器可识别的代码。
- PostCSS：用于处理 CSS。
首先，我们需要创建一个新的项目目录，并在其中创建以下文件：
my-project/
|- package.json
|- webpack.config.js
|- src/
|- index.js
|- App.vue
|- assets/
|- style.css安装依赖
首先，在项目目录中初始化 npm：
npm init -y
然后，安装 Webpack 及其相关插件和加载器：
-- -------------------- ---- ------- --- ------- ------- ----------- ------------------ ---------- --- ------- ------------------- ---------- --- ------- -------------------- ---------- --- ------- ------------------- ---------- --- ------- ----------------------- ---------- --- ------- ---------- -------------- ----------- ---- ---------- --- ------- ------------ ----------- ----------------- --------------------- ---------- --- ------- ---------- --------------------- ---------- --- ------- ------ ------------------------- -------------------- ----------
配置 Webpack
在项目根目录中创建 webpack.config.js 文件，并添加以下配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
-------------- - -
------ -
----- -----------------
--
------- -
--------- --------------------------
----- ----------------------- --------
--
------- -
------ -
-
----- ---------
---- -------------
--
-
----- --------
-------- ---------------
---- -
------- ---------------
--
--
-
----- ---------
---- -
----------------------------
-------------
-----------------
--
--
-
----- ----------
---- -
----------------------------
-------------
-----------------
--------------
--
--
-
----- --------------------------
---- -
-
------- --------------
-------- -
----- -----------------------------
----------- ---------
--
--
--
--
--
--
-------- -
--- -------------------
--------- -------------------
---
--- ---------------------
--- -------------------
--------- -
-
----- ---------------
--- ---------
--
--
---
--- ----------------------
--------- ---------------------------
---
--
---------- -
------------ ---------
----- -----
----- -----
---- -----
--
-------- -
------ -
----- ------------------------------
--
----------- ------- ------- ---------
--
--这里我们使用了 vue-loader 来处理 .vue 文件，使用 babel-loader 来处理 ES6+ 代码。同时，我们还使用了 MiniCssExtractPlugin 将 CSS 提取到单独的文件中，使用 CopyWebpackPlugin 将静态资源复制到输出目录中。
配置 Babel
在项目根目录中创建 .babelrc 文件，并添加以下配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- -
-
--
-----------------------
-
-这里我们使用了 @babel/preset-env 来转换 ES6+ 代码，并使用了 @vue/babel-preset-app 来处理 Vue 相关代码。
配置 PostCSS
在项目根目录中创建 postcss.config.js 文件，并添加以下配置：
module.exports = {
plugins: [
require('autoprefixer'),
],
};这里我们使用了 autoprefixer 来自动添加 CSS 前缀。
配置 ESLint
在项目根目录中创建 .eslintrc.json 文件，并添加以下配置：
-- -------------------- ---- -------
-
---------- -
-------------
--
---------- -
--------
--
-------- -
-------------------- ------
----------------------- ------
------------------------------- ------
------------- ------
-------------------------------- ------
-------------------------- ------
--------------------------- ------
------------------------- -----
-
-这里我们使用了 airbnb-base 规则，同时禁用了一些不必要的规则。
编写代码
在 src/index.js 中添加以下代码：
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');这里我们使用了 Vue3 的 createApp 函数来创建应用实例，并将其挂载到 #app 元素上。
在 src/App.vue 中添加以下代码：
-- -------------------- ---- -------
----------
---- ------------------
------ ------- -------
---- ---------------------- ----------
------
-----------
--------
------ ------- -
----- ------
------ -
------ -
-------- ------- -------
--
--
--
---------
-------
---------- -
-------- -----
--------------- -------
------------ -------
---------------- -------
------- ------
-
-- -
---------- -----
-------------- -----
-
--- -
------ ------
------- ------
-
--------这里我们使用了 Vue3 的组件方式来编写页面，同时使用了 ./assets/vue.png 来展示静态资源的使用。
在 src/assets/style.css 中添加以下代码：
-- -------------------- ---- ------- ---- - ------- -- -------- -- ------------ ----------- - --- - -------- ------ ------- ---- ----- -
这里我们使用了 CSS 来设置页面样式。
在 src/index.html 中添加以下代码：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----------- --------------- ----- ---------------- -------------------------- ------- ------ ---- --------------- ------- -------
这里我们使用了 HTML 来设置页面结构，并引入了 CSS 文件。
运行项目
现在，我们已经完成了 Vue3 项目的脚手架搭建。要运行项目，只需要在命令行中输入以下命令：
npm run dev
然后，在浏览器中访问 http://localhost:8080，即可看到页面效果。
构建项目
要构建项目，只需要在命令行中输入以下命令：
npm run build
然后，Webpack 会将项目打包到 dist 目录中。
总结
本文介绍了如何使用 Webpack 打造 Vue3 项目脚手架。通过本文的学习，你可以掌握如何使用 Webpack 配置 Vue3 项目，并可以根据自己的需求进行定制。同时，本文还介绍了一些相关的工具和库，例如 Babel、PostCSS 和 ESLint，这些工具和库可以帮助我们更加高效地开发前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660cfc97d10417a222d648e8