webpack 搭建簡單 React 項目

前言

這是基於 webpack 4.0 實現的react框架，其中包含項目經常使用的配置，webpack打包分離壓縮優化處理，可供快速開發使用.

目錄結構

|———— build                     webpack配置文件
|———— config/                   配置文件
|———— dist/                     項目打包文件
|———— node_modules/             第三方模塊	
|———— public/                   HTML模板
|———— src/                      項目目錄
|     |———— common/             公共模塊
|     |———— components/         公共組件模塊
|     |———— modules/            頁面模塊
|     |———— routes/             路由配置模塊
|     |———— store/              redux配置模塊
|     |———— styles/             全局樣式表模塊
|     |———— util/               全局方法模塊
|     |———— index.js            入口頁面
|———— test/                     測試代碼模塊
|———— .babelrc                  webpack babel配置文件
|———— .gitignore                git代碼管理配置模塊
|———— .eslintrc.js              eslint配置文件
|———— package.json              包管理
|———— README.md                 說明文件
複製代碼

webpack 配置

1. webpack配置

1. 安裝webpack

   npm i webpack webpack-cli -D

   npm i webpack-merge -D

2. 配置webpack文件

   1. 建立webpack文件

      // 公共webpack文件
      build/webpack.base.js
      // 開發環境webpack文件
      build/webpack.dev.js
      // 生產環境webpack文件
      build/webpack.prod.js
      // 測試環境webpack文件
      build/webpack.stag.js
      複製代碼

   2. 建立環境變量文件

      config/process.env.js

   3. 執行webpack命令

      // 在package.json中scripts添加執行命令

      "scripts": {
          "dev": "webpack-dev-server --config build/webpack.dev.js --progress --colors",
          "build:prod": "webpack --config build/webpack.prod.js --progress --colors",
          "build:stage": "webpack --config build/webpack.prod.js --progress --colors",
        }
      複製代碼

      // 運行 npm run dev

      // 打包生產環境 npm run build:prod

      // 打包測試環境 npm run build:stage

2. 模塊(module)

在 module 選項主要就是設置 webpack 中經常使用的 loaders。經過 rules 規則來匹配具體應用的文件和loaders或者修改解析器（parser）。

1. module.noParse 防止預編譯匹配規則

   noParse: RegExp | [RegExp] | function

2. module.rules 設置匹配規則

   module.rules 的選項具體是用來設置 loaders 匹配文件的規則。

   module.rules: [{...}]

   rules裏面的每一個對象決定了 loaders 的具體類型以及 loders 做用的具體文件。

3. 文件匹配

   rule.test, rule.exclude, rule.include, rule.and, rule.or, rule.not

   上面三個對象其實掛載到的是 rule.resource 對象上的，你能夠直接寫到 rule 上，也能夠寫到 rule.resource 上。他們的值同一位 condition。

   rule.resourceQuery

4. condition 條件

   主要用來設置匹配文件的條件規則。能夠接受的值有：

   condition: string | RegExp | function | array | object

   string: 匹配文件的絕對路徑

   RegExp: 匹配文件的正則

   function: 參數爲 input 的路徑，根據返回的 boolean 來決定是否匹配

   array: 裏面能夠傳多個 condition 匹配規則

   object: 不經常使用，用來匹配 key

5. rule.oneOf

   接收一個數組，文件資源會默認找到 oneOf 中的第一個匹配規則，來調用對應的loader處理。

6. rule.parser

   解析選項對象。全部應用的解析選項都將合併。

7. rule.use

   應用於模塊的 UseEntries 列表。每一個入口指定一個 loader。

8. UseEntries

   必須有一個 loader 屬性是字符串。它使用 loader 解析選項（resolveLoader）,相對於配置中的 context 來解析。

   能夠有一個 options 屬性爲字符串或對象。值能夠傳遞到 loader 中，將其理解 options 選項。

3. loader 編譯設置

在 webpack2 的時候，主要寫法是根據 loaders 和 loader 來進行設定的。不過，在 webpack 3 改成根據文件來決定 loader 的加載。這其中，最大的特色就是，將 loaders 替換爲了 rules。

按照規範，use 是用來時間引入 loader 的標籤。在 webpack 3 時代，還保留了 loader 字段，廢除了 query 字段，其實能夠在 use 中找到替代。

1. loader

   用來定義具體使用的 loader，這裏等同於：use:[loader]。

