搭建 webpack、react 開發環境（二）

配置處理樣式文件

 

到目前爲止，整個工程的配置已經差很少了，對於 React 更多相關的配置將在後面繼續介紹，如今咱們先來對目前的工程進行優化。

前面咱們學習了搭建 webpack、react 開發的基礎環境，但它實現的功能還遠遠不夠，對於 webpack 的配置和 react 工程相關的基本依賴尚未實現，因此接下來咱們會繼續完成這些工做。

首先對於開發 web 應用天然少不了要寫一些樣式文件來使得頁面變得更加美觀，如今爲了提升開發的效率，一般會使用一些 CSS 的擴展語言來書寫樣式，如 Less、SCss 等。這裏我將會安裝和配置對 Less 語法的支持。

Less 是一門 CSS 預處理語言,它擴展了 CSS 語言,增長了變量、Mixin、函數等特性。Less 能夠運行在 Node 或瀏覽器端。

要在項目中使用它首先咱們須要安裝一些相關的依賴，首先咱們要使用 Less，天然須要先對它進行安裝，以後對於 Less 咱們須要將它編譯爲 CSS，因此須要安裝 less-loader，而後須要將 CSS 轉換爲 CommonJS，因此須要安裝 css-loader，最後須要從 JavaScript 字符串中建立 style 節點，因此須要安裝 style-loader，因此最後咱們須要安裝以下依賴：

$ yarn add less less-loader css-loader style-loader --dev

依賴安裝完成以後，還須要在配置文件中對其進行配置：

// webpack.base.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: 'style-loader' // creates style nodes from JS strings
            }, {
                loader: 'css-loader' // translates CSS into CommonJS
            }, {
                loader: 'less-loader' // compiles Less to CSS
            }]
        }]
    }
};

配置處理圖片文件

 

前端項目中除了 html、css、js，另外也須要處理一些圖片文件，webpack 打包圖片文件是經過 file-loader、url-loader 來處理的。

url-loader 能夠將指定大小及如下的圖片文件轉成 base64 寫入 JavaScript 中，避免額外請求圖片資源，若是超過指定大小再使用 file-loader 打包圖片文件。

如今咱們先來安裝相關的依賴：

$ yarn add url-loader file-loader --dev

安裝完成以後咱們須要對其進行配置：

// webpack.base.config.js
module.exports = {
    module: {
        rules: [{
            test: /\.(jpg|png|gif|svg|jpeg|woff|woff2|eot|ttf|otf|ico)$/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 1024,  // 指定上面所說的指定大小的標準，超過以後將會交給 file-loader 處理
                    // 配置 file-loader 的可選項
                    name: 'images/[name].[ext]'
                }
            }]
        }]
    }
}

配置支持 ESlint 語法檢測

 

周所周知，JavaScript 是一個動態的弱類型語言，在開發中比較容易出錯，致使出錯的緣由千奇百怪，有可能只是一時疏忽，致使拼寫錯誤，有多是手抖加了個符號等等，而要找出這些錯誤每每會花費大量的時間，爲了不相似這樣的事情但不只是如此，咱們須要一個工具來協助咱們的開發。

ESlint 是使用 Node.js 編寫的，其致力於提供一個插件化的 JavaScript 代碼檢測工具，咱們能夠默認使用它的規則，也能夠自定義檢測規則，如今咱們就來安裝和使用它。

首先使用 ESlint 須要安裝 eslint和eslint-loader，另外因爲項目中須要使用到 ES2015 的語言規範，所以須要安裝 babel-eslint，將會在 .eslintrc.js 中使用它，它們的安裝方式與前面相同：

$ yarn add eslint eslint-loader babel-eslint --dev

因爲 React 使用了一些特定的 ESLint 沒法識別的 JSX 語法，因此咱們還須要安裝 eslint-plugin-react來支持 React 中特定的 JSX 語法。

$ yarn add eslint-plugin-react --dev

而後咱們如今先在公共的 webpack 配置文件中進行配置：

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: [
                "babel-loader",
                "eslint-loader",
            ],
        }, ],
    },
    // ...
}

