前言
Vue 单页应用是目前互联网开发中非常常见的一种应用架构，而 Webpack 则是处理前端资源的首选工具。本篇文章将会介绍如何使用 Webpack 命令行脚本配置 Vue 单页应用，以及如何最大程度地优化开发效率。本文假设读者已经对 Vue 单页应用有基本的了解，并熟悉 Webpack 配置相关知识。
项目结构
在开始配置之前，我们需要先建立一个简单的项目结构，具体如下：
-- -------------------- ---- ------- ------- --- --- - --- ---------- - --- ------ - --- ------- - --- ------- --- ---- --- ------------ --- ------------ --- -----------------
其中，src 文件夹存放源代码，components 文件夹存放可复用的组件，router 文件夹存放路由配置。App.vue 和 main.js 文件则是 Vue 单页应用的入口文件。dist 文件夹存放打包好的文件，node_modules 文件夹存放依赖的第三方库。package.json 文件是项目配置文件，webpack.config.js 是 Webpack 的配置文件。
配置 Webpack
安装依赖
在开始配置 Webpack 前，我们需要先安装必要的依赖，具体命令如下：
npm install webpack webpack-cli vue-loader vue-template-compiler css-loader sass-loader vue-style-loader --save-dev
其中，webpack 是 Webpack 核心库，webpack-cli 是 Webpack 的命令行工具，vue-loader、vue-template-compiler、css-loader、sass-loader、vue-style-loader 则是处理 Vue 单页应用中的资源（如 .vue 文件、.css 文件、.scss 文件）的工具。
配置 Webpack
接下来，我们需要在 webpack.config.js 文件中配置 Webpack，具体代码如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- - --------------- - - ----------------------
-------------- - -
------ ----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- ---------
------- ------------
--
-
----- ---------
---- -
-------------------
------------
-
--
-
----- --------------
---- -
-------------------
-------------
-------------
-
-
-
--
-------- -
--- -----------------
-
--这里我们对 .vue 文件、.css 文件、.scss 文件进行了相应的处理。VueLoaderPlugin 是一个插件，用来将 .vue 文件编译成 Vue 单文件组件。
配置命令行脚本
接下来，我们需要在 package.json 文件中配置命令行脚本，以方便开发。具体代码如下：
{
"scripts": {
"build": "webpack --mode production",
"dev": "webpack-dev-server --open --hot --mode development",
"lint": "eslint --ext .js,.vue src"
}
}其中，build 脚本用来打包上线版本，dev 脚本用来启动开发服务器，lint 脚本用来检查代码格式是否符合规范。
总结
通过上述步骤，我们成功地配置了 Webpack 命令行脚本，可以方便地进行 Vue 单页应用开发。值得一提的是，使用 Webpack 命令行脚本还有很多高级配置和插件可以优化开发效率，比如热更新、代码压缩、分离打包等等，读者可以根据实际需求进行深入研究。
示例代码
本文使用的示例代码可以从 这里 获取。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f69c1ef6b2d6eab3f300ee