Webpack 一開始的配置
建立環境：
npm install webpack webpack-cli --save-dev
用 npm 建立 package.json。設定檔資訊可以先按 Enter 跳過，之後再補：
npm init
建立 webpack.config.js 與 index.js。
webpack.config.js：
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'index.bundle.js',
path: path.resolve(__dirname, './'),
},
};
entry：進入點，這裡指定為index.js。output：打包後的輸出檔案。檔名在index後面加上bundle，用來辨認這是打包後的檔案。
在 package.json 的 scripts 加入 build：
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.6.0",
"webpack-cli": "^2.0.15"
}
}
開啟終端機並執行打包：
npm run build
檔案路徑設定
src/ 開發中的檔案
dist/ 輸出編譯後的檔案
Node.js 搬移檔案需要使用 path API，因此先在 webpack.config.js 引入：
var path = require('path');
在 module.exports 加入 context，用 path.resolve 指定起始路徑：
context: path.resolve(__dirname, 'src'),
__dirname 是目前執行檔案所在目錄的完整位置。第一個參數使用 __dirname，第二個參數指定從 src 資料夾開始找檔案。
var path = require('path');
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: './index.js',
output: {
filename: 'index-bundle.js',
},
};
設定路徑後執行：
npm run build
watch 設定
在 package.json 加入 watch，監控 JavaScript 檔案；檔案變動後會自動執行編譯。
{
"name": "watch",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"watch": "webpack --watch",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0"
}
}
設定完成後執行：
npm run watch
mode 設定
Webpack 編譯分為 production 與 development：
production：上線版本，會壓縮與最佳化檔案。development：開發中，只編譯。
Webpack 4 預設是 production。如果沒有設定 mode，執行 watch 時也會壓縮與最佳化，比較消耗資源，因此在 npm script 加上 development：
{
"name": "Babel",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"watch": "webpack --mode development --watch",
"start": "webpack --mode development",
"deploy": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.2",
"webpack": "^4.21.0",
"webpack-cli": "^3.1.2"
}
}
watch：持續編譯不中斷，使用 development 版本。start：執行一次編譯，使用 development 版本。deploy：執行一次編譯，使用 production 版本。
Development 的程式碼不會被壓縮。
JavaScript 與 Babel
安裝 Babel：
npm install babel-loader @babel/core @babel/preset-env --save-dev
babel-loader：讓 Webpack 判讀並轉換檔案。@babel/core：提供 Babel 編譯用的 API。@babel/preset-env：使用新版 JavaScript 語法時，不必逐一設定需要轉換的語法。
webpack.config.js：
var path = require('path');
module.exports = {
context: path.resolve(__dirname, 'js'),
entry: {
index: './index.js',
},
output: {
path: path.resolve(__dirname, 'js'),
filename: './index.bundle.js',
},
module: {
rules: [
{
test: /\.(js)$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
},
},
},
],
},
};
在 index.js 使用 ES6 語法測試：
const Name = ['Mike', 'Jacky', 'Andy', 'Scars'];
Name.forEach((obj, idx) => console.log(`${idx} => ${obj}`));
執行：
npm run watch
編譯結果會把 const 轉成 var、箭頭函式轉成 function，字串模板也會組回一般字串，代表程式已編譯成 ES5。
正式上專案前要執行 npm run deploy，讓 production 編譯壓縮及最佳化程式碼。
Babel 不只轉換新版 JavaScript，也可以轉換 React 的 JSX 與 TypeScript 等語法。