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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2208 天前的主题，其中的信息可能已经有所发展或是发生改变。

webpack-react-multi-page

仓库

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 //生产启动程序