这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战
webpack打包有很多属性，一般都是用的默认配置，在出现问题时候，才会去查阅文档，配置属性，总结一下，温故而知新
webpack打包优化
- 先去掉默认生产的以map结尾的js文件，这个js文件差不多占了js文件夹一半的容量，所以没必要用到。位置config/index.js 设置 productionSourceMap: false
productionSourceMap: false,
- 使用webpack提供的gizp压缩工具 config/index.js中找到productionGzip，把默认的false改成true，不过在修改之前我们要先去下载compression-webpack-plugin直接在该项目中执行npm install --save-dev compression-webpack-plugin即可
productionGzip: true,
- jQuery、echarts、elementUI、axios之类的，都有cdn链接，使用cdn在index.html引用，也可以下载静态资源在index.html引入
// 1、webpack.base.conf.js添加externals
externals: {
'vue': 'Vue',
'element-ui': 'ElementUI', // 或者 ELEMENT
}
// 2、main.js 注释掉element-ui
import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)
// 3、index.html需要先引入vue，再引入elementui
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.4.11/index.js"></script>
config.js属性大全
1.publicPath
- Type: string
- Default: '/'
- 部署应用包时的基本 URL，
- 用法和 webpack 本身的 output.publicPath 一致。
- 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径。
2.outputDir
- Type: string
- Default: 'dist'
- 输出文件目录，当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。
3.assetsDir
- Type: string
- Default: ''
- 放置生成的静态资源 (js、css、img、fonts) 的目录。
4.indexPath
- Type: string
- Default: 'index.html'
- 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。
5.filenameHashing
- Type: boolean
- Default: true
- 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。然而，这也要求 index 的 HTML 是被 Vue CLI 自动生成的。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。
6.lintOnSave
- Type: boolean | 'error'
- Default: true
- 是否在保存的时候使用
eslint-loader进行检查。 有效的值：ture|false|"error"当设置为"error"时，检查出的错误会触发编译失败。
7.productionSourceMap
- Type: boolean
- Default: true
- 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
具体的其他设置见下图
以上就是config的一些配置了，记录一下，温故而知新！
