Webpack+react多页面开发(二)-终极架构

#1

webpack-react-multi-page

仓库

特性

  • :family_woman_woman_girl_girl: 支持多页面同时热加载开发
  • :card_index: 自动识别新创建页面
  • :memo: 每个页面生成个性化信息
  • :restroom: 分类打包
  • :link: 灵活扩展

安装&使用

// clone
git clone git@github.com: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