Skip to content

suyi91/simple-frontend-template

Repository files navigation

简单的前端小项目模板工程

适用于一些简单的多页面项目(比如说component项目),可以本地调试开发和生产打包压缩。

更新日志

  • 2018-05-16 加入多页应用的支持
  • 2018-05-04 加入cross-env进行运行参数兼容 加入webpack-bundle-analyzer进行包内容分析
  • 2018-04-30 升级支持Webpack4✨ 添加SCSS支持

支持功能

  1. 模块化
  2. ES6+(Babel转义)
  3. ESLint
  4. CSS/LESS/SCSS
  5. PostCSS/Autoprefixer
  6. 本地开发支持Hot Module Replacement(HMR),并发布到本地
  7. 编译生产支持js压缩并生成sourceMap和css压缩,在dist/文件夹生成编译文件
  8. CDN配置(设置webpack config文件中的output.publicPath)
  9. 多页应用配置(设置webpack config文件中的entry。页面设置webpack config文件中添加HtmlWebpackPlugin)
  10. 多页使用方式 src/entry目录下面创建每一个页面的目录入口为index.jsindex.html

如何使用

  1. 解压zip包
  2. cd进目录
  3. npm i安装node依赖(太慢可以配置淘宝镜像)
  4. 本地开发npm run dev / 编译生产npm run build
  5. 如果只需要js和css,删除webpack config中的HtmlWebpackPlugin

工程介绍

工程结构如下

.
├── .babelrc                    # babel配置文件
├── .editorconfig               # 通用编辑器配置文件
├── .eslintignore               # eslint跳过检查的配置文件
├── .eslintrc.js                # eslint配置规则文件
├── .postcssrc.js               # postcss配置文件
├── README.md
├── build                       # webpack配置文件夹
│   ├── webpack.base.conf.js    # base文件
│   ├── webpack.dev.conf.js     # 开发用
│   └── webpack.prod.conf.js    # 生产用
├── package.json                # 项目配置
└── src                         # 源代码目录
    ├── index.html              # 入口html文件
    ├── index.js                # js入口文件
    └── less                    # less文件夹
        └── main.less