webpack入門介紹及簡單配置
webpack在當前前端工程師常用的一個工程化打包工具，官方對webpack的介紹是：webpack本質上 是一個現代 JavaScript 應用程式的靜態模組打包器(static module bundler)。在 webpack 處理應用程式時，它會在內部建立一個依賴圖(dependency graph)，用於對映到專案需要的每個模組，然後將所有這些依賴生成到一個或多個bundle。
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>標籤內。