module.exports = { ... module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', }， { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, ] }, ... }
4. 入口文件
这里我们需要编写在webpack中配置的入口文件地址的entry.js，主要功能为挂载生成的vue实例app至id为app的DOM节点上：
// entry.js import { app } from './app.js' app.$mount('#app')
// app.js import Vue from 'vue' import App from './App.vue' import router from './router' const app = new Vue({ router, ...App }) export { app, router }
5. vue组件编写
然后我们需要编写一个最简单的vue组件index.vue，将其放在views文件夹下
<template> <div>hello world!</div> </template> <script></script> <style></style>
同时我们需要编写最外层父组件App.vue，一般像下面这样，主要嵌套一层router-view来动态展示不同路由下的内容:
<template> <router-view></router-view> </template> <script></script> <style></style>
6. 路由配置
在编写完我们vue的单文件组件后，我们需要配置我们的路由文件，以便实现一个单页应用：
import Vue from 'vue' // 引入vue import Router from 'vue-router' // 引入路由 Vue.use(Router) // 注册路由 import Index from '../views/index.vue' // 引入我们刚刚编写的简单的组件 export default new Router({ mode: 'hash', routes: [ { path: 'https://www.jb51.net/', name: 'index', component: Index, }, { path: '*', redirect: 'https://www.jb51.net/' }, ] })
7. 热加载
最后我们需要实现一个前端热加载的功能来实时更新我们修改后的页面，这里我们需要安装一个webpack-dev-server的插件，其可以为我们搭建一个本地小型的Node.js Express服务器。
安装完成后，我们需要在package.json的scripts中配置启动命令dev：
... "scripts": { "dev": "webpack-dev-server", "build": "rimraf dist && cross-env NODE_ENV=prod&&webpack -p --config ./webpack.config.js" } ...
上次配置的build命令用于删除dist目录并切换开发环境及打包压缩代码，而dev命令用于启动本地服务器，生成的包只会存在于内存中。
8. 注意事项
完成上方步骤后其实还会存在一个问题，那就是我们的部分ES6代码无法获得解析，这里我们还需要添加babel的配置文件.babelrc：
{ "presets": [ ["env", { "modules": false }], "stage-2" ], "plugins": ["transform-runtime"], "comments": false, "env": { "test": { "presets": ["env", "stage-2"], "plugins": [ "istanbul" ] } } }
这里我们使用了stage-2来处理ES6中对象无法使用…解构的问题，同时使用transform-runtime来优化我们的代码利用率。
项目实例
上方只讲述了vue自定义构建的主要步骤和关键代码，详细代码实例可以参考：https://github.com/luozhihao/vue-setup-course
结语
本文主要介绍了vue项目构建的两种方式，vue-cli构建与自定义构建都有其适用的范围和对象，大家需要针对项目和自身条件的情况进行择优选择，同时在自定义构建中也有很多功能配置本文并未提及，感兴趣的童鞋可以自己继续探索。
您可能感兴趣的文章: