主要的信息都是來自於下方所示的網站 https://webpack.docschina.org/configuration 從 webpack 4.0.0 版本開始，可以不用通過引入一個配置文件打包項目。然而，webpack 仍然還是高度可配置的 ，並且能夠很好的滿足需求。 首先總結下個人理解的,w ...
主要的信息都是來自於下方所示的網站
https://webpack.docschina.org/configuration
從 webpack 4.0.0 版本開始，可以不用通過引入一個配置文件打包項目。然而，webpack 仍然還是高度可配置的 ，並且能夠很好的滿足需求。
首先總結下個人理解的,webpack 是一個js的應用程式的靜態模塊打包器(static module bundler)。在 webpack 處理應用程式時，它會在內部創建一個依賴圖(dependency graph)，用於映射到項目需要的每個模塊，然後將所有這些依賴生成到一個或多個bundle。有以下幾個優點
- 1.能將多個資源打包成一個或者較少的文件,後續的HTTP交互時,請求數量可能會減少,增加響應速度
- 2.能將資源轉化為最適合瀏覽器的格式,提升應用的性能,只去引用被應用使用的資源,如懶載入資源 (只在需要的時候才載入相應的資源)
- 3.提供了很重要的實時載入和熱載入的功能,節省了開發時間
1 entry 入口
entry point 用來指示使用哪個模塊來作為構建其內部依賴圖的開始, 預設是./src/index.js,可以配置一個或多個入口
例如多個入口:
'''
entry: {
app: './src/index.js',
showlog: './src/showlog.js'
},
'''
單個文件可以寫成:
module.exports = { entry: { main: './path/to/my/entry/file.js' } };
簡寫:
module.exports = { entry: './path/to/my/entry/file.js' };
2 output 出口
output 屬性告訴 webpack 在哪裡輸出它所創建的 bundles，以及如何命名這些文件，主輸出文件預設為 ./dist/main.js，其他生成文件的預設輸出目錄是 ./dist。
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
上面的示例,通過 output.filename 和 output.path 屬性，來告訴 webpack bundle 的名稱，以及我們想要 bundle 生成(emit)到哪裡。output只可以指定一個輸出的配置
output.filename 輸出文件名
output.path 輸出文件所在目錄