由於以前咱們已經對 JavaScript 文件進行了配置，因此對比起來，咱們只須要在對 JavaScript 文件處理的 use 屬性按照上面改成數組便可，loader 會至下而上的執行。

對於 ESlint的更多配置，咱們既能夠在 webpack 配置文件中指定檢測規則，也能夠遵循最佳實踐在一個專門的文件中指定檢測規則。爲了保證公共配置文件的整潔和可讀性，咱們儘可能採用後面的方式。

如今咱們去項目的的根目錄下建立兩個文件：.eslintignore 和 .eslintrc.js，前者指定了不須要檢查的文件或目錄，後者制定了 ESLint 的詳細配置信息，如今就來簡單的完成這兩項工做。

// .eslintignore
/config

一般來設置這些規則是一個麻煩的事情，並且並不能保證本身設計的合理性，好在若是咱們不想每次都指定這些規則，如今已經有不少符合最佳實踐的規則。其中之一就是 Airbnb Style Guide，此外 Airbnb 還開源了他們本身的 ESlint 配置。

接下來來實現使用 Airbnb 的 ESLint 配置，首先仍是先安裝相關的依賴項：

# eslint-config-airbnb: 配置一些 eslint rules 的規範
# eslint-plugin-import：使用 import 的時候的一些 rules 規範
# eslint-plugin-jsx-a11y：jsx 的一些 rules 規範
$ yarn add eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y --dev

對它們的使用，咱們須要在 .eslintrc.js 文件中寫入對應的字段，結合前面的講解，如今來對 ESlint 進行配置：

//- .eslintrc.js
module.exports = {
    // 解析器用於解析代碼
    parser: 'babel-eslint',
    // 使用的擴展庫
    extends: ['airbnb'],
    // 環境，能夠設置環來作區別判斷
    env: {
        browser: true,
        node: true,
        es6: true,
        commonjs: true
    },
    // 第三方插件
    plugins: [
        'react',
        'jsx-a11y'
    ],
    // 解析器配置
    parserOptions: {
        ecmaFeatures: {
            jsx: true
        }
    },
    // 規則配置
    rules: {
        // enable additional rules
        'no-console': 2 // 禁止使用consol
    }
}

如今每次咱們進行編譯時，ESlint 就會對指定的代碼進行檢查，不符合規範時將會在 console 中報錯。

若是項目使用了 Git，咱們還能夠經過使用 pre-commit 鉤子在每次提交前檢測代碼，若是檢測失敗則禁止提交。

首先咱們須要安裝

$ yarn add pre-commit --dev

而後在 package.json 文件中的 script 字段中配置 eslint-commit 命令：

"scripts": {
    "eslint-commit": "eslint --ext .js src"
}

最後在 package.json 中配置在提交前 pre-commit 須要運行的命令：

"pre-commit": [
    "eslint-commit"
]

完成以後，在每次提交以前，都會運行 eslint-commit 命令進行檢測，若是檢測到有違反代碼規則的狀況，則會致使提交失敗。

優化 webpack 配置

 

• 減小打包的時候重複代碼。

  Babel 對諸如 _extend 之類的常見函數使用很是小的助手。默認狀況下，這將被添加到每一個須要它的文件中，因此會產生許多重複代碼。

  正由於上面的缺陷，因此咱們須要 Babel 運行時做爲一個單獨的模塊以免重複，要實現這個功能咱們須要使用到 babel-plugin-transform-runtime，另外同時還須要依賴 babel-runtime，因此接下來就對它們進行安裝：

  $ yarn add @babel/plugin-transform-runtime @babel/runtime --dev

  而後在 .babelrc 文件中進行配置：

  {
      "presets": [
          "@babel/preset-env",
          "@babel/preset-react"
      ],
      "plugins": ["@babel/plugin-transform-runtime"]
  }

