快速达建网站,五金网站建设制作,软件工程培训班多少钱,画册设计是什么背景
在实际开发中#xff0c;我发现团队对于这几个路径的设置上是纯靠猜的#xff0c;通过一点点地尝试来找到可行的路径#xff0c;这是不应该的#xff0c;我们应该很清晰地了解这几个概念#xff0c;以下通过截图和代码进行细节讲解。 npm run dev 下的路径如何处理我发现团队对于这几个路径的设置上是纯靠猜的通过一点点地尝试来找到可行的路径这是不应该的我们应该很清晰地了解这几个概念以下通过截图和代码进行细节讲解。 npm run dev 下的路径如何处理 我们要搞明白 npm run dev 在干什么 这个过程使 webpack 启动了一个本地 http 服务什么是 http 服务就是你可以通过 url 的方式http://loclahost:9080/xxxx 来获取具体的资源文件例如 http://localhost:9080/index.html 要获取 index.html 这个服务就会根据逻辑去提取 index.htm 数据并输出出去 上面的 index.html 是放在内存里面的webpack 在 run dev 时会先根据 webpack.xxxx.config.js 配置文件进行打包但是这个打包结果并不放在硬盘上而是放在内存里最终也是要打包成 index.html index.js这个就是一堆源码打包的最终 js webpack dev server 这个 http 服务会同时监听源码入口引入的其他模块代码只要这些代码有改变那么 webpack 就会重新打包 index.js 例如__static 路径是在 webpack.xxxxx.config.js 进行配置的 这里要记得渲染进程和主进程是两个独立进程它们分别都有自己的 webpack.xxxx.config.js 文件因此两者的__static 设置的可能并不相同
npm run build 时的路径 npm run build 时是生产环境下的命令 生产会把代码都打包到 dist 路径下后续运行的也不是 webpack dev server http 服务来启动这时 index.html 下可以定义一些路径 因为渲染进程是以 src/index.ejs 作为 index.html 生成模板的所以 index.ejs 最终打包的位置就是__dirname 的位置如果你想找到 dist/electron/static 则是需要上翻 3 层就到了 static这样后续 index.js 使用全局_static 就能很方便地找到 static 路径了 如果你需要找 dist/ 的话那需要上翻 4 层以此类推 针对不同的渲染进程你可以配置不同的模板来定义自己的__static webpack dev server 的 static 是啥 这里的 static 并不是一个具体目录的名字这是一个配置 key这个 key 的意思是 dev server http 服务启动后除了从打包根路径 dist/electron/renderer/pages/main/ 访问 index.html 和 index.js 文件外当访问一张图片时dev server 服务去哪里找呢我们从下面的这个配置就知道是项目根目录下找这里是个数组你可以配置多个资源文件路径也即意味着可以在多个目录下找资源文件 这里的意思是当你访问/static/imgs/logo.png那就是从根目录下访问这个 logo.png,生产环境 下面就是__static 就是绝对路径 dev 环境下 http://localhost:9080/static/imgs/logo.png 对于 vue 文件中直接访问的图片 如 img src“../../logo.png”这个 webpack 并不处理因为它不知道怎么处理dev 环境下就是根据配置的资源文件路径下找但是 prod 环境下就靠你拷贝具体的资源文件夹到何时的路径了 file-loader/url-loader 主要是处理哪些显式引入的且能正确定位位置的资源文件将其选择是否 base64 集成或者迁移到打包后的文件下的 imgs/* 下 preload.js 和 inject.js 文件的引入 你不能引用源码的入口文件 index.js原因是源码的入口文件还没有打包呢你引进这个源码 index.js 就是引入 index.js不是把所有 index.js 引入的其他代码都引入了没有任何机制在帮你做这件事 你可以用 webpack dev server 起一个服务来单独打包这个 js然后对外输出你就可以引入 localhost:9080/preload.js这样是否支持热更不得而知 因此你必须直接引打包完成的 dist/electron/preload/web/whatsapp/preload.js 这个文件这个文件是整合好的引入就全引入了
