关于产品上线
上线流程
上线
关于生产构建
生产构建步骤
把文件从js中抽取出来，形成单独的css文件，为什么要这样做呢？
这是head部分
之前写在模板里的css部分，看起来形成了很多个style。
css在渲染的时候，通常需要放在head部分，而JS的部分基本上是放在body里，如果把它放在一个文件里，会造成JS的启机会非常大，这是第一个点；第二个是CSS在JS中，等它下载完，这样就浪费了一个非常好的渲染时间，如果按照浏览器正常的渲染机制，应该是在head部分先渲染css，然后再请求JS，这中间有个时间差，这个时间差可以将页面渲染出来。
这种好处。
开启 sourceMap是用来定位压缩过后的文件是哪一行出现了问题。
在package.json
package.json里有一个build指令，用来开启生产环境代码的产出。
打包命令
平时我们开启预览是npm start。但是这里必须是npm run build，中间多了一个run，编译这个命令后多了一个dist目录，里面多了3个文件
dist目录
上线的时候主要是main.min.js和style.css。后端如果是jsp开发，html部分与jsp保持一致，如果是php开发，html部分与php保持一致，然后引入前两个js和css文件即可。
点开打包出来的index.html，这里的图片并没有出来，因为在引入图片的时候去掉了协议部分，是为了让图片的协议和文件协议保持一致，index.html用的是file协议，所以图片没有出来。
image.png
增加压缩文件的配置
webpack的中文文档，可以查看怎么配置。
https://webpack.docschina.org/guides/production/#
例如使用官方推荐的UglifyJSPlugin (点击可跳转)，
webpack.config.js
找准环境，添加进来：
对应添加
然后再执行一遍
npm run buildPS: 官方写的是上述写法，也就是new UglifyJsPlugin，但是在用build编译的时候，好像会报错，最后百度改成了这样
重新添加
前面加了几个字段，然后就能编译了，js也被压缩了。
被压缩的js
然后用css-loader压缩一下css，同样去webpack.config.js中找一下css-loader
找准环境
找准环境，添加minimize!
添加进去
[ps: css-loader后面是?不是!]
然后再npm run build一下
此时css已经被压缩了
开启调试
也就是开启了sourceMap的功能。
增加sourceMap
然后再npm run build编译，完成之后，dist目录下增加了这几个文件。
dist目录增加了
已开启
上线的时候除去css和js, 那两个js.map和css.map文件也要上线。
发布部署
发布部署步骤
部署那步骤不属于前端的操作，一般是 运维或者后端。
