在前端开发中，随着 Single Page Application（SPA）的流行，使用 Vue 进行开发已经成为了一种趋势。而为了让 Vue 应用在上线前能够达到更好的性能表现，我们需要使用 Webpack 进行打包。下面将会详细介绍使用 Webpack 进行 Vue SPA 应用的打包方法。
安装和配置 Webpack
在进行 Vue SPA 应用的打包之前，首先需要安装和配置 Webpack，步骤如下：
- 安装 Webpack：使用 npm 进行安装，命令如下：
npm install webpack webpack-cli --save-dev
- 创建 webpack.config.js 文件：在项目根目录下创建 webpack.config.js 文件，该文件用来配置 Webpack。具体配置内容可参见如下示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- - --------------- - - ----------------------
-------------- - -
------ ----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
------- -------------
-------- ----------------------- ------
--
-
----- --------
------- ---------------
-------- ----------------------- ------
--
-
----- ---------
---- -
---------------
------------
-
-
-
--
-------- -
--- -----------------
-
-安装和配置 Vue 相关依赖
在安装和配置 Webpack 之后，为了能够正确打包 Vue SPA 应用，我们还需要安装和配置 Vue 相关依赖。具体步骤如下：
- 安装 Vue 和 Vue 相关依赖：使用 npm 进行安装，命令如下：
npm install vue vue-loader vue-template-compiler \ babel-loader @babel/core @babel/preset-env \ css-loader style-loader --save-dev
- 在 webpack.config.js 文件中添加相应配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- - --------------- - - ----------------------
-------------- - -
-- ---
------- -
------ -
-
----- ---------
------- -------------
-------- ----------------------- ------
--
-
----- --------
------- ---------------
-------- ----------------------- ------
--
-
----- ---------
---- -
---------------
------------
-
-
-
--
-------- -
--- -----------------
-
-打包 Vue SPA 应用
在配置完成之后，为了完成 Vue SPA 应用的打包，我们还需要使用如下命令：
npm run build
这个命令将会执行我们在 package.json 中设置的打包命令，将我们的 Vue SPA 应用进行打包。具体 package.json 配置内容如下：
-- -------------------- ---- -------
-
------- --------------
---------- --------
---------- -
-------- -------- ------ -----------
--
--------------- -
------ ---------
--
------------------ -
-------------- ---------
-------------------- ---------
--------------- ---------
------------- ---------
--------------- ---------
------------- ----------
------------------------ ----------
---------- ----------
-------------- --------
-
-总结
通过上述步骤，在熟悉 Webpack 配置和 Vue 相关依赖的基础上，我们可以使用 Webpack 来打包我们的 Vue SPA 应用，并将其运行于线上，从而达到更好的性能表现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646b2f65968c7c53b0a98db3