前言
在前端开发中，我们经常需要使用到Webpack作为构建工具，而Vue是目前很热门的前端框架之一，因此结合Webpack和Vue进行开发也是非常常见的。本文将介绍如何使用Webpack4搭建一个Vue的开发脚手架。
安装
首先，我们需要安装Node.js和npm，这里不再赘述。安装完成后，我们可以使用以下命令来检查是否安装成功：
---- -- --- --
接着，我们需要在项目中安装Webpack和Vue的相关依赖：
--- ------- ------- ----------- ------------------ --- ---------- --------------------- ---------- ------------ ----------- ---------- ------------ ----------- ----------------- ----------
配置
webpack.config.js
在项目根目录下创建webpack.config.js文件，作为Webpack的配置文件。配置文件的主要作用是告诉Webpack如何处理文件，以及如何打包输出。以下是一个基本的Webpack配置文件：
----- ---- - ----------------
----- --------------- - ---------------------------------
-------------- - -
------ ----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- ---------
---- ------------
--
-
----- ---------
---- -
---------------
------------
-
--
-
----- -------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------
----------- ---------
-
-
-
--
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
--
-------- -
--- -----------------
--
---------- -
------------ ---------
----- ----
-
--这个配置文件中，我们定义了入口文件为src/main.js，输出文件为dist/bundle.js，同时定义了处理.vue、.css、.png/.jpg/.gif、.js等文件的loader，以及使用VueLoaderPlugin插件。在devServer中定义了开发时的服务器端口和文件目录。
babel.config.js
在项目根目录下创建babel.config.js文件，作为Babel的配置文件。Babel主要用于将ES6+的代码转换为ES5的代码，以便在较老的浏览器中运行。以下是一个基本的Babel配置文件：
-------------- - -
-------- -
-------------------
-
--package.json
在项目根目录下的package.json文件中，我们需要添加以下脚本：
---------- - ------ ------------------- ------ ----------- -------- -------- -------- ------ ----------- -
这里的dev脚本用于开发时启动Webpack的开发服务器，build脚本用于打包输出。
示例代码
在src目录下创建App.vue、main.js和index.html文件，用于测试Webpack是否能正常工作。
App.vue
----------
-----
------ ------- -------
---- ------------ ------------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- ------
------ -----------------------------
--
-
--
---------
-------
-- -
------ ----
-
--------main.js
------ --- ---- ------ ------ --- ---- ------------ --- ----- ------- - -- ------ ------------------
index.html
--------- ----- ----- ---------- ------ ----- ---------------- --------------- - ----------- ------- ------ ---- --------------- ------- --------------------------- ------- -------
运行
在命令行中执行以下命令：
--- --- ---
这时会自动打开浏览器，并访问http://localhost:8080，我们就可以看到Hello, Vue!和一张图片了。
如果我们要打包输出，可以执行以下命令：
--- --- -----
这时会在dist目录下生成bundle.js文件和images目录。
总结
本文介绍了如何使用Webpack4搭建一个Vue的开发脚手架，包括Webpack和Vue的相关依赖的安装、Webpack和Babel的配置以及示例代码的编写。希望本文能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660aef59d10417a222abdcba