React 新手入門筆記(三) – Webpack Plugin

上一篇介紹了 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,會發現終端機多了一行訊息。
2016-07-27 at 下午10.04
表示我們的 Validator 驗證我們的 Config 無誤,這時我來亂改一下 webpack.config.js,會發現 Validator 發現錯誤並明確地告訴我們錯誤在哪,現在我們可以更好地為我們的 config debug 了!
2016-07-27 at 下午10.14

1 Comment

  1. T_____T

    這年頭連 config 都要 debug 了 ….

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料