webpack是一個現代JavaScript應用程序的靜態(tài)模塊打包工具。當webpack處理應用程序時，會在內部構建一個依賴圖，此依賴圖會映射項目所需要的每個模塊，并且生成一個或者多個bundle。
一、入口(entry)
入口起點是構建其內部 依賴圖的開始，進入后webpack 會找出項目所依賴的塊和庫，默認起點./src/index.js。
????1、簡單規(guī)則：每個HTML頁面都有一個入口起點。單頁面應用（SPA）：一個入口起點，；多頁面應用（MPA）：多個入口起點
????2、命名：如果傳入一個字符串或者字符串數組，chunk會被命名為main。如果傳入一個對象，則每個鍵是chunk的名稱，該值描述了chunk的入口起點。
二、輸出(output)
輸出屬性是告訴webpack 在哪里輸出它所創(chuàng)建的 bundle，以及如何命名這些文件，主要輸出文件默認輸出位置：./dist/main.js，其他文件默認放置在 ./dist 文件夾中。
????1、注：filename不會影響那些「按需加載 chunk」的輸出文件。對于這些文件，請使用 output.chunkFilename 選項來控制輸出。
????2、[hash] 和 [chunkhash] 的長度可以使用 [hash:16]（默認為20）來指定?？赏ㄟ^指定output.hashDigestLength 在全局配置長度。
? ? 3、output.pathinfo在 development 模式時的默認值是 true，而在 production 模式時的默認值是 false。在生產環(huán)境(production)下，不應該使用
? ? 4、output.path 中的 URL 以 HTML 頁面為基準
? ? 5、js/[name].[contenthash].js：路勁加文件名
三、loader
webpack 只能理解 JavaScript 和 JSON 文件。loader 讓 webpack 能夠去處理其他類型的文件，并將它們轉換為有效 模塊，以供應用程序使用，以及被添加到依賴圖中。
? ??注意，loader 能夠 import 導入任何類型的模塊（例如 .css 文件），可以使開發(fā)人員創(chuàng)建出更準確的依賴關系圖。
? ? 在更高層面，在 webpack 的配置中 loader 有兩個屬性：
????1. test 屬性，用于標識出應該被對應的 loader 進行轉換的某個或某些文件。
????2. use 屬性，表示進行轉換時，應該使用哪個 loader。
? ? 1、mini-css-extract-plugin是將CSS提取為獨立的文件的插件，對每個包含css的js文件都會創(chuàng)建一個CSS文件，支持按需加載css和sourceMap；通過配合html-webpack-plugin插件的使用，生成的html就會自動引入css文件啦。只能用在webpack4中，對比另一個插件 extract-text-webpack-plugin有點:
? ? ? ? ①. 異步加載? ? ? ? ②. 不重復編譯，性能更好? ? ? ? ?③. 更容易使用
? ? 2、以上的配置中，對一個對象定義了rules屬性，里面包含了兩個屬性，意味著告訴webpack編譯器如下信息：“當碰到「在 require()/import 語句中被解析為 '.txt' 的路徑」時，在你對它打包之前，先 使用 raw-loader 轉換一下
? ? 3、在 webpack 配置中定義 rules 時，要定義在 module.rules
? ? 4、使用正則表達式匹配文件時，你不要為它添加引號。也就是說，/\.txt$/ 與 '/\.txt$/'/ "/\.txt$/" 不一樣。
四、插件(plugin)
loader 用于轉換某些類型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務。包括：打包優(yōu)化，資源管理，注入環(huán)境變量。
想要使用一個插件，你只需要 require() 它，然后把它添加到plugins 數組中。
由于插件可以攜帶參數/選項，你必須在 webpack 配置中，向 plugins 屬性傳入 new 實例
一、4.1 常用插件
? ? 1、html-webpack-plugin
? ? ? ? ①用途：用于編譯 Webpack 項目中的 html 類型的文件，為應用程序生成 HTML 一個文件。
? ? ? ? ②用法：
????new HtmlWebpackPlugin({
????????????filename:'index.html',
????????????template:resolvePath('../app/src/index.html'),
????????????inject:true
????})
? ????? ③當未定義此插件的入口時，默認只為 index.html,輸出同樣是 index.html。
? ? ????④可以為html文件中引入的外部資源如script、link動態(tài)添加每次compile后的hash，防止引用緩存的外部文件問題
????????⑤單頁面可以生成一個html文件入口；配置N個html-webpack-plugin可以生成N個頁面入口
? ? ????⑥重構入口html，動態(tài)添加< link>和< script>，在以hash命名的文件上非常有用，因為每次編譯都會改變
? ? ????⑦配置項
? ??????title：生成的html文檔的標。并不會替換指定模板文件中的title元素的內容，除非html模板文件中使用了模板引擎語法來獲取該配置項值，題
? ??????filename：輸出文件的文件名稱，默認為index.html。還可以為輸出文件指定目錄位（例如'html/index.html'）置
????template:? 本地模板文件的位置[為template指定的模板文件沒有指定任何loader的話，默認使用ejs-loader。如template: './index.html'，若沒有為.html指定任何loader就使用ejs-loader
? ??templateContent：可以指定模板的內容，不能與template共存。
? ??inject：向template或者templateContent中注入所有靜態(tài)資源，不同的配置值注入的位置不經相同( 1. true或者body：所有JavaScript資源插入到body元素的底部? ?2. head: 所有JavaScript資源插入到head元素中? ? 3. false： 所有靜態(tài)資源css和JavaScript都不會注入到模板文件中)
? ??favicon:?添加特定favicon路徑到輸出的html文檔中
? ???hash:?true|false，是否為所有注入的靜態(tài)資源添加webpack每次編譯產生的唯一hash值
? ??chunks:?允許插入到模板中的一些chunk，不配置此項默認會將entry中所有的thunk注入到模板中
? ??excludeChunks:?none | auto| function，默認auto； 允許指定的thunk在插入到html文檔前進行排序。> function值可以指定具體排序規(guī)則；auto基于thunk的id進行排序； none就是不排序
? ??xhtml:?true|fasle, 默認false；是否渲染link為自閉合的標簽，true則為自閉合標簽
? ??cache:? true|fasle, 默認true； 如果為true表示在對應的thunk文件修改后就會emit文件
? ??showErrors:?true|false，默認true；是否將錯誤信息輸出到html頁面中。這個很有用，在生成html文件的過程中有錯誤信息，輸出到頁面就能看到錯誤相關信息便于調試。
? ? 2、ProvidePlugin：
? ? ? ? ①用途：$出現，就會自動加載模塊；$默認為'jquery'的exports。
? ? ? ? ②用法：new webpack.ProvidePlugin({ $: 'jquery', })
????3、webpack.IgnorePlugin：
????????①用途：定義全局常量
? ? ? ? ②用法：
????new webpack.DefinePlugin({
????????'process.env': {
????????????????NODE_ENV:JSON.stringify(process.env.NODE_ENV)
????????},
????????PRODUCTION: JSON.stringify(PRODUCTION),
????????APP_CONFIG: JSON.stringify(appConfig[process.env.NODE_ENV]),
????}),
? ? 4、IgnorePlugin：
????????①用途：忽略regExp匹配的模塊,排除部分不需要編譯的文件
? ? ? ? ②用法：new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/,/node_modules$/)
? ? 5、mini-css-extract-plugin
? ? ? ? ①用途：分離css文件
? ? ? ? ②用法：
? ? ? ?new MiniCssExtractPlugin({
? ? ? ? ? ?filename: 'css/[name].[contenthash:6].css',
? ? ? ?})
? ? 6、vue-loader/lib/plugin
? ? ? ? ①Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
五、模式(mode)
通過選擇 development, production 或 none 之中的一個，來設置 mode 參數，你可以啟用 webpack 內置在相應環(huán)境下的優(yōu)化。其默認值為 production。
module.exports = { mode: 'production'};
六、瀏覽器兼容性(browser compatibility)
webpack 支持所有符合 ES5 標準 的瀏覽器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持舊版本瀏覽器，在使用這些表達式之前，還需要 提前加載 polyfill
七、解析(resolve)
模塊解析(module resolution) : resolver 是一個庫(library)，用于幫助找到模塊的絕對路徑。resolver 幫助 webpack 從每個如 require/import 語句中，找到需要引入到 bundle 中的模塊代碼。 當打包模塊時，webpack 使用 enhanced-resolve 來解析文件路徑。
解析:該屬性的作用是設置模塊如何被解析
? ? 一、常用配置項
? ? ? ? 1、esolve.alias：設置別名, 在vue中都是 @代表src目錄。 也可以在key尾部添加$,精確匹配某一文件
module.exports = {
? ? ????? resolve: {
? ? ? ? ????????alias: {
? ? ? ? ? ????????????????Utilities: path.resolve(__dirname, 'src/utilities/'),
? ? ? ? ? ????????????????Templates: path.resolve(__dirname, 'src/templates/')
? ? ? ? ????????}
? ? ? ????}
? ? ? ????//替換「在導入時使用相對路徑」這種方式，就像這樣：
? ? ? ????import Utility from '../../utilities/utility';
? ? ????? //可以這樣使用別名:
? ? ????? import Utility from 'Utilities/utility';
????}
? ? 2、resolve.extensions：自動解析確認的擴展,默認值為:extensions: [.wasm', '.mjs','.js', '.json'] .能夠使用戶在引入模塊時不帶擴展：
????????import File from '../path/to/file';
? ? 3、resolve.mainFiles：解析目錄時要使用的文件名。 當你引入路徑只精確到一個文件夾時, 引入文件夾中的哪個.js文件, 默認為: index
????????module.exports = {
? ? ? ????????resolve: {
? ? ? ? ????????mainFiles: ['index']
? ? ? ????????}
? ????? };
? ? 4、resolve.modules：告訴 webpack 解析模塊時應該搜索的目錄。絕對路徑和相對路徑都能使用，但是之間有一點差異。
? ? ①使用絕對路徑，將只在給定目錄中搜索。
????????module.exports = {
? ? ? ? ? ????????resolve: {
? ? ? ? ? ? ? ? ? modules: ['node_modules']
? ? ? ? ? ????}
? ? ? ? };
? ? ②如果你想要添加一個目錄到模塊搜索目錄，此目錄優(yōu)先于 node_modules/ 搜索：????????
????????module.exports = {
? ? ? ? ? ????????resolve: {
? ? ? ? ? ? ????????modules: [path.resolve(__dirname, 'src'), 'node_modules']
? ? ? ? ????????? }????
? ? ? ? };
? ? 5、resolve.enforceExtension: 引入的模塊文件后面要不要帶擴展名, true:一定要帶, 默認為 false
? ??import foo from './foo' // ./foo.js 中的.js可以省略
? ? 6、resolve.enforceModuleExtension：對模塊是否需要使用的擴展（例如 loader）。boolean: false默認
八、優(yōu)化(optimization)
從 webpack 4 開始，會根據你選擇的 mode 來執(zhí)行不同的優(yōu)化，不過所有的優(yōu)化還是可以手動配置和重寫。
? ? 一、常用配置項
? ? ? ? 1、optimization.minimize：boolean，production 模式下，這里默認是 true。?
????????????告知 webpack 使用 TerserPlugin 壓縮 bundle。
? ? ????module.exports = {? ? ? optimization: {? ? ? ? minimize: false? ? ? }? ? };
? ? ? ? 2、optimization.minimizer： [<plugin>] and or [function (compiler)]
? ??????????允許你通過提供一個或多個定制過的 TerserPlugin 實例，覆蓋默認壓縮工具(minimizer)
????????const TerserPlugin = require('terser-webpack-plugin');? ? ? ??
? ????????? module.exports = {
? ? ? ????????optimization: {
? ? ? ? ????????minimizer: [
? ? ? ? ? ????????new TerserPlugin({? // 壓縮js
? ? ? ? ? ? ? ? ? ? cache: true,
? ? ? ? ? ? ????????parallel: true,? // 開啟多進程，提升壓縮速度
? ? ? ? ? ? ????????sourceMap: true,? // 生成map文件
? ? ? ? ? ????????}),
? ? ? ? ? ????????new OptimizeCSSAssetsPlugin({}),? ? // 壓縮css
? ? ? ? ????????],
? ? ????????? }
? ? ? ? ? };
????3、optimization.splitChunks：object
? ??????對于動態(tài)導入模塊，默認使用 webpack v4+ 提供的全新的通用分塊策略
九、性能(performance)
可以控制 webpack 如何通知「資源(asset)和入口起點超過指定文件限制」。配置如何展示性能提示。例如，如果一個資源超過 250kb，webpack 會對此輸出一個警告來通知你。
? ? 一、常用配置項
? ? ? ? 1、performance.hints：false | "error" | "warning"，此屬性默認設置為 "warning"。
? ? ? ? ? ? ①給定一個創(chuàng)建后超過 250kb 的資源：hints: false
? ? ? ? ? ? ②不展示警告或錯誤提示。：hints: 'warning'
? ? ? ? ? ? ③將展示一條警告，通知你這是體積大的資源。在開發(fā)環(huán)境，我們推薦這樣。：hints: 'error'
? ? ? ? 2、performance.maxEntrypointSize：int
? ? ? ? ? ? ①此選項根據入口起點的最大體積，控制 webpack 何時生成性能提示。默認值是：250000 (bytes)。
? ??????????????module.exports = {
? ? ? ????????????????performance: {
????????? ? ? ????????? ????maxEntrypointSize: 400000
? ? ? ????????????????}
? ????????????? };
十、devtool
選擇一種 source map 格式來增強調試過程。不同的值會明顯影響到構建(build)和重新構建(rebuild)的速度。切勿同時使用 devtool 選項和SourceMapDevToolPlugin/EvalSourceMapDevToolPlugin 插件devtool 選項在內部添加過這些插件，所以你最終將應用兩次插件。
