WebPack @ Modern Web and App Programming

繼安裝完 node.js & NPM 之後，就可以來學習 webpack 了。
另外也可以參考這篇 Webpack 中文指南

以下內容對應到這個影片

使用 npm 指令安裝 webpack

npm install --save-dev webpack

準備好檔案後，可以使用這個指令做包裝

./node_modules/.bin/webpack src/main.js dist/main.bundle.js
// ./node_modules/.bin/webpack <從哪個檔案開始分析起> <輸出包到哪個檔案>

也可以新增 webpack.config.js 檔，以後直接呼叫執行

// in webpack.config.js

var path = require('path');

module.exports = {

    context: path.resolve(__dirname, './src'),
    // __dirname 代表 webpack.config.js 所在的資料夾

    entry: {

        main: './main.js'

},

    output: {

    path: path.resolve(__dirname, 'dist'),

    filename: '[name].bundle.js'
    // [name] 表示 entry point 的 key 值，此例為 main

}

};

另外還有在 package.json 裡的 script 增加下面，就可以搭配 npm run build 指令，不用再打上面一長串

  "scripts": {

    "build": "webpack"

  },

執行看看就會獲得一樣效果

npm run build
// build 為指令名稱

有時候 code 會很頻繁的修改，為了避免每一次都要再執行打包指令時

可以直接開啟 webpack 的 watch mode

  "scripts": {

    "watch": "webpack -w"
     // webpack -p 的話可以壓縮 webpack bundle 檔

  },

20hrs