為什么用 webpack

webpack 官網傳送門 …

• 官網：webpack 是一個用于現代 JavaScript 應用程序的 靜態模塊打包工具。將你項目中所需的每一個模塊組合成一個或多個 bundles，它們均為靜態資源，用于展示你的內容。
• 總結：匯總所有模塊，整理出一個或者多個 bundles 。如果有瀏覽器不認識的語言，通過其核心 module 讓瀏覽器能識別的語言。如果有未能處理的情況，可以嘗試 plugins 去解決。

五大核心之：入口（entry）

 module.exports = {// 讓webpack 知道，從那個文件開始，相當于一個樹形的根元素的指定entry: './path/to/my/entry/file.js',
};

五大核心之：出口（output）

module.exports = {output: {// 配置輸出的 bundles 名稱，名字自己定義filename: 'bundle.js',},
};

五大核心之：加載器（module）

• test 屬性，識別出哪些文件會被轉換。
• use 屬性，定義出在進行轉換時，應該使用哪個 loader。

module: {// 「在 require()/import 語句中被解析為 '.txt' 的路徑」時，//  對它打包之前，先 use(使用) raw-loader 轉換一下。rules: [{ test: /\.txt$/, use: 'raw-loader' }],},

五大核心之： 插件（plugin）

module.exports = {// html-webpack-plugin 為應用程序生成一個 HTML 文件// 并自動將生成的所有 bundle 注入到此文件中。plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

五大核心之：模式（mode）

module.exports = {
// 如果沒有設置，webpack 會給 mode 的默認值設置為 productionmode: 'development',
};