一文了解webpack入門進階知識

• 🤾?♀?序言
• 🏓一、Tree Shaking
• • 1. 引例闡述
  • 2. Tree Shaking配置
• 🏸二、Development和Prodiction模式的區分打包
• • 1. 項目打包結構
  • 2. 共有配置webpack.common.js
  • 3. 開發環境webpack.dev.js
  • 4. 生產環境webpack.prod.js
  • 5. 運行項目package.json
• ?三、Webpack和Code Splitting、SplitChunksPlugin
• • 1. 代碼分割-Code Splitting
  • 2. 引例闡述-SplitChunksPlugin
  • 3. 實現方式-SplitChunksPlugin
  • 4. SplitChunksPlugin配置參數
• 🏐四、打包分析，Preloading，Prefetching
• • 1. 打包分析
  • 2. Preloading、Prefetching
  • • （1）引例闡述
    • （2）preloading和prefetching
• 🏏五、CSS文件的代碼分割
• • 1. css文件代碼分割
  • 2. 壓縮css文件
  • 3. 合并打包css文件
• 🏑六、webpack與瀏覽器緩存
• • 1. 瀏覽器緩存配置
  • 2. 解決舊版本問題
• ?七、Shimming的作用
• • 1. Shimming墊片
  • 2. this指向
• 🎖?八、結束語
• 🐣彩蛋 One More Thing
• • (：往期推薦
  • (：番外篇

🤾?♀?序言

上一篇文章中我們講到了 webpack 的一些基礎特性，但是呢，單單會基礎特性還是遠遠不夠的。因此，在今天的文章中，將給大家帶來 webpack 的高級特性，包括但不限于 dev 環境和 prod 環境的區分打包，以及使用 webpack 對項目進行代碼分割等等技巧。

廢話不多說，下面開始進入今天的學習吧~🎳

🏓一、Tree Shaking

1. 引例闡述

假設現在我們有一個需求，寫一段程序來對兩個數做加法和減法。現在，我們來實現這個功能。具體代碼如下：

export const add = (a, b) => {console.log(a + b); }export const minus = (a, b) => {console.log(a - b); }

接下來，我們在入口文件引入它。具體代碼如下：

import { add } from './math.js';add(1, 2);

在這種狀態下，我們用 npx webpack 命令來對項目進行打包。查看打包后的文件代碼：

/***/ "./src/math.js": /*!*********************!*\!*** ./src/math.js ***!\*********************/ /*! exports provided: add, minus */ /***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict"; __webpack_require__.r(__webpack_exports__); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "add", function() { return add; }); /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "minus", function() { return minus; }); const add = (a, b) => {console.log(a + b); }; const minus = (a, b) => {console.log(a - b); };/***/ })

我們可以發現，在入口文件我們只引入了加法的操作，因為我們當下只想用到加法功能，而暫時還不需要用減法。但是呢，打包后的文件，把減法部分的內容，也一起，給打包進去了。這無形之中，多多少少給我們添加了不少麻煩。

因此呢，我們就需要引入 webpack 中的 Tree Shaking ，來解決這個問題。

2. Tree Shaking配置

首先我們需要在 webpack.common.js 里面進行配置。如果是在 Development 的模式下，那么默認是不擁有 Tree Shaking 的。因此需要進行以下配置，具體代碼如下：

//node的核心模塊 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const webpack = require('webpack');module.exports = {mode:'development',optimization: {usedExports: true} }

在開發環境下，我們需要加上 optimization 模塊來對項目開啟 Tree Shaking 。

---

接下來，我們繼續對 package.json 進行配置。在這個文件下，我們需要添加以下代碼：

{"sideEffects": false }

sideEffects:false 指的是什么意思呢？當設置為 false 時，表明對所有的 ES Module 開啟 Tree Shaking 操作。

值得注意的是， Tree Shakig 只支持 ES Module 這種類型的引入，并不支持 commonJS 等類型的引入。這是因為， ES Module 的底層實現是靜態的，而 commonJS 的實現則是動態的。

---

還有另外一種情況就是，如果你想要使得某些模塊不開啟 Tree Shaking ，那么可以將 sideEffects 進行以下配置。具體代碼如下：

{"sideEffects": ["*.css"，"@babel/poly-fill" ] }

以上代碼的意思為，對所有的 css 文件以及 @babel/poly-fill 不開啟 Tree-shaking 功能。

