1 安裝

 npm install -D webpack webpack-cli

安裝在開發環境中，并且不推薦全局安裝（版本問題）
webpack-cli : 提供 webpack 命令、工具，類似 create-react-app

webpack : webpack 代碼，類似 react

2 查看版本

./node_modules/.bin/webpack

// 查看版本
./node_modules/.bin/webpack -v

也可以編輯 package.json 的 scripts 來簡化輸入

// package.json
{
	...,
	"scripts": {
		"start": "webpack"	// scripts 中可以定位到 ./node_modules/.bin/ 目錄下
	}
}

scripts 中使用 test、start、restart、stop 命名的時候，可以在調用的時候省略 run，即直接 npm start

當然，還可以使用更加方便的方式：

npx webpack

通過 npx 也可以幫助我們定位命令到 ./node_modules/.bin/ 目錄下

注：npm5.2+ 增加，如果沒有，可以使用 npm i -g npx 來安裝

3 打包模塊

3-1、入口文件

入口文件就是我們項目中加載的第一個文件，比如上面的 main.js 文件，其它文件都是通過 import 等方式引入的，webpack 會從我們指定的入口文件開始分析所有需要依賴的文件，然后把打包成一個完整文件。

3-2、打包命令

webpack ./js/index.js

上面命令會使用 webpack 默認的一些配置對模塊文件進行打包，并把打包后的文件輸出到默認創建的 ./dist 目錄下，打包后的文件名稱默認為 main.js。

模塊文件打包以后，就可以在不支持 es6 模塊語法的瀏覽器環境下引入使用了。

打包文件分析

• 把分散的模塊文件打包到一個文件中，不需要外部引入了
• 內置了一個小型模塊加載器(類似 requireJS)，實現了打包后的代碼隔離與引用

3-3 打包配置

推薦創建一個 webpack.config.js 的配置文件來實現更方便和強大的功能。
webpack 命令在運行的時候，默認會讀取運行命令所在的目錄下的 webpack.config.js 文件，通常我們會在項目的根目錄下運行命令和創建配置文件。

我們也可以通過 —config 選項來指定配置文件路徑：

webpack --config ./configs/my_webpack.config.js

通常情況下，我們的項目目錄大致如下：

/
-- /dist - 項目打包后存放目錄
-- /node_modules - 第三方模塊
-- /src
------ css/
------ images/
------ js/
------ index.js
-- webpack.config.js
-- package.json

配置文件

module.exports = {
  ...	//配置項
}

4 核心配置

4-1 mode 模式

"production" | "development" | "none"
不同的模式會對 webpack 打包的時候進行一些對應的優化配置。

module.exports = {
  mode: 'production'
}

4-2 entry 指定打包?口?文件

有三種不同的形式：string | object | array

一對一：一個入口、一個打包文件

module.exports = {
  entry: './src/index.js'
}

多對一：多個入口、一個打包文件

module.exports = {
  entry: [
    './src/index1.js',
    './src/index2.js',
  ]
}

多對多：多個入口、多打包文件

module.exports = {
  entry: {
    'index1': "./src/index1.js",
    'index2': "./src/index2.js"
  }
}

4-3 output 打包后的文件位置

• 可以指定一個固定的文件名稱，如果是多入口多出口(entry 為對象)，則不能使用單文件出口，需要使用下面的方式
• 通過 webpack 內置的變量占位符：[name]

module.exports = {
  ...,
  output: {
  	path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
		filename: "[name].js"
	}
}

5 進階配置

在 webpack 中，有一個很重要的特性：模塊不僅僅只是 js 的文件，webpack 可以把任意文件數據作為模塊進行處理，包括：非 js 文本、css、圖片等等

import txt from './a.txt';
console.log(txt);

但是 webpack 默認情況下只能處理 js 模塊，如果需要處理其它類型的模塊，則需要使用它提供的一些其它功能

簡要流程

