前端模塊化概述

提到前端的模塊化，很多朋友第一時間想到的就是 AMD ，CMD， CommonJS 以及 ES Modules這些，
不過，這些都是js檔案的模塊化，而一個前端專案并不是只有js檔案，
一個前端專案中，除了js檔案 還有html，css，圖片字體等等各種檔案，既然是前端模塊化，那么所有的前端資源都需要模塊化，

總結一下我們前端專案模塊化，需要支持以下幾個功能:

1. ES新特性代碼編譯
2. 模塊化JS打包
3. 支持不同型別的資源進行模塊化打包

模塊化打包工具

前端的模塊化打包工具，常見的有 webpack , rollup , parcel

• webpack
  它的核心特性就能很好的滿足上面我們的需求，它為處理資源管理和分割代碼而生，可以包含任何型別的檔案，靈活，插件多，

• rollup
  用標準化的格式（es6）來寫代碼，通過減少死代碼盡可能地縮小包體積，

• parcel
  超快的打包速度，多執行緒在多核上并發編譯，不用任何配置，

打包工具解決的是前端整體的模塊化，并不單指 JavaScript 模塊化

WebPack

快速上手

webpack 依賴node環境運行，首先保證已經安裝了node
然后在專案中安裝對應的包 webpack 和 webpack-cli
安裝包可以使用npm 或者 yarn
具體區別體現在運行上：

• 如果是npm安裝 webpack 和 webpack-cli ，安裝成功后想要運行，需要在package.json的 script 里加入對應的執行腳本
  npm install webpack webpack-cli -D
• 如果是通過yarn安裝 則不需要再手動添加
  yarn add webpack webpack-cli --dev

默認的約定
直接執行webpack 會默認把當前專案中 src 目錄下的 index.js 打包到 dist 目錄下 生成 main.js
并且webpack 默認自帶處理ES Moudules語法的功能

webpack 組態檔

設定打包的入口和出口

上面我們說到，默認的打包目錄，這個目錄是可以通過專案根目錄中的 webpack.config.js 這個檔案進行修改的，

module.exports = { 
	entry: './src/main.js',
	output: { 
		filename: 'bundle.js',
		path: path.join( __dirname )
	 }	
}

• entry 設定打包的檔案入口
• output 設定打包到哪去， filename 是打包后生成的檔案名，path是存放的路徑，

三種打包模式

在我們執行webpack打包命令的時候 會發現有一行警告提示:

WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value.
Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.

意思就是說，讓我們去設定打包的模式，webpack的打包模式有三種:

1. none 無
2. development 開發環境模式
3. production 生長環境模式

設定打包模式可以通過兩種方式：

• 通過cli命令 比如 webpack --mode development
• 還可以在 webpack.config.js 組態檔中設定

	module.exports = {
	    mode: 'development',
	    entry: './src/index.js',
	    output: {
	        filename: 'bundle.js',
	        path: path.join(__dirname, 'dist/')
	    }
	}

資源模塊加載

如果要想讓webpack處理資源模塊的打包，那么各種檔案對應的loader就必不可少，Loader是webpack的核心特性，
借助于Loader就可以加載任何型別的資源，
加載器大致可以分成三類：

1. 編譯轉化類 比如 css-loader
2. 檔案操作類 比如 file-loader
3. 代碼檢查類 比如 eslint-loader

樣式資源加載

如果我們現在為專案中添加了css檔案，也想通過webpack進行打包

那么此時運行webpack打包就會出現報錯

ERROR in ./src/style/index.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

這是報錯中的 You may need an appropriate loader to handle this file type 這句 意思就是說 你可能需要一個loader來處理這種型別的檔案，

比如上面的 css 檔案 我們可以借助于 style-loader 和 css-loader 其中 style-loader的作用是把樣式添加到dom中， css-loader是用于把css打包到bundle.js中 ( 其實就是讀取樣式檔案內容 轉化字串記錄在陣列或者物件中 )

	module.exports = {
	    mode: 'none',
	    entry: './src/index.js',
	    output: {
	        filename: 'bundle.js',
	        path: path.join(__dirname, 'dist/')
	    },
	    module: {
	        rules: [
	            {
	                test: /.css$/,
	                use: ['style-loader', 'css-loader']
	            }
	        ]
	    }
	}

