WebPack在单页项目中的探究

2019年8月30日 97次阅读 来源: 二哲

媒介

之前引见了 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

    原文作者：二哲
    原文地址: https://segmentfault.com/a/1190000004989206
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