一 Webpack概念
靜態模塊打包器，當Webpack處理程序時，它會構建一個包含應用程序所有模塊的依賴關係圖，然後將它們打包成一個或多個bundle。
從Webpack4.0開始，我們可以不引入配置文件，但它依舊是高度可配置的。
webpack處理文件的過程可以分爲兩個維度：文件間的關係和文件的內容。文件間的關係處理，主要是通過文件和模塊標記方法來實現；文件內容的處理主要通過loaders和plugins來處理。
二 入口
入口(一個或多個)即依賴關係圖的開始，webpack會找到和其直接或者間接依賴的，輸出到bundles文件中。
1.單個入口簡寫語法(靈活性差)
entry: string|Array<string>
例如:
module.exports = {
entry: './path/to/my/entry/file.js'
};
- 暫時還不理解下面的:
當你向 entry 傳入一個數組時會發生什麼？向 entry 屬性傳入「文件路徑(file path)數組」將創建“多個主入口(multi-main entry)”。在你想要多個依賴文件一起注入，並且將它們的依賴導向(graph)到一個“chunk”時，傳入數組的方式就很有用。
2. 對象語法(擴展性好)
entry: {[entryChunkName: string]: string|Array<string>}
例1 分離 應用程序(app) 和 第三方庫(vendor) 入口
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
- 不理解:
這是什麼？從表面上看，這告訴我們 webpack 從 app.js 和 vendors.js 開始創建依賴圖(dependency graph)。這些依賴圖是彼此完全分離、互相獨立的（每個 bundle 中都有一個 webpack 引導(bootstrap)）。這種方式比較常見於，只有一個入口起點（不包括 vendor）的單頁應用程序(single page application)中。
爲什麼？此設置允許你使用 CommonsChunkPlugin 從「應用程序 bundle」中提取 vendor 引用(vendor reference) 到 vendor bundle，並把引用 vendor 的部分替換爲 webpack_require() 調用。如果應用程序 bundle 中沒有 vendor 代碼，那麼你可以在 webpack 中實現被稱爲長效緩存的通用模式。
例2 多頁面應用程序
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
- 不理解:
這是什麼？我們告訴 webpack 需要 3 個獨立分離的依賴圖（如上面的示例）。
爲什麼？在多頁應用中，（譯註：每當頁面跳轉時）服務器將爲你獲取一個新的 HTML 文檔。頁面重新加載新文檔，並且資源被重新下載。然而，這給了我們特殊的機會去做很多事：
使用 CommonsChunkPlugin 爲每個頁面間的應用程序共享代碼創建 bundle。由於入口起點增多，多頁應用能夠複用入口起點之間的大量代碼/模塊，從而可以極大地從這些技術中受益。
根據經驗：每個 HTML 文檔只使用一個入口起點。
三 輸出(output)
配置 output 選項可以控制 webpack 如何向硬盤寫入編譯文件,輸出只有一個。包含以下兩點:
⑴filename:文件名
⑵path:絕對路徑
例子1:
const config = {
output: {
filename: 'bundle.js',
path: '/home/proj/public/assets'
}
};
module.exports = config;
此配置將一個單獨的 bundle.js 文件輸出到 /home/proj/public/assets 目錄中。
例子2:
如果配置創建了多個單獨的 “chunk”（例如，使用多個入口起點或使用像 CommonsChunkPlugin 這樣的插件），則應該使用佔位符(substitutions)來確保每個文件具有唯一的名稱。
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
四 Chunk
chunk是一個很重要的概念，所以這裏單獨拿出來說明一下。
就是打包後的代碼塊的意思，chunkname就是打包後代碼的名字。
五 模式(mode)
告訴package使用相應的模式優化。
待研究
六 loader
webpack只能打包js文件。因此像css文件等就需要loader將資源轉化，加載進來。
我們先需要通過命令行安裝loader:
npm install --save-dev css-loader
npm install --save-dev ts-loader
然後通過配置文件的方式對每個 .css 使用 css-loader，以及對所有 .ts 文件使用 ts-loader：
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
七 插件
想像一下，你使用 webpack 將你的文件 bundle 在一起，然後你發現到 bundle 後的結果是 900KB。這是個問題，但是你可以通過 minify 你的 bundle 文件來做改善。要做到這一點，可以使用UglifyJsPlugin plugin。
// webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: ['./src/index'],
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
},
})
]
}
八 targets
webpack可以爲js的各種不同的宿主環境提供編譯功能，爲了能正確的進行編譯，就需要開發人員在配置裏面正確的進行配置。
默認情況下，target的值是web，也就是爲類瀏覽器的環境提供編譯。
target的具體常用值可以去網上查。