Webpack 初識

Wepack 基本概念

爲什麼要使用 Webpack?

1. 現在跟多瀏覽器不支持 ed6、ed7、esnext 等更高級的語法，但是這些語法又比較好用，使用 webpack 可以幫我們把新語法轉換成 es5的語法；可以支持老瀏覽器；

---

代碼編譯工具

1. 模塊化開發
   它會把你寫的每一個 js 編譯成一個閉包；
   它可以把所有的文件當做模塊來處理
2. 打包編譯成 html css js等其他資源文件；

模塊化開發的好處

1. 方便維護
2. 保護源代碼

Webpack 中文網

https://www.webpackjs.com/

---

Webpack 起步

安裝

1. 命令行 cd 到項目文件夾

PS C:\Users\Administrator\Desktop\mi\test\練習14\webpack-demo>

2. 安裝命令行

> npm i -g webpack
> npm i -g webpack-cli
> npm i -g webpack-dev-server

# 說明：
# webpack 用來編譯生產的
# webpack-cli 命令行工具
# webpack-dev-server 幫你創建一個開發服務器 帶熱更新的功能

# 檢查安裝是否成功
> webpack -v
4.32.2

配置

1. 創建編譯配置文件 webpack.config.js
   配置文件是用來協助 webpack 知道編譯哪些文件，編譯成什麼樣子的文件；
   這個文件中的內容；（nodejs 模塊化中，暴露一個模塊的寫法；）

	module.exports = {
	    // ... webpack 的配置
	}

2. 在命令行執行 webpack 命令，會直接調用 webpack.config.js 這個文件

	> webpack

3. 配置選項
   1）entry：入口配置
   2）output：輸出目錄
   3）mode： 編譯模式（development 開發模式）（production 生產模式）

	// 引入 path模塊
	const path = require('path')
	
	module.exports = {
	    // 入口配置
	    entry: path.resolve('src', 'index.js'),
	
	    // 輸出目錄
	    output: {
	        path: path.resolve('dist'),
	        filename: 'app.js',
	    },
	    
	    // 編譯模式
	    mode: 'development'
	}

4. 在配置文件指定的輸出目錄 dist 下新建 index.html 文件，在這個html文件中引入輸出配置中指定的 js 文件；

	<script src="./app.js"></script>

5. 然後就可以在 src/index.js 裏寫js代碼，然後執行 webpack 命令編譯到 dirt/app.js之後，引用app.js文件了；

編譯非 js文件

由於webpack 自身只理解 JavaScript，當我們在 .js文件中引入了其他類型的文件，如 .css 文件，會報錯，這時就需要我們配置一下 loader 選項。
loader 同樣是 webpack.config-js 文件中的配置項；

1. 在 webpack.config.js 文件中新建 module 選項；用來解析模塊的配置；
   在 webpack 中，所有的文件都會被當做模塊來處理；
   不同的模塊需要不同的處理器來處理，處理器的概念叫 loader，即加載器；

	module: {
	    
	},

2. 定製加載器的處理規則
   一個正則表達式配一個加載器
   test 選項是正則表達式，如下：匹配所有的以 .css 結尾的文件，只要是以 .css 結束的文件，都用這裏這個加載器來處理；
   use 選項裏是加載器；

	module: {
	        rules: [
	            {
	                test: /\.css$/,
	                // 多個加載器用字符串數組，單個加載器用字符串；
	                use: ['style-loader', 'css-loader'],
	            },
	        ]
	},

處理 css 的加載器有：

• style-loader 樣式加載器，用於把編譯好的樣式 自動添加到 dom中；
• css-loader 用來編譯 css 的；

處理 less 的加載器有：

• style-loader 樣式加載器，用於把編譯好的樣式 自動添加到 dom中；
• css-loader 用來編譯 css 的；
• less-loader 用來編譯 less 的；

3. 安裝 loader
   loader 不是 webpack自帶的，需要單獨安裝；安裝到項目裏，不是全局安裝
   webpack 會自動在項目的 node_modules 目錄裏找那個模塊

	# 生成 package.json 和 package-lock.json 文件
	> npm init --yes
	
	# 安裝
	> npm i style-loader css-loader

webpack-dev-server 的使用

1. 安裝插件html-webpack-plugin
   這是個 webpack 的插件
   這個插件，允許你添加一個模板，然後他自動把編譯好的 js 和 css 添加到你的頁面裏；

	>  npm i html-webpack-plugin

2. 使用插件：
   在 webpack.config.js 配置文件中

	// [1] 導入 html-webpack-plugin 插件
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	
	module.exports = {
		
		// ...
	
	    // [2] 添加 html 模板模塊
	    plugins: [
	        new HtmlWebpackPlugin({
	            template: path.resolve('public', 'index.html');
	        })
	    ],
	
	    // [3] 配置開發服務器
	    devServer: {
	        // 端口號
	        port: '8088'
	    }
	
	    // ...
	}

3. 安裝 webpack-dev-server

	> npm i -g webpack-dev-server
	
	# 在本地安裝一下 webpack
	> npm i webpack

4. 啓動項目

	> webpack-dev-server

5. 訪問地址

webpack 初識就到此爲止；
webpack 中文網的文檔還是比較詳細的，後續學習可以看文檔的；