node+webpack+react 多页面开发-终极架构

[leinov]

仓库

https://github.com/leinov/webpack-react-multi-page

特性

• 👩‍👩‍👧‍👧 支持多页面同时热加载开发
• 📇 自动识别新创建页面
• 📝 每个页面生成个性化信息
• 🚻 分类打包
• 🔗 灵活扩展

安装&使用

// clone
git clone [e-mail]:leinov/webpack-react-multi-page.git

// 安装依赖包
npm install

// 开发
npm run dev

// 编译打包
npm run build

// 启动生产页面
npm start

新创建页面在 src 下添加文件夹并创建pageinfo.json 然后npm run dev 即可

|-- src
    |-- index/
    |-- page2/
        |-- index.js
        |-- pageinfo.json

项目架构

技术使用

• react16
• webpack4
  • html-webpack-plugin 生成 html 文件
  • mini-css-extract-plugin css 分离打包
  • uglifyjs-webpack-plugin js 压缩
  • optimize-css-assets-webpack-plugin css 压缩
• es6
• babel
• node
  • opn 打开浏览器
  • compression 开启 gzip 压缩
  • express
  • fs
• git

目录结构

|-- webpack-react-multi-pages //项目
    |-- dist //编译生产目录
        |-- index
            |-- index.css
            |-- index.js
        |-- about
            |-- about.css
            |-- about.js
        |-- images
        |-- index.html
        |-- about.html
    |-- node_modules //node 包
    |-- src //开发目录
        |-- index //index 页面打包入口
            |-- images/
            |-- js
                |-- app.js// 业务 js
            |-- index.sass
            |-- index.js //页面 js 入口
        |-- about //about 页面打包入口
            |-- images/
                |--js
                    |-- app.js// 业务 js
            |-- about.sass
            |-- about.js //页面 js 入口
        |-- template.html // html 模板
        |-- style.sass //公共 sass
    |-- webpackConfig //在 webpack 中使用
        |-- getEntry.js //获取入口
        |-- getFilepath.js //src 下需要打包页面文件夹
        |-- htmlconfig.js //每个页面 html 注入数据
    |-- package.json
    |-- .gitignore
    |-- webpack.config.js //webpack 配置文件
    |-- www.js //生产启动程序

完整 wiki

[yokyj]

强烈安利 umijs