一、PnpWebpackPlugin
背景
什么是Pnp?Pnp實際是yarn的一個特性，所以說如果你的項目中不使用yarn構建，那就可以不用使用這個插件。其次，即使你使用了yarn，如果不通過文中所述的開啟pnp的方法去啟用pnp，那這個插件對你來說也是無用的。
使用
大家知道webpack的reslove模塊是用來配置模塊解析規則的。如果你的項目中啟用了pnp，那么想象一下，最基本的，就是你沒有node_modules文件夾了。你的所有的依賴配置都會存儲在.pnp.js文件中（實際依賴項安裝在系統根目錄），這就會使得你在項目中使用require或者import模塊時，需要一些區別於普通的webpack引入的方式。PnpWebpackPlugin就可以使你在使用pnp的場景下，讓你免於配置resolve，采用開箱即用的方式，讓你不用擔心你的require和import引入文件的正確性：
const PnpWebpackPlugin = require('pnp-webpack-plugin'); //--webpack配置 resolve:{ plugins: [ PnpWebpackPlugin ] }, resolveLoader:{ plugins: [ PnpWebpackPlugin.moduleLoader(module) ] }
二、ModuleScopePlugin
這個插件為什么放在一起講？因為這個也是reslove配置項中啟用的插件。這個插件功能就比較簡單，就是為了防止用戶引入src目錄之外的文件導致不可預期的結果。因為babel都是通過src目錄內文件進行入口轉義的，如果你引入了src目錄外，例如src1，這樣這個文件就不能經過babel轉義。除非你保證你引入文件已經經過轉義，你可以不使用該插件限制。
const ModuleScopePlugin = require('pnp-webpack-plugin'); //--webpack配置 paths.appSrc 是項目的src路徑 paths.appPackageJson是package.json的路徑 resolve:{ plugins: [ new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]) ] }
加入你引入了這個插件，當你引入src1下的文件時，webpack會拋出如下錯誤：
三、React腳手架webpack自定義
方式1:
npm run eject
此操作不可逆
方式2:
使用react-app-rewired來覆蓋原有的webpack配置
/* config-overrides.js */ module.exports = function override(config, env) { //do stuff with the webpack config... return config; }
文章就分享到這，歡迎關注“前端大神之路”