2. query

   用來限定具體的 loader 使用的配置參數，例如

   test: /\.js$/,
     loader: 'babel-loader',
     query: {
       presets: ['es2015']
     }
   複製代碼

   不過，在 webpack 3 中已經廢棄了 query，使用 use 中 options 選項：

   test: /\.js$/,
     use: [
       {
         loader: 'babel-loader',
         options: {
           presets: ['es2015']
         }
       }
     ]
   複製代碼

4. babel 配置

babel 是一個 JavaScript```` 編譯器，用來解析es6語法或者es7語法分解析器，讓開發者可以使用新的es語法，同時支持jsx, tsx, vue``` 等多種框架。

1. 安裝babel

   // 加載 ES2015+ 代碼，而後使用 Babel 轉譯爲 ES5 npm i @babel/core babel-loader -D

   // 像 JavaScript 同樣加載 TypeScript 2.0+ npm i ts-loader -D 或者 npm i awesome-typescript-loader -D

2. 配置babel文件: .babelrc 或者 配置到 babel-loader options 中

   {
       "presets": [
         "@babel/preset-env",
         "@babel/preset-react",
         "state-0"
       ],
       "plugins": []
   }
   複製代碼

   babel 支持自定義的預設(presets)或插件(plugins),只有配置了這兩個才能讓babel生效，單獨的安裝babel是無心義的。

   presets：表明 babel 支持那種語法(就是你用那種語法寫)，優先級是從下往上,state-0|1|2|..表明有不少沒有列入標準的語法

   plugins: 表明 babel 解析的時候使用哪些插件，做用和 ```presets```` 相似，優先級是從上往下。

3. @babel/preset-env

   表示將 JavaScript es6 語法代碼編譯爲 es5 語法

4. @babel/preset-react

   表示將 JSX 和其餘東西編譯到 JavaScript 中

5. @babel/plugin-transform-runtime @babel/runtime

   Babel 對一些公共方法使用了很是小的輔助代碼，好比 _extend。默認狀況下會被添加到每個須要它的文件中

   你能夠引入 Babel runtime 做爲一個獨立模塊，來避免重複引入。

   下面的配置禁用了 Babel 自動對每一個文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 而且使全部輔助代碼從這裏引用。

   npm i @babel/runtime @babel/plugin-transform-runtime -D

6. babel-polyfill

   咱們以前使用的 babel，babel-loader 默認只轉換新的 JavaScript 語法，而不轉換新的 API。例如，Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法（好比 Object.assign）都不會轉譯。若是想使用這些新的對象和方法，必須使用 babel-polyfill，爲當前環境提供一個墊片。

   npm i babel-polyfill -D

7. @babel/plugin-proposal-object-rest-spread

   編譯解析 ... 對象語法

   let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
   console.log(x); // 1
   console.log(y); // 2
   console.log(z); // { a: 3, b: 4 }
   複製代碼

8. @babel/plugin-proposal-class-properties

   // 編譯解析 class 類中的箭頭函數

   npm i @babel/plugin-proposal-class-properties -D

9. @babel/plugin-syntax-dynamic-import

   // 編譯解析 動態導入資源

5. loader 加載資源

1. 處理css loader

   1. 加載資源

      npm i style-loader css-loader sass-loader node-sass -D

   2. 添加css打包分離壓縮去重

      npm i mini-css-extract-plugin optimize-css-assets-webpack-plugin postcss-loader autoprefixer postcss-import cssnano -D
      
      // 添加提取css插件
      // 配置 css loader ，配置 plugins 打包文件名和出口路徑
      npm i mini-css-extract-plugin -D
      
      // 添加css壓縮、去重插件
      // optimization.minimizer 添加插件
      npm i optimize-css-assets-webpack-plugin -D
      
      // 添加用於Webpack處理帶有Postss的CSS的加載程序
      npm i postcss-loader -D
      
      // 添加css前綴，兼容不一樣瀏覽器 插件
      npm i autoprefixer -D
      
      // 添加處理css的@import 只支持本地的 import 處理,不支持http 等遠程的URL連接的處理插件
      npm i postcss-import -D
      
      // 添加css優化處理器
      // 用於添加 optimize-css-assets-webpack-plugin 插件添加 optimization.minimizer 配置
      npm i cssnano -D
      複製代碼

2. 添加webpack加載器配置

   配置 webpack module.rules

