Webpack配置-經常使用loader

• Webpack核心概念

  1. Entry（入口): 入口文件配置。指示 webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。默認是將src/index.js做爲入口文件
  2. Output（出口）： 出口配置，指定打包完成後的文件叫什麼名字放在哪一個文件夾內，默認在根目錄下生成一個 dist文件夾，默認的打包文件名稱是 main.js
  3. Loader（模塊轉換器）：loader 能夠用於對模塊的源代碼進行轉換，將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行處理。例如 css文件，能夠將css文件也當作是一個模塊，咱們是經過import來加載這個模塊的；在加載這個模塊時，webpack其實並不知道如何對其進行加載，咱們必須制定對應的loader來完成這個功能
  4. Plugins（插件）：Plugin能夠用於執行更加普遍的任務，好比打包優化、資源管理、環境變量注入等
  5. Module(模塊)： 開發者將程序分解成離散功能塊，並稱之爲模塊

• Webpack默認入口文件以及輸出文件夾、文件名

  上文提到配置入口及出口用的是 entry以及 output兩個參數，配置的方法也有兩種
  1. 在打包命令中添加參數（命令會比較長不易於讀）
     命令以下：
     webpack --entry ./src/main.js --output-path ./build --output-filename build.js
     首先能夠將 index.js文件改爲 main.js 沒有配置入口文件 配置完成以後打包成功
  2. 在配置文件中添加（推薦方式）
     webpack 默認會讀取 webpack.config.js文件中的配置，若是須要自定義文件命令中添加參數配置便可配置規則以下
     

• loader概念以及配置方式

  借用官方文檔的說明：

  loader 用於對模塊的源代碼進行轉換。loader 可使你在 import 或 "load(加載)" 模塊時預處理文件。所以，loader 相似於其餘構建工具中「任務(task)」，並提供了處理前端構建步驟的得力方式。loader 能夠將文件從不一樣的語言（如 TypeScript）轉換爲 JavaScript 或將內聯圖像轉換爲 data URL。loader 甚至容許你直接在 JavaScript 模塊中 import CSS 文件！

  配置方式：
  配置 module.rules是個數組而且容許咱們配置多個 loader具體配置以下：
  1. rules是個數據而後數組中是每一個 rule對象，對象中有多個屬性
  2. rule對象中的 test屬性，用於對 resource（資源）進行匹配的，一般會設置成正則表達式；
  3. rule對象中的 use屬性 對應的值是個數組
     1. loader必須有一個 loader屬性，對應的值是一個字符串；
     2. options可選的屬性，值是一個字符串或者對象，值會被傳入到loader中；
     備註： 若是沒有 options課直接寫成 ['css-loader']
  4. loader屬性，其實就是 use的縮寫，若是隻用到一個 loader而且沒有 option的時候可使用縮寫形式

• css-loader

  首先如要安裝 css-loader 對應命令以下:
  yarn add css-loader -D
  應爲僅僅是開發時須要因此只須要安裝到開發環境依賴 若是沒有使用 css-loader而後此時引入 css文件會報出以下錯誤： 由於此時 webpack並不知道如何對其進行加載，因此提示須要制定對應的loader此時須要配置 css-loader因此他的做用就是幫助 webpack讀取 css文件的 loader,安裝後配置方法有兩種
  1. 內聯方式：在每一個 import 語句中顯式指定 loader。
     import "css-loader!../css/index.css";
  2. 配置方式：在配置文件中配置 loader 配置完成以後 webpack就能加載 css文件了，打包也就成功了

• style-loader

  上文中說了 css-loader的用法，最終成功打包，可是運行時發現樣式並無生效以下圖： 緣由是 css-loader僅僅是對 css文件進行解析，並不會將解析後的 css插入到頁面中，因此若是要讓 css文件生效，就須要插入這個動做，此時就可使用 style-loader進行插入動做，首先第一步同上須要安裝 style-loader，一樣的僅僅只是開發使用，因此只須要安裝開發依賴，命令以下：
  yarn add style-loader -D 配置方式和 css-loader相同以下圖： 注意：由於loader的執行順序是從右向左（或者說從下到上，或者說從後到前的），因此咱們須要將style-loader寫到css-loader的前面；不然會報錯（應爲要先將 css加載出來以後再插入，若是沒加載出來直接插入確定是不知道插入什麼因此打包會報錯），
  結果以下圖:

