前言
我以官方的文件來介紹webpack設定檔，希望這種方式可以讓剛接觸webpack深入淺出的明白webpack設定檔的意義和目的。
設定檔介紹
經過第一堂的介紹，我們不可能每次都使用指令的方式來打包JS檔，如果當功能複雜時或是特定的需求時，是很難用使用指令完成開發任務的，所以webpack提供設定檔(預設檔名:webpack.config.js)的方式可以讓開發者方便進行編譯
設定概念
- Entry (進入文件)
首先webpack在打包時會先建立你應用程式所有使用到其他模組相依關聯的圖形，但是需要先指定圖形的進入點(entry point)，這個進入點的作用是告訴webpack從哪裡開始並且告訴他如何打包，你把進入點想成一個contextual root or the first file to kick off your app[官方翻譯].
範例1.
設定檔: webpack.config.js (webpack預設)
module.exports = {
entry: './app.js'
};
語法說明: entry為設定編譯的進入文件
- Output (目的檔)
當你打包JS文件時，需要告訴webpack最後產出的檔案，所以這個參數output如何用甚麼方式產出目的檔，output.path和output.filename屬性是告訴如何打包後的路徑和名稱
範例2.
設定檔: webpack.config.js (webpack預設)
const path = require('path');
module.exports = {
entry: './app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
}
};
- Loaders(載入器)
因為webpack只會載入.js檔，所以需要搭配loaders會將專案的檔案(.css, .html, .scss, .jpg 等)視為一個個的模組，所以loaders功能將這些檔案轉換(transform)為模組化後，讓這些檔案可以打包起來
如何在webpack.config.js配置載入器:
- 不同的檔案需要使用其對應的載入器，webpack才可以辨別這些檔案的格式
- 轉換這些檔案讓他們可以在加入相依模組的圖形
範例3:
設定檔: webpack.config.js (webpack預設)
const path = require('path');
module.exports = {
entry: './app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
文字檔: cars.txt
{"car1":"Alfa Romeo","car2":"Ferrari","car3":"Porsche"}
語法說明:
rules下面會定義兩個屬性，test和use，test解析的檔案為’*.txt’檔，use表示使用的檔入器raw-loader。
但是在執行編譯後卻出現下列的錯誤，Module not found: Error: Can’t resolve ‘raw-loader’表示沒有找到載入器，我們必須安裝載入器，才可以使用
$ npm install --save-dev raw-loader
安裝raw-loader載入器後，就可以正常執行>node .\dist\app.bundle.js
[ 'dev1', '2222', '333' ]
{"car1":"Alfa Romeo","car2":"Ferrari","car3":"Porsche"}
- Plugins(插件)
插件在webpack定義為功能的擴充，表示提供客製化的工具來讓開發更為多元化，webpack plugin system是非常強大且很客製化的特性，
範例4:
設定檔: webpack.config.js (webpack預設)
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
module.exports = {
entry: './app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
語法說明: 使用插件需要三個步驟
1. 使用npm安裝插件，但如果webpack內建就不需要
2. 使用require()函式載入
3. 加入plugins陣列中
我們以HtmlWebpackPlugin來教學如何安裝，首先到webpack插件列表找到HtmlWebpackPlugin然後點入，可以找到安裝方法和使用說明這樣就完成的安裝
$ npm install --save-dev html-webpack-plugin
結論
webpack進入點和輸出文件算是基本的操作，載入器與插件的使用是比較進階的用法，需要花點時間才可以理解，也是webpack與其他JS不同的地方。
參考文件:
