vue项目构建：vue-cli+webpack常用配置

参考：

https://www.jianshu.com/p/f489e7764cb8 （Webpack-dev-server的proxy用法:）

https://blog.csdn.net/u014440483/article/details/87267160 （vue-cli3搭建项目之webpack配置:）

https://segmentfault.com/a/1190000017008697 （vue-cli3全面配置）

https://blog.csdn.net/weixin_43554698/article/details/89356625 （vue-cli3多入口分别打包）

一，步骤：

1，搭建node环境，此处省略

2，使用官方vue-cli脚手架

1,安装vue-cli

npm install -g @vue/cli

2,使用用vue-cli

vue create hello-world

 如果vue命令无效：

1. 以 管理员身份 运行 PowerShell

2. 执行 get-ExecutionPolicy 命令, 如果输出 Restricted，则表示需要我们手动打开.

3. 执行 set-ExecutionPolicy RemoteSigned 然后选择 

3,vue相关插件

　　vue-router 路由

　　vuex 状态管理　　

　　axios 请求数据

　　ui组件框架

4,启动vue项目

//开发模式
npm run serve
//生产模式
npm run build

 二，重点

1，路由懒加载

https://www.jianshu.com/p/965003f4069f

结合Vue的异步组件再结合webpack的代码分割，我们可以轻松的实现路由懒加载。

️vue-cli 3.0 模式就使用了Babel，我们需要添加 syntax-dynamic-import 插件，才能使 Babel 可以正确地解析语法。

// 安装插件 syntax-dynamic-import
cnpm install --save-dev @babel/plugin-syntax-dynamic-import

// 修改babel.config.js
module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
     "syntax-dynamic-import"
    ]
  ]
}

// 修改路由组件的加载（router/index.js）
{
  path: '/',
  name: 'home',
  component: resolve => require(['pages/Home'], resolve)
}

chainWebpack(config) {
    config.plugins.delete('preload') 
    config.plugins.delete('prefetch') 
  }