• less-loader

  在咱們日常開發中常常會用到動態 css,因此就會有 less、sass等文件，可是這些預處理文件 webpack是不知道怎麼加載的，一樣的一些動態代碼的寫法瀏覽器也不支持的，因此就須要將 less文件先轉成 css文件而後按照 css文件的打包流程打包便可 這裏可使用 less轉換工具進行轉換安裝指令以下: yarn add less -D
  轉換命令以下：
  npx less ./src/style/style.less > ./src/style/style1.css
  
  發現此時就轉換成功，可是當 css多了之後每一個文件都這樣執行如下很影響效率，此時就可使用 less-loader,讓他來幫咱們轉換
  首先安裝 less-loader 命令以下：
  yarn add less-loader -D 而後在配置文件中配置
  

• postcs-loader

  • browserslist

    browserslist是在不一樣前端工具直接共用目標瀏覽器和 node版本的配置工具，使用到 browserslist的前端工具備：
    • Autoprefixer
    • Babel
    • postcss-preset-env
    • eslint-plugin-compat
    • stylelint-no-unsupported-browser-features
    • postcss-normalize
    • obsolete-webpack-plugin
    使用該工具的時候通常會寫一個相似與下面這種的配置文件： 條件查詢使用的是caniuse-lite的工具，這個工具的數據來自於caniuse的網站上；這些工具會根據咱們的配置來獲取相關的瀏覽器信息，以方便決定是否須要進行兼容性的支持，具體 browserslist編寫規則等能夠參考 github.com/browserslis…該網站，裏面有詳細的描述。 配置方式：

    1. 在package.json中配置

    2. 單獨的一個配置文件.browserslistrc文件；

       若是沒有配置 browserslist會有個默認的配置：

  • PostCSS工具

    PostCSS主要是一個使用 js來轉換樣式的工具，這個工具能夠幫助咱們進行一些 CSS的轉換和適配，好比自動添加瀏覽器前綴，css樣式重置；可是實現這些功能都須要相應的一些插件。
    • 使用方法：
      首先須要安裝 postcss工具以及命令工具 postcss-cli
    • 安裝命令
      yarn add postcss postcss-cli -D
    應爲該工具須要藉助一些插件來實現瀏覽器的兼容，因此具體的代碼實現下文說完 autoprefixer後來代碼實操

  • 插件autoprefixer

    就是postcss給代碼添加前綴的一個插件
    • 安裝命令
      yarn add autoprefixer -D
    • 使用方式
      npx postcss --use autoprefixer -o ./src/style/style-new.css ./src/style/style.css

  • postcss-loader

    postcss-loader的做用相似於 less-loader,正式開發中有不少 css文件咱們不可能每一個文件都想上文中那樣每一個都用指令轉換，因此此時 webpack中使用 postcss就能夠藉助 postcss-loader來處理
    • 安裝 postcss-loader
yarn add postcss-loader -D
    • 配置 postcss-loader
      1. package.json中配置
      2. postcss.config.js 或者 postcss.config.cjs 導出一個對象的 CommonJS 模塊（推薦）

  • postcss-preset-env

    通常的開發中若是使用了 postcss-loader通常都不會使用 autoprefixer插件而是直接使用 postcss-preset-env應爲其內置就有自動幫助咱們添加前綴同時它能夠幫助咱們將一些現代的CSS特性，轉成大多數瀏覽器認識的CSS，而且會根據目標瀏覽器或者運行時環境添加所需的polyfill

    • 安裝 postcss-preset-env
yarn add postcss-preset-env -D

    • 配置 同 autoprefixer的配置方式

    • 舉例 添加一個 HEXA的顏色值，若是僅僅是使用 autoprefixer插件效果如圖： 使用 postcss-preset-env插件： 會轉成瀏覽器都兼容的 rgba格式