webpack在當前前端工程師常用的一個工程化打包工具，官方對webpack的介紹是：webpack本質上 是一個現代 JavaScript 應用程序的靜態模塊打包器(static module bundler)。在 webpack 處理應用程序時，它會在內部創建一個依賴圖(dependency graph)，用於映射到項目需要的每個模塊，然後將所有這些依賴生成到一個或多個bundle。
官網地址：https://webpack.js.org/，（也將其切換成中文）。
webpack 是一個 高度可配置的打包工具，通過配置，能夠很好的滿足需求。在學習如果配置webpack之前，需要先了解一個webpack的四個核心概念。
四大核心概念：
-
入口(entry)
-
輸出(output)
-
loader
-
插件(plugins)
入口(entry)
打包的入口：所有的依賴模塊都可以通過這個入口直接或間接地找到，也就是構建webpack內部依賴的起點；
單個或多個：（1）多頁面應用，存在多個入口，（2）單頁面應用可能也存在多個入口，打包入口不代表文件執行的入口，例如我們可以將業務代碼和框架代碼分別打包。
基本用法：
在webpack.config.js中配置
module.exports = {
entry: './path/to/my/entry/file.js'
};
其實上述是下面這種對象語法形式的簡寫：
module.exports = {
entry: {
main: './path/to/my/entry/file.js'
}
};
對象語法形式看起來繁瑣一點，但是可以定義每一個入口的key，每一個key相當於一個chunk，這有利於擴展，例如如果是一個多頁面應用，有多個入口的話，直接在上述的對象語法形式上擴展即可，：
module.exports = {
entry: {
main: './path/to/my/entry/file.js',
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
我們也可以往一個入口中傳入一個數組，即相當於把數組中的多個文件打包到一個chunk中：
module.exports = {
entry: {
main: ['file1.js','file2.js']
}
};
輸出(output)
output可定值打包後文件輸出的文件名以及輸出路徑，所以output爲一個對象，包括兩點：
- filename ：用於表示輸出文件的文件名，
- path：目標輸出目錄 的絕對路徑。
對於單個入口文件，output可以簡單配置如下：
module.exports = {
output: {
filename: 'bundle.js',
path: '/path/to/my/output'
}
};
以上配置會將打包後的 bundle.js 文件輸出到 /path/to/my/output 目錄中。
如果有多個入口的話，可以採用佔位符來確保每個文件具有唯一的名稱：
module.exports = {
entry: {
main: './path/to/my/entry/file.js',
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
};
以上配置會在 /dist 目錄下分別生成：main.js、pageOne.js、pageTwo.js、pageThree.js。
loader
loader 用於對模塊的源代碼以及文件進行轉換，轉換成瀏覽器可直接執行的模塊。
常用loader：
- 編譯相關：
babel-loader、ts-loader - 樣式相關：
style-loader、css-loader、less-loader、postcss-loader - 文件相關：
file-loader、url-loader
由於loader解析模塊時， 將從模塊路徑（通常將模塊路徑認爲是 npm install, node_modules）解析，因此我們使用前需要先安裝相對應的 loader，以css-loader爲例：
npm install --save-dev style-loader
npm install --save-dev css-loader
使用 loader 的方式有三種：配置、內聯和CLI，常用的是通過配置來使用：
module: {
rules: [
{
test: /\.css$/,
use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ]
}
]
}
（插件）Plugins
插件的功能很強大，可以用於解決 loader 無法實現的其他事，例如：
- 參與打包整個過程
- 打包優化和壓縮
- 配置編譯時的變量
插件的使用方法與loader類似，也需要先安裝，此處以html-webpack-plugin爲例：
npm install --save-dev html-webpack-plugin
然後在webpack.config.js中配置：
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//插件
plugins: [
new HtmlWebpackPlugin({
title: 'webpack demo1',
template: path.resolve(TEMPLATES_PATH, 'template.html'),
chunks: ['app'],
})
]
}
先通過require將插件引入進來，然後，在配置對象中新增一個plugins屬性，plugins的值是一個數組，數組中可以通過new 方式使用插件，數組中可以有多個插件，且對每一個插件分別定義options。
html-webpack-plugin是html模板插件，可以根據你的提供的html模板生成你需要的html文件，因此我在項目中定義了一個templates文件夾用於放html模板，template.html模板文件內容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<h1>hello webpack!</h1>
</body>
</html>
最後會在build文件夾下生成一個index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack demo1</title>
</head>
<body>
<h1>hello webpack!</h1>
<script type="text/javascript" src="app.js"></script></body>
</html>
可以發現，該插件會自動將你chunks中的js文件生成到html文件的<script> 標籤內，如果你有任何CSS assets 在webpack的輸出中（例如， 利用ExtractTextPlugin提取CSS）， 那麼這些將被包含在HTML head中的<link>標籤內。
其他插件的功能及使用方法可以在此處查看：https://webpack.docschina.org/plugins/html-webpack-plugin/。