https://www.webpackjs.com/concepts/ * webpack 是靜態模塊打包器（module bundler），遞歸地構建依賴關系圖，查找需要的每個模塊，打包成一個或多個bundle。 * 配置文件， webpack.config.js， 從webpack v4.0.0， 可以不用引入一個配置文件。 * 入口（entry）, 構建內部依賴圖的開始模塊。webpack會找出和入口起點有直接和間接依賴的其他模塊和庫。在配哦之文件中通過entry屬性配置， 可以配置一個或多個。默認值是./src。 ``` module.exports = { entry: './src/index.js' } ``` * 出口（output）, 輸出創建的bundles的位置，以及如何命名這些文件。默認值是 ./dist。 在配置文件中通過output屬性配置。 ``` const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } }; ``` 以上首先導入了path模塊， path是Node.js的基本模塊， 用來操作文件路徑。 * 生成(emit，emitted), 產生bundle文件 ，是“生產(produced)”或“釋放(discharged)”的特殊術語 * loader, 讓webpack能夠處理非JavaScript文件。可以將所有類型的文件轉換為webpack能夠處理的有效模塊。 在 webpack 配置中定義 loader 時，要定義在 module.rules 中，而不是 rules。 ``` const path = require('path'); const config = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } }; ``` 以上的作用是require()/import 語句中被解析為 '.txt' 的路徑時， 在打包之前，使用raw-loader轉換一下。 - test 屬性，標識應該被對應的loader進行轉換的某個或某些文件 - use屬性， 進行轉換時，使用哪個loader * 插件（plugins）, 執行范圍更廣的任務，包括打包優化、壓縮和重新定義環境中的變量等。 使用方式： 先require(), 再添加到 plugins組件中。 ``` const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝 const webpack = require('webpack'); // 用于訪問內置插件 const config = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config; ``` * 模式， 通過mode參數設置， development 或production, ``` module.exports = { mode: 'production' }; ```