webpack之基本概念

當 webpack 處理應用程序時，它會在內部構建一個 依賴圖(dependency graph)，此依賴圖會映射項目所需的每一個模塊，並生成一個或多個 bundle

一、入口entry

webpack從入口文件開始找與其直接或間接的依賴來構建依賴圖。入口能夠有多個

module.exports = {
    entry: {
        app:'./path/index.js'
    }
}
複製代碼

二、輸出output

定義webpack建立的bundle輸出在什麼位置，以什麼樣的名字輸出

const path = require('path');
module.exports = {
    ...
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'first-webpack.bundle.js'
    }
}
複製代碼

三、loader

webpack只能識別js和json文件，loader 用於轉換某些類型的模塊。

經過（loader）預處理函數，loader 爲 JavaScript 生態系統提供了更多能力

const path = require('path');
module.exports = {
    ...
    module: {
        relus: [
            {
                test: /\.(tsx|ts)$/,
                use: 'babel-loader'
            }
        ]
    }
}
複製代碼

四、插件plugin

plugin功能極其強大，能夠用來處理各類各樣的任務，包括：打包優化，資源管理，注入環境變量等等。

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const webpack = require('webpack'); // 用於訪問內置插件
const path = require('path');

module.exports = {
    ...
    plugins: [
        new HtmlWebpackPlugin({template: './src/template.html'})
    ]
}
複製代碼

在上面的示例中，html-webpack-plugin 爲應用程序生成 HTML 一個文件，並自動注入全部生成的 bundle。

webpack plugin是一個具備 apply 方法的 JavaScript 對象。apply 方法會被 webpack compiler 調用，而且 compiler 對象可在整個編譯生命週期訪問。

五、mode

經過選擇 development, production 或 none 之中的一個。