webpack4+react多頁面環境搭建（開箱即用）

最近作一個新項目，使用webpack4+react搭建前端的多頁面開發環境，這裏分享一下本身的配置，開箱即用，有須要的能夠參考一下~

原文地址, github地址，歡迎star~

一. 目錄結構

mall-wap
├── app                                 開發頁面
│   ├── actions                         放置對應頁面的action
│   ├── components                      公用組件
│   ├── page                            對應頁面的入口
│   │   ├── index                       主頁入口文件夾
│   │   │   ├── components              主頁相關組件
│   │   │   ├── index.js                主頁入口文件
│   │   │   └── index.pcss              主頁樣式文件，使用postcss
│   │   └── page.js                     對應頁面的數據配置（添加一個頁面必須再次添加該頁面的相關配置）
│   ├── public
│   │   ├── css
│   │   │   ├── common.pcss             公共css
│   │   │   └── iconfont.pcss           iconfont字體樣式文件
│   │   ├── font                        字體文件
│   │   ├── imgs                        圖片
│   │   └── js
│   │       ├── axios                   axios攔截器
│   │       └── mock                    mock數據
│   ├── reducers                        放置對應頁面的reducer
│   └── stores                          放置對應頁面的store
├── config
│   ├── webpack
│   │   ├── webpack.base.conf.js        基本配置信息
│   │   ├── webpack.com.conf.js         title, keyword, description生成配置
│   │   ├── webpack.dev.conf.js         開發配置
│   │   ├── webpack.entry.conf.js       入口js信息配置
│   │   ├── webpack.file.conf.js        輸出目錄配置
│   │   ├── webpack.file.move.js        手動移動文件配置
│   │   ├── webpack.html.conf.js        html生成配置
│   │   └── webpack.prod.conf.js        生產配置
│   ├── entry.conf.js                   入口js生成配置
├── devEntry                            開發環境入口js生成目錄
│   └── *.js
├── dist                                生產環境打包目錄
│   ├── css
│   ├── js
│   ├── resource
│   ├── favicon.ico
│   └── *.html
├── node_modules
├── proEntry                            生產環境入口js生成目錄
│   └── *.js
├── .babelrc
├── .gitignore
├── index.html                          頁面*.html的生成模板
├── package-lock.json
├── package.json
├── postcss.config.js
└── README.md
複製代碼

二. 功能說明

1. eslint代碼檢查，css Module；
2. 已引入UI庫antd-design-mobile，工具庫lodash，並做按需打包處理；
3. 網絡請求引入axios，前端模擬數據引入`mock;
4. react-tap-event-plugin，處理手機端tap事件；
5. 引入store，對應頁面分別配置，若不須要可刪除。
6. 每一個頁面可配置的title，keyword，description，cnd資源引入
7. 已做手機端適配，以750設計稿爲準，設計稿1px對應頁面爲0.01rem；

若項目爲pc端，則刪除index.html中的以下代碼

<script type="text/javascript">
  const resize = (e) => {
    const screenWidth = window.screen.availWidth;
    const size = screenWidth / (750 / 100);
    document.documentElement.style.fontSize = size + 'px'
  }
  window.onresize = resize
  resize()
</script>
複製代碼

更換antd-design-mobile庫爲你喜歡的庫便可。