3. 處理圖片、字體、文件 loader

   1. 加載資源

      npm i file-loader -D

   2. 添加webpack加載器配置

   配置 webpack module.rules

4. 加載資源數據（可選）

   能夠加載的有用資源還有數據，如 JSON 文件，CSV、TSV 和 XML。相似於 NodeJS，JSON 支持其實是內置的，能夠直接使用。 導入 CSV、TSV 和 XML需加載 npm install --save-dev csv-loader xml-loader

6. 管理輸出

1. 添加 HtmlWebpackPlugin 插件,

   // 添加到 webpack plugins ，動態打包輸出 html 文件

   npm i html-webpack-plugin -D

2. 添加 清理 /dist 文件夾插件 CleanWebpackPlugin

   // 添加到 webpack plugins ，動態清理打包文件內容

   npm i clean-webpack-plugin -D

7. 使用 webpack-dev-server 配置開發環境

1. 安裝

   npm i webpack-dev-server -D

2. 配置webpack配置文件 devServer

3. 添加模塊熱更新插件 plugins

   new webpack.NamedModulesPlugin(),
   new webpack.HotModuleReplacementPlugin(),
   複製代碼

8. 配置 webpack resolve 解析

1. resolve.modules

   告訴 webpack 解析模塊時應該搜索的目錄.

   絕對路徑和相對路徑都能使用，可是要知道它們之間有一點差別。

2. resolve.alias

   設置引用文件路徑的別名

3. resolve.extensions

   自動解析肯定的擴展。

9. 其餘 webpack 配置

1. 告知 webpack 爲目標(target)指定一個環境

   target: 'web',

2. 防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴(external dependencies)

   externals: {
     jquery: 'jQuery',
   },
   複製代碼

3. 配置如何展現性能提示

   performance: {
     // 定一個建立後超過 500kb 的資源，將展現一條警告
     maxAssetSize: 1024 * 500,
   },
   複製代碼

10. 打包分離壓縮

1. 壓縮

   npm i terser-webpack-plugin -D

   new TerserPlugin({
     terserOptions: {
       compress: {
         warnings: false,
         drop_console: true, // console
         drop_debugger: false,
         pure_funcs: ['console.log'], // 移除console
       },
     },
     sourceMap: false,
     parallel: true,
   }),
   複製代碼

2. 防止重複

   new webpack.optimize.CommonsChunkPlugin({
     name: 'common' // 指定公共 bundle 的名稱。
   })
   複製代碼

3. 代碼分離

   配置 webpack optimization.splitChunks

11. 添加離線服務器

npm i http-server -D

React 配置

1. 安裝 React

npm i react react-dom -S

2. 安裝react路由

1. 安裝

   npm i react-router react-router-dom -S

2. 建立路由配置文件 routes

3. 添加路由配置方法 routes/index.js

4. 建立動態引入建立路由對象 routes/method/dynamic-loader.js

5. 使用說明

   1. 頁面路由必須寫在 modules/ 模塊下
   2. 若是改頁面要成爲主路由，須要添加 route.js 建立子模塊路由對象

3. 安裝react-redux

1. 安裝

   npm i redux redux-logger redux-saga reselect -S

2. 中間件 redux-logger 打印 redux 跟新日誌

3. 中間件 redux-saga 處理反作用操做

4. reselect 計算衍生數據

5. 使用說明

   1. reducer文件必須使用在 modules/ 模塊下，且文件名爲 reducer
   2. saga文件必須使用在 modules/ 模塊下，且文件名爲 saga

4. 安裝axios api請求

1. 配置 request.js 請求模塊

eslint 配置

1. 安裝

   npm i eslint -D

2. 建立基礎 .eslintrc.js

   ./node_modules/.bin/eslint -–init

3. 安裝 babel-eslint

   添加 ES2015 的語言規範的支持

   npm i babel-eslint -D

   在 .eslintrc.js 配置中添加

   "parser":"babel-eslint"

4. 安裝依賴包

   npm i eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y -D
   
   	eslint-config-airbnb : 配置一些 eslint rules 的規範
   	eslint-plugin-import ：在使用 import 的時候，一些 rules 規範
   	eslint-plugin-react ： 一些 react 的 eslint 的 rules 規範
   	eslint-plugin-jsx-a11y： 一些 jsx 的 rules 規範
   複製代碼

5. 修改 .eslintrc.js 配置

   "extends":"airbnb",

6. 添加一下規則