webpack多页面开发哪种目录结构比较好?

 

RT 多页面目录结构看了很多种。。主要的大概有下面这些

第一种:一个页面一个文件夹,内部包含所有依赖

webpack-project //项目根目录
    --src //开发目录
        -index //主页的目录
          +index.html
          +images
          +js
          +css
        -about //about页面的目录(内部和上面index一样)
        -works //同上
        -contact //同上
    --dist //发布目录
        -内容就是用html-webpack-plugin生成的和src一样的结构
    --package.json
    --mode_moudule
    ...

第二种:HTML都扔模板目录,js/css/image等资源放另外目录

webpack-project //项目根目录
    --src //开发目录
      -views //HTML模块目录,所有的HTML页面都塞进去
        +index.html
        +about.html
        +contact.html
      -css
      -js
        +index.js
        +about.js
        +contact.js
        +components //其他的js片段
      -images
      
    --dist //发布目录
        --内容就是用html-webpack-plugin生成的和src一样的结构
    --package.json
    --mode_moudule
    ...

第三种:不使用html-webpack-plugin生成html,html直接引用dist里的打包后资源

webpack-project //项目根目录
    --src //开发目录
      -css
      -js
        +index.js
        +about.js
        +contact.js
        +components //其他的js片段
      -images
    --dist //发布目录
      -css
      -js
      -images
    --package.json
    --mode_moudule
    --index.html
    --about.html
    --contact.html

 

posted @ 2017-05-16 14:19  zero7酱紫  阅读(2061)  评论(0编辑  收藏