---

接下來我們來看一下配置完成之后，在開發環境下的效果。具體代碼如下：

/***/ "./src/math.js": /*!*********************!*\!*** ./src/math.js ***!\*********************/ /*! exports provided: add, minus */ /*! exports used: add */ /***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict"; /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return add; }); /* unused harmony export minus */ const add = (a, b) => {console.log(a + b); }; const minus = (a, b) => {console.log(a - b); };/***/ })/******/ }); //# sourceMappingURL=main.js.map

大家可以看到，如果是在開發模式下，減法功能依然是存在的，只是多個一句 /*! exports used: add */ 來表明只使用 add 這個功能。

這是為什么呢？因為在開發模式下， webpack 怕這個地方如果引入了其他模塊，那么刪除就很容易導致報錯，所以它沒有進行刪除。

---

但如果 mode 是在生產環境下時， Tree Shaking 的作用就比較明顯了。我們修改完 mode 后來看下打包后的結果。具體代碼如下：

function (e, n, r) { "use strict"; r.r(n); var t, o; t = 1, o = 2, console.log(t + o) }

生產環境下打包后只有一行，小編摘取了最終要的部分出來。

大家可以看到，當處于生產環境下時，打包后的結果只顯示了加法功能。而我們沒有使用到減法，所以這個時候就不會連帶著打包出來了。

順帶著這個話題，接下來我們就來講一下， webpack 在 development 和 Production 模式下的區分打包。

🏸二、Development和Prodiction模式的區分打包

1. 項目打包結構

通常情況下，我們的項目會有三個 webpack 的配置文件。一個是 webpack.common.js ，一個是 webpack.dev.js ，另外一個是webpack.prod.js 。第一個文件用來放開發環境和生產環境下共同的配置，第二個文件用來放開發環境下的配置，第三個文件用來放生產環境下的配置。

接下來我們來了解下，這三個配置文件的代碼。

2. 共有配置webpack.common.js

如果我們不編寫 common 文件的話，那么 dev 和 prod 這兩個文件的代碼重合度就會比較高，所以我們把相同的部分抽離出來。具體代碼如下：

//node核心模塊 const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {// 放置入口文件，明確怎么打包entry:{main: './src/index.js'},module:{rules:[{test: /\.m?js$/,//exclude，顧名思義即排除在外。如果js文件在node_modules文件夾下面，那么我們就排除在外// 因為node_module一般都是來自于第三方庫，它已經自動的處理好此部分工作，所以我們沒必要再去做重復操作exclude: /node_modules/,use: {loader: "babel-loader",}},{test:/\.(jpg|png|gif)$/,use:{loader:'file-loader',options: {//placeholder 占位符name: '[name]_[hash].[ext]',outputPath: 'images/',limit: 10240}}},{test:/\.scss$/,use:['style-loader', {loader: 'css-loader',options: {//表明前面要先走sass-loader和postcss-loaderimportLoaders: 2,modules: true}}, 'sass-loader','postcss-loader']},{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']},{test: /\.(eot|ttf|svg)$/,use: {loader: 'file-loader',}}]},plugins: [new HtmlWebpackPlugin({//表明要引用哪一個模板template: 'src/index.html'}),new CleanWebpackPlugin(['dist'])],// 輸出，表明webpack應該怎么輸出output: {publicPath: '/',//用[]可以生成多個文件filename: '[name].js',// 指打包后的文件要放在哪個文件下path: path.resolve(__dirname, 'dist')} }

3. 開發環境webpack.dev.js

抽離完 common 代碼之后，現在我們來編寫 webpack.dev.js 文件。具體代碼如下：

