8、一个webpack项目的大体目录结构

2019独角兽企业重金招聘Python工程师标准>>>

目录结构如下：

projectTemplate/
    ├── scripts/    node脚本
    │  ├──
    │  ├── dev-server.js  本地开发服务器
    │  ├── preview-server.js  打包后预览服务器
    │  ├── build.js  打包脚本
    │  ├── utils.js  工具函数
    │  ├──
    ├── config/     工程配置
    │  ├──
    │  ├── index.js  基础配置文件，在此可简单的修改webpack相关配置
    │  ├── webpack.base.js  webpack的基础配置，主要是loader、resolve、extract-text-webpack-plugin、CommonsChunkPlugin、devtool的配置
    │  ├── webpack.dev.js   webpack开发配置，主要是livereload、HMR及相关的插件
    │  ├── webpack.prod.js  webpack生产配置，主要是代码的压缩混淆，图片压缩，加hash
    │  ├── karma.conf.js  测试配置
    │  ├──
    ├── src/   开发目录
    │   ├── components/   组件
    │   ├── pages/        页面（页面下的项目目录需要遵循一定的规范以便创建webpack的入口文件，不过这些规范是可以调整的；以下只是推荐）
    │         ├── index/   首页
    │              ├── images/  图片资源
    │              ├── page.css 样式文件，文件名称可以按照自己意愿命名
    │              ├── page.js  脚本文件及webpack的入口文件，文件名称可以在/config/index.js配置
    │              ├── template.html 模板文件及要撰写的html文件，文件名称可以在/config/index.js配置
    │              ├──
    │
    ├── dist/  代码产出目录
    │
    ├── test/  测试（目录可以意愿来创建，但是测试文件名称必须遵循*_test.js的命名规范，可在/config/karma.conf.js修改配置）
    │
    ├── node_modules/     自动生成，包含node依赖以及开发依赖
    │
    │
    └── etc

转载于:https://my.oschina.net/kunBlog/blog/1797239