嗨，大家好久不見。
筆者最近正朝著萬能的全端開發者邁進，而最近遇到了一個棘手的問題，就是使用 Webpack 時的各種麻煩事，所以我與我的好夥伴好朋友 Single Zero 就一起弄了這一個整合包模組，讓我們只要一些基本的設定後，什麼 ES6、Less、樣版引擎啥的都能快速搞定，而且支援在不同需求中的不同設定，然後只需要在專案根目錄下一次 webpack 指令便能根據各自的設定完成打包。
雖然比起全自由的wepback.config.js有些許限制，但個人覺得夠用了 XD
而且因為有了這個模組，我們考試都考100分就不需要再手動安裝和設定一堆有的沒的，設定到腦神經衰落還不會動。
安裝
|
1 2 |
npm install gt-pack --save-dev |
使用
webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
const gtPack = require('gt-pack'); let gp = gtPack.GuanTing({ dirName: __dirname + '/views/output', // 輸出位置 // HTML html: { index: __dirname + '/dev/index.html', register: __dirname + '/dev/register.html' }, // EJS 樣版引擎支援 ejs: { index: __dirname + '/dev/index.ejs', register: __dirname + '/dev/register.ejs' dirName: __dirname + '/views/ejs' // 指定這個部分的其他輸出位置 }, // 目前支援的 CSS 前置處理器是 LESS css: { index: __dirname + '/dev/css/index.less', register: __dirname + '/dev/css/register.less' }, // JS 支援 babel ES6 轉換。 js: { index: __dirname + '/dev/js/index.js', register: __dirname + '/dev/js/register.js' }, // TypeScript ts: { index: __dirname + '/dev/js/index.ts', register: __dirname + '/dev/js/register.ts', } }); module.exports = gp; |
多節點用法
project/webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 |
const noder = require('gt-pack').noder; let List = [ require('./dirA/webpack.config.js'), // 資料夾 dirA 下的 webpack require('./dirB/webpack.config.js'), // 資料夾 dirB 下的 webpack ]; module.exports = noder(List); |
這可以讓webpack的設定變成一個樹狀節點的結構，讓webpack可以在不同的資料夾中有不同的設定。
一些用法補充
TypeScript
TypeScript 必須再多做幾個設定。
請在專案根目錄新增：tsconfig.webpack.json
|
1 2 3 4 5 6 7 8 9 |
{ "compilerOptions": { "removeComments": true, "sourceMap": true } } // 可以自由增加自己的設定 |
否則會無法編譯。
最後
這是我跟夥伴討論後決定開源出來的一個小小作品，雖然主要是想利用 npm 官方 registry 超快的網速加快我們安裝的速度，不過也歡迎大家給點意見與指教啦！