WebPack在单页项目中的探索

sorra 发布于2019-08-19 18:10 / 2311人阅读

摘要：前言之前介绍了在多页项目中的探索那篇有极大得不住，还有极大得改善空间，并不完美，不建议用在生产环境，其实是现在不想去优化，懒的配置其实可以看我的一个的单页尝试目录介绍由于后台使用了框架的模式为后台编写文件则为后台编译后的文件线上的页面需要放

前言

之前介绍了 webpack在多页项目中的探索
那篇有极大得不住，还有极大得改善空间，并不完美，不建议用在生产环境，其实是现在不想去优化，懒 :)

thinkjs + vue + vueRouter + webpack 的 SPA配置

(其实可以看我的一个repo thinkjs+vue的单页blog尝试 )

目录介绍

由于后台使用了 thinkjs 框架的ES6模式

src 为后台编写文件, app 则为后台编译后的文件

线上的页面需要放在 view/home 下

静态资源文件全放在 www/static 下

前端开发目录为 source

前端开发约定（目录）

- source 
    - common          // 公用.vue
    - components      // 对应controller下的组件
    - static          // 第三方静态资源
    - unitTest        // 数据测试json
    - views           // 页面
    index.html        // 主站入口html
    index.sass        // 主站全局sass
    main.js           // 主站入口js
    router.js         // 主站路由

难点

output要好好设置,这涉及到开发环境下,你的路径去哪里找js.以及build后线上环境又是怎么样的个路径去找js

有的人可能有疑问,vue-cli生成的项目.为什么直接 npm run dev 就可以开始跑了呢?明明连js文件都没有,浏览器怎么还能找到文件呢?

其实这就是webpack的一个强大之处,在dev过程中,js的确有编译,但是仅仅是编译在内存中,你的确看不见那个文件,所以一样可以使用 (可以看看这个：http://www.meckodo.com/?p=721)

了解这一点后,我们的output就很明白到底要如何设置了

output: {
        path: path.resolve(__dirname, "./www/static"),
        publicPath: "/static/",
        chunkFilename: "js/[id].js",
        filename: "[name].build.js"
    }

文字表达的确很难能感受到是为什么,建议大家clone我这个repo,然后感受下具体是怎么样的过程.

模板html文件

在SPA中,我们就可以用webpack插件来为我们生成html模板到所对应的目录了.

//webpack的plugin里加入以下插件
new HtmlWebpackPlugin({ //为了配合thinkjs的目录定义 需要输出在view/home/[controller]/index.html 下
            filename : "../../view/home/index/index.html",
            template : "./source/index.html",
            inject:false
        })

别的基本大同小异,我就不具体再介绍一次了

dev

npm run dev

主站 http://localhost:8200/source/index.html

build

npm run build

结合后台测试

npm run start

主站 http://localhost:8360

GPU云服务器云服务器 java项目中的调度服务器中的项目路径 webrtc项目中的stl库在哪里深度探索

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79265.html

毫无色彩的二哲和他的巡礼之年

摘要：前戏今年，对于我个人而言遭遇了三个重大的转折点。尽可能的把沟通成本用约定和文档降低。学习的这一年可以说年的学习，在上半年的精力，放在了技术上。而下半年则相反。前戏今年，对于我个人而言遭遇了三个重大的转折点。 15年9月大三休学创业，16年9月重新复学大三在2016年4月顺利引进天使轮，公司从厦门集美区搬到了深圳南山区 16年底，我们正在准备接入A轮 16年与15年相比，总体来...

Alex 2019-08-20 14:05 评论0 收藏0
webpack单页应用多路由多骨架屏插件

摘要：前言在单页应用中可能会有一些特殊情况，需要不同的路由下显示不同的首骨屏。一般这种需求可以后端动态生成包含首骨屏代码实现，但如果想要纯前端实现的话目前并未发现比较好的库或插件。例如首骨屏模板前言在单页应用中可能会有一些特殊情况，需要不同的路由下显示不同的首骨屏。比如新闻列页和新闻详情页。一般这种需求可以后端动态生成包含首骨屏代码HTML实现，但如果想要纯前端实现的话目前并未发现比较好...

pingan8787 2019-08-26 10:39 评论0 收藏0
基于 NPM 的大型 React 单页应用探索（多场景多方案）

摘要：基于的大型单页应用探索多场景多方案原文地址未完待续本文目标构建基于的大型单页应用以及多页面，支持多模块协同开发分布式构建与发布。基于 NPM 的大型 React 单页应用探索（多场景多方案）原文地址：https://github.com/luqin/blog/issues/10 未完待续…… 本文目标构建基于 NPM 的大型 React 单页应用（以及多页面），支持多模块协同开发、...

tinylcy 2019-08-22 10:59 评论0 收藏0
指尖前端重构（React）技术调研分析

摘要：一为什么选择是当前前端应用最广泛的框架。目前来看的生态系统要比大的多，在等最大的技术社区搜索两者，的搜索结果是的十倍左右，另外据近期统计使用的站点是的几百倍以上。其中是基于技术，依然是浏览器应用。一、为什么选择React React是当前前端应用最广泛的框架。三大SPA框架 Angular、React、Vue比较。 Angular出现最早，但其在原理上并没有React创新的性能优化...

AlphaWallet 2019-08-23 18:18 评论0 收藏0
Webpack 2 中一些常见的优化措施

摘要：所以我们应该分析业务依赖和路由，尽可能将所有组件的公共依赖提取出来。文件分离文件分离主要是将图片和从中分离。在生产环境下，可以考虑将图片和从中分离。 Webpack 2中一些常见的优化措施分离第三方依赖在开发环境下, 通常会采取 HMR 模式来提高开发效率. 但一般情况下, 我们只会更改自身的业务文件, 不会去更改第三方的依赖, 但 webpack 在 rebuild 的时候, 依...

zoomdong 2019-08-20 17:06 评论0 收藏0