在webpack.config.js 中添加module屬性 在rules陣列里，每一個成員對應了一種需要通過loader處理的檔案型別，
test用于匹配對應后綴名的檔案， use 表示要使用的loader 這里loader的使用順序是不能亂寫的 要遵循從后往前呼叫的原則，

webpack不僅僅是可以讓我們在js中引入css代碼，它建議我們引入任何型別，我們當前代碼需要的資源檔案

真正需要這些資源的不是應用，而是我們當前撰寫的代碼，

檔案資源加載器

如果是一些圖片資源在js中匯入，webpack的處理原理如下：

其實就是把對應檔案復制到了打包結果目錄中，同時把該檔案的路徑匯入到了bundle.js中，

我們使用的Loader是 file-loader, 打包后的圖片檔案會默認以網站根目錄的路徑進行匯入，如果需要指定檔案夾需要在output中配置publicpath

	import icon from './assets/icon.png'
	let img = new Image()
	img.src = icon
	document.body.append(img)

	module.exports = {
	    mode: 'none',
	    entry: './src/index.js',
	    output: {
	        filename: 'bundle.js',
	        path: path.join(__dirname, 'dist/'),
	        publicPath: 'dist/'
	    },
	    module: {
	        rules: [
	            {
	                test: /.css$/,
	                use: ['style-loader', 'css-loader']
	            },
	            {
	                test: /.png$/,
	                use: ['file-loader']
	            }
	        ]
	    }
	}

URL 加載器

這里的url 加載器 指的就是 url-loader, 這個loader的作用可以把資源檔案轉化為Data URL， 一旦檔案轉為data url之后 dist目錄中就不會復制檔案了，
我們可以通過一些引數來設定一個值，讓超過這個值大小的檔案 依然以file-loader處理 ，小于這個值的檔案轉為data url
要想使用 url-loader 我們需要先安裝file-loader

	module.exports = {
	  mode: 'none',
	  entry: './src/main.js',
	  output: {
	    filename: 'bundle.js',
	    path: path.join(__dirname, 'dist'),
	    publicPath: 'dist/'
	  },
	  module: {
	    rules: [
	      {
	        test: /.css$/,
	        use: [
	          'style-loader',
	          'css-loader'
	        ]
	      },
	      {
	        test: /.png$/,
	        use: {
	          loader: 'url-loader',
	          options: {
	            limit: 10 * 1024 // 10 KB 超過10kb的就還是用file-loader 復制檔案 引入路徑
	          }
	        }
	      }
	    ]
	  }
	}

babel-loader 處理新特性

webpack 默認只能處理模塊化的語法，因為它本身就是為了實作模塊打包的，但是它并不支持所有的新特性，所以我們需要借助于babel-loader 來處理js代碼中的新特性
需要安裝 三個包

"@babel/core","@babel/preset-env", "babel-loader"

      {
        test: /.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }

Webpack 加載資源的方式

• 遵循 ES Modules 標準的 import 宣告
• 遵循 CommonJS 標準的 require 函式
• 遵循 AMD 標準的 define 函式和 require 函式
• 所有樣式代碼中的 @import 指令和 url 函式
• HTML 代碼中圖片標簽的 src 屬性

html加載器，處理標簽內資源參考

處理html檔案中的src屬性 或者 a 標簽的href屬性 ，需要借助于 html-loader

      {
        test: /.html$/,
        use: {
          loader: 'html-loader',
          options: {
            attrs: ['img:src', 'a:href'] // 表示要處理的src 和 href
          }
        }
      }

撰寫一個轉化md為html的loader

Loader 負責資源檔案從輸入到輸出的轉換，webpack要求輸出的必須要是js的代碼，我們可以對于同一個資源依次使用多個 Loader 處理

loader代碼

const marked = require('marked')
// source 接收所有的匹配到的資源內容
module.exports = source => {
    return marked(source)
}

webpack.config.js 代碼

            {
                test: /.md$/,
                use: [
                    'html-loader',
                    './src/loader/md_loader.js'
                ]
            }

匯入md的代碼

import './style/index.css'
import noteStr from './note.md'
const noteDiv = document.createElement('div')
noteDiv.innerHTML = noteStr
document.body.append(noteDiv)