简介
Webpack 和 Vue.js 是前端开发中较为流行的工具。Webpack 是一款基于 Node.js 的静态模块打包工具，可以将多个模块打包成一个文件，可以优化前端项目的性能。Vue.js 是一款轻量级的前端框架，它给我们提供了组件化的思路，结合 Webpack 可以更好的管理开发流程。
本篇文章将详细介绍如何搭建基于 Webpack2.x 和 Vue2.x 的开发环境，并给出实例代码，帮助读者快速入门。
安装 Node.js 和 npm
在开始搭建之前，我们需要先安装 Node.js 和 npm。Node.js 是一个基于 Chrome V8 引擎的平台，用于开发服务器端应用程序。npm 是 Node.js 的包管理工具，我们可以通过 npm 安装各种 Node.js 的模块和框架。
安装 Node.js 和 npm，可以参考 Node.js 的官方网站：https://nodejs.org。
初始化项目
在安装好 Node.js 和 npm 后，我们需要初始化一个项目。在命令行窗口中输入以下代码：
npm init
按照提示输入相关信息，完成项目的初始化。
安装 Webpack 和 Vue.js
接下来，我们需要安装 Webpack 和 Vue.js。在命令行窗口中输入以下代码：
npm install webpack vue --save-dev
这里我们使用了 --save-dev 参数，表示这两个模块是开发时使用的。
创建项目目录结构
接下来，我们需要创建一个项目的目录结构。这里我们创建一个 src 目录用于存放源代码，和一个 dist 目录用于存放打包后的代码。在 src 目录下创建一个 entry.js 文件，这个文件将作为 Webpack 打包入口文件。在 dist 目录下创建一个 index.html 文件用于展示打包后的代码。
项目目录结构如下：
.
├── dist
│ └── index.html
└── src
└── entry.jsWebpack 配置
接下来，我们需要配置 Webpack。在项目根目录下创建一个 webpack.config.js 文件，输入以下代码：
-- -------------------- ---- -------
----- ---- - ---------------
----- ------- - ------------------
-------------- - -
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
------- -
------ -
-
----- ---------
---- ------------
--
-
----- --------
---- ---------------
-------- --------------
-
-
--
-------- -
--- -----------------------------
-------- -
------ -
-------- -----------
-------- ---------------------
-
-
---
--- ---------------------------------
--------- -
--------- -----
-
--
-
-上面的代码中，我们配置了 Webpack 的入口文件为 entry.js，输出文件为 bundle.js，使用了 Vue.js 的加载器 vue-loader 和 Babel 机制的加载器 babel-loader。同时，我们还配置了 Webpack 插件，使用了 UglifyJsPlugin 插件用于压缩代码，以及 LoaderOptionsPlugin 插件用于配置 Babel。
Vue 代码编写
在 src 目录下，创建一个 App.vue 文件用于编写 Vue 代码。如下所示：
-- -------------------- ---- -------
----------
-----
------ ----- -------
----- ------- ------
------
-----------
--------
------ ------- -
------ -
------ -
------ --------------------
-------- -----------
-
-
-
---------这里我们只是简单的编写了一个页面渲染的代码，当然可以根据需求自行编写。
在 entry.js 文件中，我们需要引入 Vue 和 App.vue 文件。如下所示：
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#app',
render: h => h(App)
})这里我们使用了 ES6 的 import/export 语法。
安装依赖模块
我们还需要安装一些依赖模块。在命令行窗口中输入以下代码：
npm install vue-loader babel-loader babel-core babel-preset-es2015 babel-plugin-transform-runtime --save-dev
运行项目
现在我们就可以运行项目了。在命令行窗口中输入以下代码：
webpack
这个命令将会执行 Webpack 的默认配置文件 webpack.config.js，并且将打包后的文件输出到 dist/bundle.js 中。
在 dist/index.html 文件中，添加以下 HTML 代码并保存。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------------------
-------
------
---- ---------------
------- -------------------------
-------
-------在命令行窗口再输入以下代码，运行 dist/index.html 文件。
open ./dist/index.html
此时打开浏览器，就可以看到我们刚刚编写的 Vue 代码成功运行了。
总结
以上就是基于 Webpack2.x 和 Vue2.x 的开发环境搭建教程，通过本文，你可以快速上手使用 Webpack 和 Vue，搭建一个基本的开发环境，帮助你更好地进行前端开发。
完整代码示例：https://github.com/Sanonz/webpack2.x-vue2.x-tutorial
如果你对以上内容还有疑问，欢迎留言讨论。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649c118848841e98948db129