1、什麼是webpack?

首先是webpack對自己闡述：本質上，webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。 本人的理解：webpack說白了就是一款靜態資源打包工具，運用模組化的理念對程式進行打包編譯，並且這樣的打包是可以高度自定義，使用者可以通過配置在打包的過程中對專案資源作各種處理，其目的是更有利於瀏覽器執行處理。

2、webpack的安裝

Wabpack的安裝部分往往容易被人忽略但其實這也是相當重要的一部分。 首先webpack有全域性安裝也有區域性安裝 全域性安裝 npm i webpack -g 全域性安裝會把webpack安裝在某個全域性環境下，全域性安裝在命令列中的任何地方都是可以直接呼叫的。 區域性安裝 npm i webpack npm i webpack --save npm i webpack --save-dev –save：將儲存配置資訊到pacjage.json的dependencies節點中。 –save-dev：將儲存配置資訊到pacjage.json的devDependencies節點中。 dependencies：執行時的依賴，釋出後，即生產環境下還需要用的模組 devDependencies：開發時的依賴。裡面的模組是開發時用的，釋出時用不到它。 webpack安裝注意事項 由於webpack現版本已經更新到webpack4了，當安裝最新版本時有可能會出現一些問題 在webpack3中，webpack本身和它的CLI是在同一個包中的，但是在第4版中，他們已經將兩者分開來了，這樣會導致原來的命令用不了的情況，而這時命令列會提示你安裝webpack-cli，安裝上webpack-cli就行了。 提示如下：

3、webpack的核心

入口（entry）: entry會告訴webpack,它應該從哪裡入手處理你的專案，入口檔案裡應當包含你專案的各種依賴關係，只有這樣webpack才能順藤摸瓜分析清楚你專案的結構，當然入口檔案可以是一個也可以是多個，只有一個入口檔案或者是使用陣列傳入幾個入口檔案，在沒有使用一些抽離外掛的情況下，webpack會一股腦地把所有的依賴檔案（包括css）打包成一個js檔案，而使用物件傳入多入口檔案的情況下webpack則會根據入口檔案數量打包出多個js檔案。 入口配置項:

輸出（output）: 輸出指的就是webpack打包出來的檔案了，在輸出裡可以配置檔案的命名以及輸出路徑 filename可選變數：

載入器（loader）:webpack本身只會處理js檔案，而一個專案中往往會有各種不同型別的檔案，這些不同型別的檔案想要讓webpack來識別就必須使用loader，並配置loader，以此來告訴weback通過怎樣的規則去識別處理非js檔案。當然了，js檔案也可以通過loader來處理，webpack社群也會有一些處理js的外掛，如babel-loader，它可以將js的一些ES6的語法轉換成大多數瀏覽器可以識別執行的語法。 外掛（plugins）：webpack之所以強大，很大一部分原因就是它擁有數量極多功能極豐富的外掛，通過這些外掛webpack幾乎無所不能。

4、例項配置

前面說了這麼多，來個實際操作吧 webpack.config.js.

// webpack.config.js
var webpack = require('webpack')
path = require('path')
ExtractTextPlugin = require("extract-text-webpack-plugin")
HtmlWebpackPlugin = require('html-webpack-plugin')
CopyWebpackPlugin = require('copy-webpack-plugin')


module.exports = {
	mode: 'development',
	devtool: 'inline-source-map',
	context: __dirname,
	// 入口檔案
	entry: {
		app: './src/js/index.js' 
	},
	// 輸出
	output: {
		path: path.resolve(__dirname, 'dist'),
		filename: 'js/[name]-[hash].js',
	},
	// 模組
	module: {
		rules: [
			// 處理圖片檔案loader配置
			{
				test: /.(jpg|png|gif|svg)$/,
				use: [
					{
						loader: 'file-loader',
						options: {
							name: 'images/[name].[hash:7].[ext]',
							publicPath: '../',
							outputPath: '/'
						}
					}
				]
			},
			// CSS檔案處理，使用了抽離外掛
			{
				test: /\.css$/,
				use: ExtractTextPlugin.extract(['css-loader', 'postcss-loader'])
			},
		]
	},
	plugins: [
		// 生成html檔案，並把打包出來的資源插入html,使用預先編寫好的index.html作為模板
		new HtmlWebpackPlugin({
			filename: 'index.html',
			template: './src/index.html'
		}),
		//抽離出來的CSS輸出配置
		new ExtractTextPlugin('css/[name].[hash:8].css'),
		//對於字型檔案，本人使用直接copy過去的外掛
		new CopyWebpackPlugin([
			{
				from: './src/iconfont',
				to: 'iconfont'
			}
		])
	],
	resolve: {
		alias: {
			'old-module': 'new-module'
		}
	},
	// devServer配置
	devServer: {
		https: false,
		host: 'localhost',
		port: 8080,
		contentBase: path.resolve(__dirname, ''),
		stats: "errors-only",
		index: './src/index.html',
		open: true,
		openPage: './src/index.html',
		overlay: {
			errors: true,
			warnings: true
		},
	}
}

原始檔結構 生成dist結構