webpack-cli基本命令

1、安装和配置webpack

npm install -g @vue/cli

2、基于3.x版本的脚手架创建vue项目

// 1. 基于 交互式命令行 的方式，创建 新版 vue 项目
vue create my-project
// 2. 基于 图形化界面 的方式，创建 新版 vue 项目
vue ui
// 3. 基于 2.x 的旧模板，创建 旧版 vue 项目
npm install -g @vue/cli-init
vue init webpack my-project

3、脚手架自定义配置

推荐在vue.config.js中单独配置，不要在package.json中，package.json单独管理包的。

4、项目优化

安装babel-plugin-contransfor-remove-console（运行环境），移除文件中的console.*，需要在babel.config.js里配置

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ],
    //就是这里配置
    'transform-remove-console'
  ]
}

4、项目优化策略

1、生成打包报告

打包时，可以生成报告，生成报告有两种方式：

1、通过命令行参数的形式生成报告
    vue-cli-service build --report

2、通过可视化UI面板直接查看报告

2、修改vue.config.js修改webpack的默认配置

在vue-cli-3.0生成的项目中，默认隐藏了webpack的配置项
如果需要修改webpack的默认配置需求，需要在项目根目录中按需创建vue.config.js

基本格式如下：
// vue.config.js

module.exports = {
   // xxx
}

3、为开发模式与发布模式指定不同的打包入口

默认情况下，Vue项目的开发模式与发布模式，共用同一个打包的入口文件(src/main.js)
为了将项目的开发过程与发布过程分离，需要分两种模式各自指定打包的入口文件：
    1、开发模式的入口文件为src/main-dev.js
    2、发布模式的入口文件为src/main-prod.js

4、通过chainWebpack自定义打包入口

module.exports = {
  chainWebpack:config => {
    // 发布模式
    config.when(process.env.NODE_ENV === 'production',config=>{
      console.log('prod')
      config.entry('app').clear().add('./src/main-prod.js')
    })
    // 开发模式
    config.when(process.env.NODE_ENV === 'development',config=>{
      console.log('dev')
      config.entry('app').clear().add('./src/main-dev.js')
    })
  }
}

5、通过external加载外部CDN资源

默认情况下，通过import语法导入的第三方依赖包最终都会被打包合并到同一个文件中，从而导致打包成功后某个文件过大的问题。
为了解决以上问题，可以通过webpack的external节点，来配置并加载外部的CDN资源，凡是声明在externals中的第三方依赖包，都不会被打包。

具体代码如下：
// 第一步
config.set('externals',{
    vue: 'Vue',
    'vue-router': 'VueRouter',
    axios: 'axios',
    loadsh: '_',
    echarts: 'echarts',
    nprogress: 'Nprogress',
    'vue-quill-editor': 'VueQuillEditor'
})

//第二步
在public/index.html文件的头部添加CND资源引用：
  
  
  
  
  
  

  
  
  
  
  
  
  
  

  
  

6、特别注意如果要将element-ui也从cdn引入

首先在externals节点写上
    'element-ui': 'ELEMENT'  
其次将main.js里 import 'xxx.element.xx' Vue.use(xxx.element.xxx)全部移除掉

7、通过设置args定制不同环境的首页和是否引用CDN

// 在vue.config.js不同环境设置Plugin参数
config.plugin('html').tap(args => {
  args[0].isProd = true
  args[0].title = '发布-Vue电商后台管理系统'
  return args
})

// 在index.html判断内容

// 同理用 <% xxx %>判断是否需要引入CDN资源

8、路由懒加载

1、安装@babel/plugin-syntax-dynamic-import包
2、在babel.config.js配置文件中声明该插件
3、将路由改为按需加载的形式，示例代码如下：
    // webpackChunkName:分组的意思,会将同一分组的组件打包到同一JS种，加载的时候统一加载
    const foo1 = () => import( /* webpackChunkName:  "group-foo" */ './Foo1.vue')
    const foo2 = () => import( /* webpackChunkName:  "group-foo" */ './Foo2.vue')