网页前端 webpack使用

2020-08-31 04:16 youxin 阅读(286) 评论(0) 编辑收藏举报

　　Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

特性

打包 CommonJs 和 AMD 模块（以及绑定）
可创建单个或多个按需加载的块，以减少初始加载时间
在编译期间会解决依赖关系，减少了运行时的大小
加载器可以在编译时预处理文件，如 coffee-script 到 javascript

https://www.cnblogs.com/ClaudiaYan/p/11506828.html

https://segmentfault.com/a/1190000010627001

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

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中路径的替换和其他位置的，多了一些容错的处理。