一、概念介紹
本質上，webpack 是一個現代JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。
它是高度可配置的，但是，在開始前你需要先理解四個核心概念：
入口(entry)
輸出(output)
loader
插件(plugins)
1、 入口(entry)
指定webpack從哪個模塊開始構建項目，通過一下配置指定一個入口起點(或多個入口起點)，被處理到稱之為 bundles 的文件中：
// webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
}
2、出口(output)
處理打包生成的 bundles 文件，如指定輸出文件位置，文件名等。
// webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'test_name.bunlde.js'
}
}
3、loader
loader 作用是將所有文件類型轉換成webpack能處理的有效模塊，然后就可以通過webpack將文件打包。
本質上，webpack loader將所有類型文件轉換成應用程序的依賴圖可以直接引用的模塊。
特殊: 只有webpack支持 import 導入任何類型模塊，如 .css,.vue 等文件。
webpack 配置 loader的兩個目標：
1.識別需要對應 loader 處理的文件。(使用test屬性)
2.轉換文件使其能夠添加到依賴圖并最終添加到 bunlde 中。(使用use屬性)
// webpack.config.js
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
// test/use 兩個屬性是必須的
]
}
}
module.exports = config;
4、插件(plugins)
使用插件可以執行范圍更廣的任務。通過 require() 引用后添加在 plugins 數組中。
另外如果需要多次使用同一個插件，則使用 new 操作符來創建它的一個實例。
安裝html-webpack-plugin：
npm install html-webpack-plugin --save-dev
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于訪問內置插件
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
二、入口起點(Entry Points)
webpack的 entry 屬性不僅可以配置單個入口，還可以配置多個入口：
1、單個入口(簡寫)配置
用法：entry: string|Arraystring>
簡單使用 ：
const config = {
entry: './path/to/my/entry/file.js'
};
module.exports = config;
entry 屬性的單個入口配置方式：
const config = {
entry:{
main:'./path/to/my/entry/file.js'
}
}
若向 entry 傳入 [文件路徑(file path)數組]，將創建 多個主入口，常常用在需要同時注入多個文件，并將它們的依賴導向(graph)到一個chunk時。
2、多個入口(簡寫)配置
對象語法
用法：entry: {[entryChunkName: string]: string|Arraystring>}
// webpack.config.js
webpack.config.js
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
雖然語法繁瑣，但這是應用程序中定義入口的最可擴展的方式。
“可擴展的 webpack 配置”是指，可重用并且可以與其他配置組合使用。這是一種流行的技術，用于將關注點(concern)從環境(environment)、構建目標(build target)、運行時(runtime)中分離。然后使用專門的工具（如 webpack-merge）將它們合并。
常見場景
列出一些常見的入口配置和實際案例：
(1)分離 應用程序(app) 和 第三方庫(vendor) 入口
// webpack.config.js
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
webpack 從 app.js 和 vendors.js 開始構建，并且他們是完全分離互相獨立，為了支持提供更佳 vendor 分離能力的 DllPlugin，考慮移除該場景。
(2)多頁面應用程序
// webpack.config.js
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
};
這樣告訴 webpack 需要 3 個獨立分離的依賴圖，
使用 CommonsChunkPlugin 為每個頁面間的應用程序共享代碼創建 bundle。
由于入口起點增多，多頁應用能夠復用入口起點之間的大量代碼/模塊，從而可以極大地從這些技術中受益。
更多關于Webpack基礎教程請點擊下面的相關文章
您可能感興趣的文章:- vue-cli基礎配置及webpack配置修改的完整步驟
- 前端路由&webpack基礎配置詳解
- Vue+webpack項目基礎配置教程
- 淺談react+es6+webpack的基礎配置
- WebPack基礎知識詳解
