仓库

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

特性

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

安装&使用

// clone
git clone [email protected]: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