const webpack = require('webpack'); const merge = require('webpack-merge'); const commonConfig = require('./webpack.common.js');const devConfig = {mode:'production',devtool: 'cheap-module-eval-source-map',devServer: {contentBase: './dist',// 當運行完npm run start時，會自動的幫我們打開瀏覽器open: true,port: 8080,// 讓我們的webpackDevServer開啟hotModuleReplacement這樣子的功能hot: true,// 即便HMR沒有生效，也不讓瀏覽器自動刷新hotOnly: true},plugins: [//熱模塊更新new webpack.HotModuleReplacementPlugin()],optimization: {usedExports: true} }module.exports = merge(commonConfig, devConfig)

4. 生產環境webpack.prod.js

繼續，我們來編寫抽離后的 prod 代碼。具體代碼如下：

const merge = require('webpack-merge'); const commonConfig = require('./webpack.common.js');const prodConfig = {mode:'development',devtool: 'cheap-module-source-map' }module.exports = merge(commonConfig, prodConfig)

到這里，大家對比上面三個文件的代碼可以發現，這樣的代碼抽離使得我們的項目結構變得更為清晰了。

5. 運行項目package.json

上面配置完成之后，我們現在要來想一下，想要運行開發環境和生產環境不用的配置，是不是應該把運行命令也給區分開來。因此，我們對 package.json 文件做出以下配置：

{"scripts": {"dev": "webpack-dev-server --config webpack.dev.js","build": "webpack --config webpack.prod.js"} }

通過以上配置，那么我們就可以通過命令 npm run dev 和 npm run build 來運行項目，以此來區分項目是開發環境還是生產環境。

---

同時，如果我們想要在控制臺更直觀的看到報錯信息，那么在開發環境的情況下，我們可以不用 webpack-dev-server 來運行，可以直接用用 webpack 來運行。具體代碼如下：

{"scripts": {"dev-server": "webpack --config webpac.dev.js","dev": "webpack-dev-server --config webpack.dev.js","build": "webpack --config webpack.prod.js"} }

這樣，我們就可以通過 npm run dev-build ，來使用 webpack 來運行項目。

?三、Webpack和Code Splitting、SplitChunksPlugin

1. 代碼分割-Code Splitting

有時候，我們可能會遇到一個業務邏輯里面有上萬行代碼，那么這上萬行代碼打包后，全部就丟到 main.js 文件里面了，這樣大的文件，會使得整個項目的加載速度會變得很是緩慢。因此，我們就需要用到代碼分割Code Splitting來解決這件事情。

我們在 webpack.common.js 中進行配置。具體代碼如下：

module.exports = {optimization: {splitChunks: {chunks: 'all'}} }

通過以上代碼我們可以得知，通過使用 optimization 中的 splitChunks ，達到了代碼分割的效果。

那使用這個配置之后， webpack 想要做的事情是什么呢？

事實上，使用 splitChunks 之后，那么當 webpack 遇到公用的類庫時，會幫我們自動地打包生成一個新的文件，之后再把其余的業務邏輯拆分到另外一個文件中去。

值得注意的是，公用類庫不管是以同步的方式還是以異步的方式進行加載， webpack 都能夠幫我們進行代碼分割。

2. 引例闡述-SplitChunksPlugin

上面我們講到了 webpack 的代碼分割，那么實際上， webpack 的代碼分割，其底層實現原理所使用的是 splitChunksPlugin 這個插件。接下來我們來講一下這個插件。

在沒有用 SplitChunksPlugin 這個插件之前，如果我們異步引入一個庫，那么 webpack 給其打包后的文件名將會命名為 0.js 、 1.js 和 ...... 。

我們現在希望在做代碼分割時， webpack 能給我們的第三方庫進行自定義命名，這又該怎么處理呢？

3. 實現方式-SplitChunksPlugin

首先我們對引入的庫前面，添加 webpackChunkName 配置。具體代碼如下：

function getComponent() {return import(/*webpackChunkName:"lodash"*/'lodash').then(({ default: _ }) => {var element = document.createElement('div');element.innerHTML = _.join(['Monday', 'Tuesday'], '_');return element;}) }getComponent().then(element => {document.body.appendChild(element); })

/*webpackChunkName:"lodash"*/ 這句話想要表明的意思為：當我們異步的引入 lodash 這個庫并且想要做代碼分割時，即當我們給 webpack 進行打包時，給其起名為 lodash 。

---

上面這個配置知識第一步，接下來我們要來安裝并使用一個動態引入的插件。具體代碼如下：

安裝插件：

npm install --save-dev @babel/plugin-syntax-dynamic-import

在 .babelrc 下引入：

{// plugins: ["dynamic-import-webpack"] 非官方支持插件plugins: ["@babel/plugin-syntax-dynamic-import"] }

配置 webpack.common.js ：

module.exports = {optimization: {splitChunks: {chunks: 'all',cacheGroups: {vendors: false,default: false}}}, }

4. SplitChunksPlugin配置參數

接下來我們再來看關于 SplitChunksPlugin 的一些常用配置。具體代碼如下：

module.exports = {optimization: {splitChunks: {/*使用async時，只對異步代碼進行代碼分割；使用all時，對同步和異步代碼同時進行代碼分割;使用initial時，表示對同步代碼進行代碼分割*/chunks: 'all',//大于30kb時，做代碼分割minSize: 30000,//表明代碼分割后文件最大的大小，如果超過了則會繼續進行拆分；有一些文件如果拆分不了則此配置想基本就沒啥用了maxSize: 0,minRemainingSize: 0,//至少有兩個塊被使用了才會被提取minChunks: 2,//表示同時加載的模塊數，最多是5個/*比如我們引入了10個類庫，那么我們會做10次代碼分割。而這個時候我們將此參數填為5，那么webpack在打包時會將前10個庫給我們生成5個js文件，之后的就不會再做代碼分割了，全部丟到一個文件里面去*/maxAsyncRequests: 5,//入口文件做代碼分割最多只能分割成3個js文件，超過3個就不會再做代碼分割了maxInitialRequests: 3,//文件生成時的中間符號automaticNameDelimiter: '~',//讓defaultVendors和default中的文件名有效name: true,enforceSizeThreshold: 50000,//當打包同步代碼時，cacheGroupscacheGroups: {defaultVendors: {//檢測你引入的庫，查詢是否是在node_module下的test: /[\\/]node_modules[\\/]/,priority: -10,//確定是在node_modules下后，將其進行打包，并命名為vendors.jsfilename: 'vendors.js'},//對非第三方庫的代碼做代碼分割default: {priority: -20,reuseExistingChunk: true,filename: 'common.js'}},}} }

🏐四、打包分析，Preloading，Prefetching

1. 打包分析

打包分析指的是，當我們使用 webpack 來進行代碼打包之后，我們可以借助打包分析的一些工具，來對我們打包生成的文件進行一定的分析，之后來看其打包的是否合理。那么如何進行打包分析呢？

我們要用到一個 github 的第三方倉庫，戳此鏈接進入~

了解完文檔該庫的內容后，接下來我們要對 package.json 進行配置。具體代碼如下：

{"scripts": {"dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.js","dev": "webpack-dev-server --config ./build/webpack.dev.js","build": "webpack --config ./build/webpack.prod.js"} }

通過上面的代碼，我們可以分析：在 --config 前面加上配置 --profile --json > stats.json ，意思為 webpack 打包后會生成打包分析文件，這個文件叫做 stats.json ，同時， --json 表示的意思為 stats.json 文件的格式是一個 json 格式的。

---

在生成完 stats.json 文件以后，我們就可以把它放到打包工具里進行分析。大家可以定位到官方文檔中的 bundle-analysis ，里面提供了 webpack-chart 、 webpack-visualizer 等可視化工具供我們使用，這個可以依據個人需求，選擇對應的工具，對 stats.json 文件進行分析。

2. Preloading、Prefetching

（1）引例闡述

事實上，當我們配置 splitChunks 時，里面的 chunks 默認值是 async 。也就是說，如果我們不對它進行配置，那 webpack 默認只對異步代碼進行代碼分割。 webpack 為什么要這么做呢？

webpack認為把同步代碼打包在一個文件就好了，同時呢，它希望我們要多寫點異步加載代碼，這樣才能讓我們的網站性能得到真正的提升。

現在，我們來說一個生活中一個非常常見的場景。假設現在我們在登錄知乎網站，那么剛進去的時候我們是還沒有登錄的。我們現在希望的是點擊登錄這個按鈕，登錄對應的模態框就能顯示出來，而不是點擊完還要等到它加載，這無形這種就可以使得頁面加載速度變快了許多。

那這該怎么處理呢？這就要談到 webpack 中的 preloading 和 prefetching 了。

（2）preloading和prefetching

假設我們現在要引入一個 click.js 文件，那么我們可以這么處理。具體代碼如下：

document.addEventListener('click', () => {// 這句話的意思為：當主要的js文件都加載完成之后，之后就是網絡帶寬有空閑的時候，它就會偷偷的把 ./click.js 文件給加載好import(/* webpackPrefetch: true */ './click.js').then(({default: func}) => {func();}) });

通過以上代碼我們可以知道，在所引入的文件前面，即 ./click.js前面，加入 /* webpackPrefetch: true */ 即可達到我們想要的效果。這句話的意思為，當主要的 js 文件都加載完成之后，這時就是網絡帶寬有空閑的時候，那么 webpack 機會偷偷的在這個時間段，把 ./click.js 文件給加載好。

這里說到的是 prefetch ，但其實我們也可以把 webpackPrefetch 改成 webpackPreload ， preload 與 prefetch 的區別在于： preload 是跟主文件同時進行加載，而不是在主文件加載完才加載的。一般來說，我們都用 prefetch ， 只有等主文件把活干完了，再來加載剩余的我們想要的文件，這樣的邏輯和對頁面的優化才是比較完美的。

綜上，原先我們打包像 jQuery 、 lodash 之類的庫時，只需要在第一次訪問的時候加載，而等到第二次訪問的時候，我們就可以借助緩存，提高訪問的速度。但這種方式也只是提高第二次訪問的速度，而我們想要實現的是，當第一次訪問的時候， webpack 就可以使得頁面的加載速度是最快的。

所以最終我們使用了 preload 和 prefetch 這兩種實現方式來解決這個問題。

🏏五、CSS文件的代碼分割

1. css文件代碼分割

上面我們講到了 js 文件如何進行代碼分割，現在，我們來講 css 文件，如何進行代碼分割。對于 css 文件的代碼分割來說，我們要引用到官方文檔中提到的一個插件： MiniCssExtractPlugin 。接下來我們來看一下這個插件如何使用。

第一步： 安裝插件。具體命令如下：

npm install --save-dev mini-css-extract-plugin

第二步： 在開發環境和線上環境中使用。我們打開 webpack.common.js 文件，引入該插件并使用。具體代碼如下：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");module.exports = {entry:{main: './src/index.js'},module:{rules:[{test:/\.scss$/,use:[MiniCssExtractPlugin.loader, {loader: 'css-loader',options: {//表明前面要先走sass-loader和postcss-loaderimportLoaders: 2,modules: true}}, 'sass-loader','postcss-loader']},{test:/\.css$/,use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']}]},plugins: [new MiniCssExtractPlugin({// 如果文件被直接引用，走filenamefilename: '[name].css',// 如果文件被間接的引用，那么走chunkFilenamechunkFilename: '[name].chunk.js'})],optimization: {//使用treeShakingusedExports: true,splitChunks: {chunks: 'all',cacheGroups: {vendors: false,default: false}}} }

第三步： 配置 package.json 文件。具體代碼如下：

{"sideEffects": [//表示不對css文件開啟treeShaking"*.css"] }

2. 壓縮css文件

對于打包后的css文件，其大小還是比較大的，所以我們需要對文件大小進行壓縮。這該怎么處理呢？

**第一步：**安裝插件。具體命令如下：

npm install optimize-css-assets-webpack-plugin -D

第二步： 在開發環境和線上環境中使用。我們打開 webpack.common.js 文件，引入該插件并使用。具體代碼如下：

const CssMinimizerPlugin = require("optimize-css-assets-webpack-plugin");module.exports = {optimization: {minimizer: [new OptimizeCSSAssetsPlugin({})]} }

3. 合并打包css文件

有時候，我們可能會有很多個入口文件，每個入口文件又都有其對應的若干個 css 文件。那么這個時候我們想把所有的 css 文件，都打包到同一個文件下，該怎么處理呢？

我們需要在 webpack.common.js 進行配置，具體代碼如下：

module.exports = {optimization: {splitChunks: {cacheGroups: {styles: {name: "styles",test: /\.css$/,chunks: "all",enforce: true,},},},} }

通過以上代碼，我們可以了解到，我們需要在 splitChunks 中額外配置一個 styles 的 cacheGroups ，將所有的 css 文件打包到一個 命名為 styles 的文件夾下。

🏑六、webpack與瀏覽器緩存

1. 瀏覽器緩存配置

當我們剛訪問網站時，第一次加載總是需要從零開始加載各種文件的，而假設我們的代碼沒有更新時，我們希望再次加載時可以從瀏覽器中直接拉取緩存，而不是重新進行加載。而等到我們的代碼發生更新時，再重新加載網頁。那這該怎么處理呢？

第一步： 配置開發環境 webpack.dev.js 文件。具體代碼如下：

const devConfig = {output: {filename: '[name].js',chunkFilename: '[name].chunk.js',} }

第二步： 配置生產環境 webpack.prod.js 文件。具體代碼如下：

const prodConfig = {output: {filename: '[name].[contenthash].js',chunkFilename: '[name].[contenthash].js',} }

以上的代碼旨在解決的問題是，當在線上環境時，對輸出的文件加一個哈希值。這個時候，如果我們的代碼有發生改變時，webpack就會生成一個新的哈希值，網頁就會進行更新。如果我們的代碼沒有發生改變，那么這個哈希值還是一樣的不會改變，網頁就會從瀏覽器中拉取內存信息，進行加載。

2. 解決舊版本問題

以上內容呢，如果發生在一些比較低的 webpack 版本，是不能生效的。所以我們需要進行一個配置，來兼容低版本問題。我們在 webpack.common.js 下進行配置，具體代碼如下：

module.exports = {optimazation: {runtimeChunk: {name: 'runtime'} } }

?七、Shimming的作用

1. Shimming墊片

繼續，現在我們來了解一下在 webpack 中， shimming ，即墊片的概念。

在 webpack 的打包過程中呢，我們往往要做一些代碼上或者打包過程上的兼容。

比如，對于兩個 js 文件來說，模塊和模塊之間是相互獨立的，他們之間是沒有耦合度的。假設我們現在有兩個文件，具體代碼如下：

jquery.ui.js:

export function ui(){$('body').css('background', 'red'); }

index.js:

import _ from 'lodash'; import $ from 'jquery';import { ui } from './jquery.ui';ui();const dom = $('<div>'); dom.html(_.join(['Mondady', 'Tuesday']), '~'); $('body').append(dom);

大家可以看到，現在我們想要在 index.ui.js 文件中引入 $ ，但是在這個文件中，它并沒有引入 jquery 這個庫。所以，如果就這樣子直接運行，是肯定的會報錯的。

因此，如果我們想要解決這個問題，該怎么進行配置呢？

下面我們將對 webpack.common.js 進行配置。具體代碼如下：

const webpack = require('webpack');module.exports = {plugins: [new webpack.ProvidePlugin({$: 'jquery',//'_': 'lodash',//_join: ['lodash', 'join']})] }

所以，這間接的可以理解為，拿點東西把 $ 墊上，也就有了我們標題說的 shimming ，墊片的概念。

2. this指向

對于項目中的文件來說，其 this 的指向都是指向模塊本身，而不是指向全局。那我們如果想讓項目中的所有 js 文件都指向全局，該怎么處理呢？

第一步： 安裝 loader 。具體命令如下：

npm install imports-loader --save-dev

第二步： 配置 webpack.common.js 。具體代碼如下：

module.exports = {module: {rules: [{test: /\.m?js$/,exclude: /node_modules/,use: [{loader: "babel-loader",},{loader: 'imports-loader?this=>window'}]}]} }

通過配置 imports-loader 以后， webpack 表明，它將會把 js 文件中的 this 指向全部指向 window 全局中。

🎖?八、結束語

在今天的文章中，我們學習了使用 Tree Shaking 來優化代碼的打包大小，同時，學習了 Dev 和 Prod 環境下的區分打包，需要明確在這兩個模式下各自相同的配置以及不同的配置，分清楚他們之間的關系。

除此之外呢，我們還學會了使用 webpack 來對 js 文件和 css 文件進行代碼分割。以及使用 webpack 來對代碼進行打包分析和提前加載 preloading 。

最后，我們還學會了關于 webpack 如何開啟瀏覽器緩存，以及墊片 Shimming 的作用。

關于 webpack 的基礎特性和高級特性講到這里就結束啦！希望對大家有幫助~

如有疑問或文章有誤歡迎評論區留言💬或加vx: MondayLaboratory 交流~😉

本文代碼已上傳至公眾號，后臺回復關鍵詞 webpack 即可獲取~

🐣彩蛋 One More Thing

(：往期推薦

• webpack基礎知識系列

• vuejs基礎知識系列

(：番外篇

• 關注公眾號星期一研究室，第一時間關注優質文章，更多精選專欄待你解鎖~

• 如果這篇文章對你有用，記得留個腳印jio再走哦~

• 以上就是本文的全部內容！我們下期見！👋👋👋

總結

以上是生活随笔為你收集整理的webpack入门核心知识还看不过瘾？速来围观万字入门进阶知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。