WebPack在单页项目中的探索

前言

之前介绍了 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