• loaders：webpack 中灰常核心的內容之一，前面我們說的非 js 類型的模塊處理就靠它了。webpack 可以使用 loader 來預處理文件。這允許你打包除 JavaScript 之外的任何靜態資源。你可以使用 Node.js 來很簡單地編寫自己的 loader。
• plugins：webpack 中另外一個核心的內容，它主要是擴展 webpack 本身的一些功能。插件可以運行在 webpack 的不同階段（鉤子 / 生命周期）。

6 Loaders

Loaders文檔

module.exports = {
  ...,
  module: {
  	rules:[
  		{
  			test:/\.xxx$/,
       	use:{
        	loader: 'xxx-load'
      	}
			}
  	]
	}
}

當 webpack 碰到不識別的模塊的時候，webpack 會在配置的 module 中進行該文件解析規則的查找

• rules 就是我們為不同類型的文件定義的解析規則對應的 loader，它是一個數組
• 每一種類型規則通過 test 選項來定義，通過正則進行匹配，通常我們會通過正則的方式來匹配文件后綴類型
• use 針對匹配到文件類型，調用對應的 loader 進行處理

6-1 raw-loader

在 webpack 中通過 import 方式導入文件內容，loader 并不是 webpack 內置的，所以首先要安裝

npm install --save-dev raw-loader

然后在 webpack.config.js 中進行配置

module.exports = {
  ...,
  module: {
      rules: [
      {
        test: /\.(txt|md)$/,
        use: 'raw-loader'
    	}
    ]
	}
}

6-2 file-loader

把識別出的資源模塊，移動到指定的輸出?目錄，并且返回這個資源在輸出目錄的地址(字符串)

npm install --save-dev file-loader

rules: [
  ...,
	{
		test: /\.(png|jpe?g|gif)$/,
    use: {
      loader: "file-loader",
      options: {
        // placeholder 占位符 [name] 源資源模塊的名稱
        // [ext] 源資源模塊的后綴
        name: "[name]_[hash].[ext]",
        //打包后的存放位置
        outputPath: "./images"
        // 打包后文件的 url
        publicPath: './images',
      }
    }
	}
]

占位符https://www.webpackjs.com/loaders/file-loader/#placeholders

6-3 url-loader

可以處理理 file-loader 所有的事情，但是遇到圖片格式的模塊，可以選擇性的把圖片轉成 base64 格式的字符串，并打包到 js 中，對?體積的圖片?較合適，?圖?不合適。

npm install --save-dev url-loader

rules: [
  ...,
	{
		test: /\.(png|jpe?g|gif)$/,
    use: {
      loader: "url-loader",
      options: {
        // placeholder 占位符 [name] 源資源模塊的名稱
        // [ext] 源資源模塊的后綴
        name: "[name]_[hash].[ext]",
        //打包后的存放位置
        outputPath: "./images"
        // 打包后文件的 url
        publicPath: './images',
        // 小于 100 字節轉成 base64 格式
        limit: 100
      }
    }
	}
]

6-4、css-loader

分析 css 模塊之間的關系，并合成?個 css

npm install --save-dev css-loader

rules: [
  ...,
	{
		test: /\.css$/,
    use: {
      loader: "css-loader",
      options: {
  			// 啟用/禁用 url() 處理
  			url: true,
  			// 啟用/禁用 @import 處理
  			import: true,
        // 啟用/禁用 Sourcemap
        sourceMap: false
      }
    }
	}
]

6-5、style-loader

把 css-loader 生成的內容，用 style 標簽掛載到?面的 head 中

npm install --save-dev style-loader

rules: [
  ...,
	{
		test: /\.css$/,
    use: ["style-loader", "css-loader"]
	}
]

同一個任務的 loader 可以同時掛載多個，處理順序為：從右到左，也就是先通過 css-loader 處理，然后把處理后的 css 字符串交給 style-loader 進行處理

rules: [
  ...,
	{
		test: /\.css$/,
    use: [
  		{
  			loader: 'style-loader',
  			options: {}
  		},
      'css-loader'
		]
	}
]