webpack再入门，说一下那些不入流的知识点

先说说Vue-Cli（Vue项目脚手架）

关于它能干什么，就再也不赘述了，咱们主要谈谈生成的与webpack相关的项目结构：

大致上就分三层（固然随着你在生成项目配置的参数不一样，项目结构可能会有不一样），首先package.json里面的devDependencies属性里，包含了构建这个项目webpack所须要的各类依赖node包和执行项目的快捷指令配置，build文件夹是一些和webpack相关的配置，而config是一些和项目相关的配置，关于这两个文件下每一个文件具体是干啥的，能够看下这篇文章，我只简单说明一下，在执行命令时，这些文件是怎么组合在一块儿使用的，也能够理解成执行顺序，能够粗略看看：

因此咱们知道，Vue-Cli之因此便捷，由于他启用了可配置参数来初始化一个项目，至于为何要将咱们一般的一个webpack.config.js能完成的事情写到2个文件夹12个文件来完成，大概就是传说中的模块化吧，鬼知道呢？

关于打包时资源路径的配置

assetsSubDirectory：资源子目录，指js,css，img存放的目录，其路径相对于index.html
好比我将其配置成：assetsSubDirectory：''和assetsSubDirectory：'static',从下面的图，你应该就能够直观感觉配置assetsSubDirectory这个路径的区别了。多说一句，此时index.html中js,css的资源路径是这样的：script type=text/javascript src="/static/js/manifest.js?v=8cca728d">，注意/static/

assetsPublicPath：资源目录，默认是这样配置的assetsPublicPath: '/'，指assetsSubDirectory目录也就是js,css,img等资源相对于服务器host地址，传说中的绝对路径，host是什么,ip地址加端口号，好比http://192.168.0.102:8089/new...，其host指的就是http://192.168.0.102:8089，因此若是你若是和我同样，用的是tomcat服务器，那就会遇到当咱们要访问咱们的网页时,访问的地址是http://ip:port/projectName/in...通常没有项目会直接用http://ip:port/index.html这个地址。因此像上面提到的js路径地址，这时就会被解析成http://ip:port/static/js/mani...，而正确的的url路径应该是http://ip:port/projectName/st...，因此咱们须要将assetsPublicPath: '/'改为assetsPublicPath: '/projectName/'，这样才能保证资源的正确发布。
坑位提示：本身当时是这样配置的assetsPublicPath: '/projectName'，也就是相对于正确的少了一个'/'，但神奇的是js，css都能打包出正确的路径，本身自动添加了一个'/'，但在一个.vue的template下有一个图片路径被解析成http://ip:port/projectNamesta...，rojectName与static之间少了一个'/'，我的估计是针对于index.html中路径的替换和其余位置的，多了一些容错的处理。

关于项目，文件，内容hash值

在webpack打包中，有三类hash值，仍是一篇好文推荐，分别是：

整个项目编译，产生的hash值，官方js打包也是默认使用这个值,因此你全部的静态文件都用这个打包的话，就会看到打包出的文件含有的hash值同样，见下图

模块文件编译，产生的hash值，因此不一样的模块产生的hash值就不同，见下图