webpack path publicpath 的区别

一般情况的打包目录：
path:
       index.html

       xx/app.js

       xx/main.css

       xx/logo.png

path：是打包文件 本地输出目录

publicpath：在服务器上的发布目录（建议绝对路径，相对路径也可以，但是注意的是相对index.html服务器发布目录）app.js 会渲染进入 index.html ,这样所有 对css，png 的导入路径统一到index.html

       

webpack基本原理，一切皆模块，通过入口js (main.js),根据 import/require/src来找到所有需要的资源（js,vue，css,png/peg图片），然后根据定义好的loader/插件 进行打包解析。
常用loader  1，style /css 文件，css-loader/style-loader,(直接把css文件写入app.js文件，app.js文件被调用时，1以<style></style>写入index.html),还有一个插件（extract-css-webpack）,这个插件会根据插件的路径配置将css文件抽取到 path/xx/xx.css中
                   2，图片等静态文件：url-loader(file-loader),会根据图谱大小，如果比较小直接把图片编码成base64，放入js文件。如果比较大：就会根据url-loader的路径配置放入path/xx/xx.png,然后修改相关路径（import/src）为 (publicpath+xx/xx.png),这个巧好匹配到发布到服务器上的路径

注意一点： js 文件导入会直接导入到相关组件，而不是修改导入路径
 注意的插件：
              copy-webpack:会复制相关路径的文件path/xxx路径
              html-webpack：使用一个html 解析成一个path/index.html,会导入加入link src=publicpath+xx/xx.css 来导入css 文件（前提是使用extract-css-webpack），会<script src =publicpath+xx/xx.js ></script>,,这个可以用来生成多页面。