• 自動加 CSS3 前綴。

  由於並非全部的瀏覽器對 CSS3 的支持都那麼好，因此須要針對一些瀏覽器添加相應的前綴，而在全部的地方本身添加會顯得麻煩，有時還會忘記致使樣式錯亂，因此咱們可讓 webpack 來自動完成。

  想要 webpack 幫忙自動加上「-webkit-」之類的 CSS 前綴，咱們須要用到 postcss-loader 和它的插件 autoprefixer：

  $ yarn add postcss-loader autoprefixer --dev

  而後在公共配置文件指定使用：

  module.exports = {
      module: {
          rules: [{
              test: /\.less$/,
              use: [{
                  loader: 'style-loader' // creates style nodes from JS strings
              }, {
                  loader: 'css-loader' // translates CSS into CommonJS
              }, {
                  loader: 'postcss-loader', // Automatically add browser prefix
              }, {
                  loader: 'less-loader' // compiles Less to CSS
              }]
          }, ]
      }
  }

  最後在項目的根目錄下添加 .postcssrc.js 文件對其進行配置：

  module.exports = { 
      plugins: { 
          'autoprefixer': {browsers: 'last 5 version'} 
      } 
  }

• 分離 CSS 並消除冗餘的 css代碼。

  咱們知道 webpack 的理念就是把全部的東西都打包到 JavaScript 文件中，包括 CSS、圖片等等，這樣能夠減小http請求，但劣勢也很明顯，隨着項目愈來愈大，JavaScript 文件會愈來愈大，同時爲了對項目進行更好的管理，咱們就須要對 CSS 文件進行分離。

  首先咱們須要安裝 mini-css-extract-plugin：

  $ yarn add mini-css-extract-plugin --dev

  而後在生產配置文件中進行配置，咱們在這裏先不設置，放在下面一塊兒進行配置。

  另外平時咱們去開發一些項目的時候，會引入一些框架：好比 bootstrap，引入相關框架後，文件會變得很大，而其中的代碼咱們實際用到的卻不多，因此這時候咱們須要想辦法優化這些代碼，把這些冗餘代碼去掉。

  在 webpack 中咱們可使用 purifycss-webpack 達到該目的，首先咱們須要安裝相關依賴：

  $ yarn add purifycss-webpack glob purify-css --dev

  而後在生產模式下的配置文件中引入 purifycss-webpack 並在 plugins 中做出相應，連同下面須要的設置，最後生產模式下的配置文件以下所示：

  const path = require('path');
  // 引入公共配置
  const webpackBaseConfig = require('./webpack.base.config');
  // 合併配置的插件
  const webpackMerge = require('webpack-merge');
  // 用於分離 CSS
  const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  // 刪除冗餘 CSS
  const glob = require('glob');
  const PurifyCssWebpack = require('purifycss-webpack');
  
  module.exports = webpackMerge(webpackBaseConfig, {
      // 指定模式
      mode: 'production',
      // 加載器
      module: {
          rules: [{
              test: /\.less$/,
              use: [{
                  loader: MiniCssExtractPlugin.loader // creates style nodes from JS strings
              }, {
                  loader: 'css-loader' // translates CSS into CommonJS
              }, {
                  loader: 'postcss-loader', // Automatically add browser prefix
              }, {
                  loader: 'less-loader' // compiles Less to CSS
              }]
          }]
      },
      // 插件配置
      plugins: [
          new PurifyCssWebpack({
              paths: glob.sync(path.join(__dirname, '../*.html'))
          }),
          new MiniCssExtractPlugin({
              // Options similar to the same options in webpackOptions.output
              // both options are optional
              filename: "css/[name].css",
              // chunkFilename: "[id].css"
          })
      ]
  });

好了，到這裏本篇就算結束啦，這裏更多的是介紹了 webpack 方面的一些配置和插件的使用，以及一些能夠優化的地方，若是你想要知道最初的搭建步驟，你能夠點擊 搭建 webpack、react 開發環境（一） 來繼續查看。若是你須要查看 React 相關插件和庫的安裝能夠點擊 搭建 webpack、react 開發環境（三） 來繼續查看。