上一篇介紹了 Webpack的基本設定,本篇要繼續帶各位看一些更進階的應用!
利用 NPM Script 執行 Webpack
NPM 應該很多人都知道了,除了可以管理我們的插件以外,我們也可以寫一些指令,利用npm run [ScriptName]
來執行我們寫好的指令,這邊我們幫 Webpack 也寫一個。
// 在package.json內加入一個 script key
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" // Webpack 指令
"test": "webpack" //另外建立一個test,展示之後的插件使用
}
加入"build": "webpack"
之後,我們就可以以npm run build
來取代webpack
,但是為什麼要這樣做呢?因為webpack
只能在根目錄執行,但npm run build
不管當時終端機的目錄在何處都可以正常打包,而且下一個主題便會知道為什麼我要這樣做了!
分割 Webpack Config
隨著我們的專案增長,我們可能需要擴充我們的 Webpack ,我們先用 NPM 來安裝我們的 Webpack 插件。
npm i webpack-merge --save-dev
接著到我們的 webpack.config.js ,稍微修改一下我們的設定檔
// 原本的 webpack.config.js
module.exports = {
entry: [
'./app/index.js'
],
module: {
loaders: [{
loader: 'babel-loader',
query: {
presets: ['es2015']
},
test: /\.js?$/,
exclude: /(node_module)/
}]
},
output: {
filename: "index.js",
path: __dirname + '/build'
}
};
// 改成這樣
const merge = require('webpack-merge'); //匯入我們安裝的 webpack-merge
const PATHS = { //設定路徑
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build')
};
const common = { //把原本的設定檔放入 common
entry: [
PATHS.app
],
module: {
loaders: [{
loader: 'babel-loader',
query: {
presets: ['es2015']
},
test: /\.js?$/,
exclude: /(node_module)/
}]
},
output: {
filename: "index.js",
path: PATHS.build
}
};
var config;
// 如果執行npm的build script,則會跑case:'build',方便之後擴充
switch (process.env.npm_lifecycle_event) {
case 'build':
console.log("Running Build.");
config = merge(common, {});
break;
case 'test':
console.log("Running Test.");
config = merge(common, {});
break;
default:
config = merge(common, {});
}
module.exports = config; // 匯出我們的設定
把設定檔改成這樣之後,執行npm run build
時,我們應該會得到跟改變前一樣的結果,只是多了 Running Build.
的 log 。
神奇的地方來了!還記得我們在 package.json 加入了 "test": "webpack"
嗎?這次換執行npm run test
,會發現 log 的訊息變成了Running Test.
,以後專案擴大時,我們就可以針對不同的 NPM 指令來執行不同的 Webpack 設定囉!
驗證 Webpack 設定檔
我們開始深入研究我們的 Webpack 設定檔了,但是這樣亂改亂改,實在很擔心我們把設定檔給改壞了,這邊就讓 validator 插件來幫助我們檢查設定檔吧。
npm i webpack-validator --save-dev
const path = require('path');
const merge = require('webpack-merge');
const validate = require('webpack-validator'); //匯入我們安裝的 webpack-validator
const PATHS = {
app: path.join(__dirname, 'app'),
build: path.join(__dirname, 'build')
};
const common = {
entry: [
PATHS.app
],
module: {
loaders: [{
loader: 'babel-loader',
query: {
presets: ['es2015']
},
test: /\.js?$/,
exclude: /(node_module)/
}]
},
output: {
filename: "index.js",
path: PATHS.build
}
};
var config;
switch (process.env.npm_lifecycle_event) {
case 'build':
console.log("Running Build.");
config = merge(common, {});
break;
case 'test':
console.log("Running Test.");
config = merge(common, {});
break;
default:
config = merge(common, {});
}
module.exports = validate(config); // 匯出前讓 Validator 檢查我們的 config 檔
更改設定完畢之後,我們執行我們的npm run build
,會發現終端機多了一行訊息。
表示我們的 Validator 驗證我們的 Config 無誤,這時我來亂改一下 webpack.config.js,會發現 Validator 發現錯誤並明確地告訴我們錯誤在哪,現在我們可以更好地為我們的 config debug 了!
2016-11-08 at 下午 10:32
T_____T
這年頭連 config 都要 debug 了 ….