介绍
easywebpack-vue 是一个基于 easywebpack 配置的 Vue.js 打包工具。它的主要作用是将 Vue.js 项目打包成可运行的静态文件，以便于部署在服务器或客户端。
安装
使用 easywebpack-vue，需要先安装 Node.js 和 npm。然后使用以下命令安装 easywebpack-vue：
npm install easywebpack-vue --save-dev
配置
easywebpack-vue 的配置基于 webpack 的配置文件，因此需要先了解 webpack 的基本配置。假设我们的项目结构如下：
. ├── dist/ ├── node_modules/ ├── src/ │ ├── index.js │ └── App.vue ├── package.json └── webpack.config.js
其中，src/index.js 文件是我们的入口文件，App.vue 是我们的 Vue.js 组件。首先，我们需要在 package.json 中添加以下配置：
{
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js",
"build": "webpack --config webpack.config.js"
}
}这将允许我们使用 npm run dev 或 npm run build 命令来启动开发服务器或进行生产打包。然后，在 webpack.config.js 中添加以下配置：
-- -------------------- ---- -------
----- ---- - ----------------
----- -------------- - ---------------------------
-------------- - -
----- -------------------- -- --------------
------ ----------------------- ----------------
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- ---------
------- -------------
--
-
----- --------
------- ---------------
-------- ---------------
--
--
--
-------- -
--- ----------------
--------- ----------------------- ------------------
---
--
---------- -
------------ -------------------- --------
--------- -----
----- -----
--
--上述配置完成了以下操作：
- 设置模式为开发模式或生产模式；
- 指定入口文件为 src/index.js；
- 指定输出文件为 dist/bundle.js；
- 添加 vue-loader 和 babel-loader，以处理 Vue.js 和 ES6+ 代码；
- 添加 easywebpack-vue 插件，以处理 Vue.js 模板；
- 配置开发服务器。
使用
我们可以在入口文件 src/index.js 中使用以下代码来构造我们的 Vue.js 实例：
import Vue from 'vue';
import App from './App.vue';
new Vue({
render: (h) => h(App),
}).$mount('#app');然后，在 App.vue 中编写我们的 Vue.js 组件：
-- -------------------- ---- -------
----------
-----
----------- -- -- ---------
----- ------- ------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- --------
--
--
--
---------最后，运行 npm run dev 命令启动开发服务器，在浏览器中打开 http://localhost:9000，即可看到我们的 Vue.js 组件在页面中被渲染出来。
总结
easywebpack-vue 是一个基于 easywebpack 配置的 Vue.js 打包工具，它可以帮助我们将 Vue.js 项目打包成可运行的静态文件。在使用 easywebpack-vue 时，需要了解 webpack 的基本配置，并按照要求配置 easywebpack-vue 插件。最后，我们可以在入口文件中构造 Vue.js 实例，在组件中编写我们的 Vue.js 模板。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb6a6b5cbfe1ea06115b2