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

Question

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

不知道用那种的比较好？还有其他结构的也可以提供-

Answer 1

第一二种我都是有使用的，具体看业务需求。
来说下第一种，如果使用React开发项目的话，由于“组件化”的思想要求“高内聚、低耦合”，那组件自己的东西（图片、css等等）都需要在组件内部处理，这叫“高内聚”，所以一个组件一个文件夹。
第二种的话用得比较少，一般是在做后台，复用度比较低的情况下使用

Answer 2

我的答案是，把第一种和第三种综合一下：

• 同个页面/组件的所有资源放到一起，方便修改和引用。

• html页面要放到dist目录里，实现src目录和dist目录的彻底分离。即使没有使用html-webpack-plugin，也可以用file-loader给搬过去。

详细请看我这个系列的文章《webpack多页应用架构系列》

Answer 3

html-webpack-plugin怎么生成和src一样的目录结构？不是只能生成html么