webpack4配置詳解之常用插件分享

来源:https://www.cnblogs.com/susouth/archive/2018/12/03/10057778.html
-Advertisement-
Play Games

"前言" 繼上一次webpack的基礎配置分享之後，本次將分享一些工作中項目常用的配置插件、也會包含一些自己瞭解過覺得不錯的插件，如有分析不到位的，歡迎糾錯， 嗯，這些東西文檔都有，大佬可繞過 。 Wepack4之後廢棄了很多的插件，這裡只會講解webpack4還支持的（ ），已經廢棄的將不再闡述。 ...


本文由@IT·平頭哥聯盟-首席填坑官∙蘇南 分享，公眾號：honeyBadger8，webpack4，從0配置到項目搭建

前言

　　繼上一次webpack的基礎配置分享之後，本次將分享一些工作中項目常用的配置插件、也會包含一些自己瞭解過覺得不錯的插件，如有分析不到位的，歡迎糾錯，嗯，這些東西文檔都有，大佬可繞過。

　　Wepack4之後廢棄了很多的插件，這裡只會講解webpack4還支持的（包含4之前插件），已經廢棄的將不再闡述。

　　上一次的分享之後，有部分網友留言質疑：騙小白的贊、是否原創、是否是抄別人等等，當然也有很多的網友支持和鼓勵，不管褒貶，蘇南都非常的感謝，是你們讓我認識到自己的不足與優劣。

　　大家的留言，讓我想起了自己剛入門前端初期的心酸，基本靠自己自學，沒有人帶，遇到問題像無頭的蒼蠅，到處亂撞網上一頓搜索，百度不曾欺我，在點了一個又一個的廣告之後，翻過十頁八頁之後終於找到了問題的解決方案。

　　執著於對前端的熱愛，常常一個問題卡到深夜，初入前端的我曾一度感嘆在編輯器寫一些東西，在網頁上就能跑，甚至感嘆 js 寫上一個 alert hello world，瀏覽器就會自動彈出一個視窗，感覺全世界都在向你招手，當時的興奮是難以形容的，甚至幻想著未來有一天，可能有千萬、億萬的用戶，在用你寫的東西。

　　這幾天一直在想，這篇插件的總結還是否要繼續寫下去？從寫博客到今天，將近兩個月吧，也算是一個新人，技術方面雖說工作了幾年，但也不敢說多牛B，寫博客的初衷是為了對自己工作中遇到的問題/心得等做一個總結，俗話說：好記性不如爛筆頭；同時也希望能把自己遇到的問題、坑點分享給他人，讓遇到同樣問題的基友們能少走那麼一點點彎路。

　　終於最後在想了很久之後明白，人無完人，百人百性、千人千面，不管你做總會有不同的聲音，同樣不管你分享什麼，總會有人需要。所以走自己的路，讓別人打車吧，堅持自己所想 努力成為自己想成為的樣子，就是對自己最大的肯定 ———— 至曾經初入前端的我們。

  • 去做想做的事，去愛值得的人；
  • 去成為自己喜歡的模樣，
  • 去讓自己發光！渾身充滿力量，
  • 充實的日子最美好！

各位早安，這裡是@IT·平頭哥聯盟，我是首席填坑官∙蘇南，用心分享 一起成長 做有溫度的攻城獅。

公眾號：honeyBadger8，群：912594095

mini-css-extract-plugin

  • css-提取，看名字就懂提取css用的。
  • 在這之前我們可能會使用extract-text-webpack-plugin比較多一些，兩者相比它有什麼優勢呢？
  • extract-text-webpack-plugin 它對css的提取，最終是根據你創建的實例、或者配置多個入口 chunk來的，
  • 比如你配置了一個入口文件，最終所有的css都會提取在一個樣式文件里，
  • 如果你創建了多個extract-text-webpack-plugin實例，則會生成多個css的文件，
  • 而mini-css-extract-plugin，它預設就會對你的樣式進行模塊化拆分，嗯，有點跟output里的配置一個意思，非同步按需載入，不再僅僅是js的特權;
    兩者編譯結果進行比較，公眾號：honeyBadger8
//extract-text-webpack-plugin 編譯打包
config.module.rules.push({
  test: /\.(scss|css)$/,
  use: ExtractTextPlugin.extract({
    use: [
      "css-loader",
      { //首席填坑官∙蘇南的專欄 交流：912594095、公眾號：honeyBadger8
        loader: 'postcss-loader',
        options: {
          plugins: [
            require('autoprefixer')({ //添加首碼
              browsers: CSS_BROWSERS,
            }),
          ],
          minimize: true
        },
      },
      "sass-loader"
    ]
  })
})
config.plugins.push(new ExtractTextPlugin({
  filename: 'css/[name].css',
  disable: false,
  allChunks: true,
}));


//mini-css-extract-plugin  編譯打包
config.module.rules.push({
  test: /\.(scss|css)$/,//同時處理css/scss
    use: [
      {
        loader: MiniCssExtractPlugin.loader,
      },
      "css-loader", //css處理器
      {
        loader: 'postcss-loader',
        /*
            postcss 這個插件的作用在於，與已有的工具集成一起使用，很少有單獨使用的情況，
            通用我們用的最多的，是配合 autoprefixer 來添加各瀏覽器的首碼，以達到更好的相容，
            再深入一些就是 cssnext 就是允許開發者自定義屬性和變數 ：     color:var(--theme-color,#42b983);
        */
        options: {
          plugins: [
            require('autoprefixer')({ 
              browsers: CSS_BROWSERS,
            }),
          ],
        },
      },
      "sass-loader" //sass處理器 、甚至還可以再加一個less的處理器
    ]
})

config.plugins.push(new MiniCssExtractPlugin({
  filename: 'css/[name].css', //這裡配置跟output寫法一致
  chunkFilename: 'css/[id][chunkhash:8].css',
}));
config.plugins.push(new OptimizeCssAssetsPlugin({})); //壓縮文件

optimize-css-assets-webpack-plugin

  • 上面的示例里已經用到了，它的作用在於壓縮css文件，
  • assetNameRegExp：預設是全部的css都會壓縮，該欄位可以進行指定某些要處理的文件，
  • cssProcessor：指定一個優化css的處理器，預設cssnano，
  • cssProcessorPluginOptions：cssProcessor後面可以跟一個process方法，會返回一個promise對象，而cssProcessorPluginOptions就是一個options參數選項！
  • canPrint：布爾，是否要將編譯的消息顯示在控制台，沒發現有什麼用！
  • 坑點 ：建議使用高版本的包，之前低版本有遇到樣式丟失把各瀏覽器首碼幹掉的問題，
new OptimizeCssAssetsPlugin({
  assetNameRegExp: /\.optimize\.css$/g,
  cssProcessor: require('cssnano'),
  cssProcessorPluginOptions: {
    preset: ['default', { discardComments: { removeAll: true } }],
    //autoprefixer: { browsers: CSS_BROWSERS }, 也是可以指定首碼的
  },
  canPrint: true
})

SplitChunksPlugin、RuntimeChunkPlugin

  • 它們跟上一篇的optimization配置下的的splitChunks、runtimeChunk基本是一致的，；
  • SplitChunksPlugin、RuntimeChunkPlugin，其實就是webpack4之前CommonsChunkPlugin的替代品，用於提取一些公共模塊；
  • chunks：要進行處理的類型，它有三個值：all,async,initial
  • minSize：最少大小
  • maxSize：最大包的大小，超出生成新的包
  • minChunks：至少要引用N次的模塊，
  • maxAsyncRequests：最大的按需載入並行請求數量
  • maxInitialRequests：最大的初始化載入請求次數
new webpack.optimize.SplitChunksPlugin({
        chunks: 'async', 
      minSize: 30000, 
      maxSize: 0, 
    minChunks: 1,  
      maxAsyncRequests: 1,
        maxInitialRequests:1, 
    name: true, //可以指定
    ……,

  }),
  new webpack.optimize.RuntimeChunkPlugin({
    name: 'manifest',
    name: entrypoint => `runtimechunk~${entrypoint.name}` //動態文件名
  })

HotModuleReplacementPlugin

  • 熱更新替換，在不刷新重載頁面的情況下更換編輯修改後的代碼：
  • 它只會更新改動過的內容，所以速度很快，幾乎在自己剛改完，切到瀏覽器視窗內容就已經更新完了；
  • 使用 HotModuleReplacementPlugin插件後，它會暴露一個module.hot對象，它下麵有很多的屬性：
  • accept：它有兩個參數，一個是授權模塊(可以直接是單個文件路徑、也可以是一個數組包含多個文件路徑)，第二個參數，是回調函數，即更新後要做的邏輯處理。
  • decline 有點黑名單的意思，就是忽略一些模塊，不更新它們，
  • status 當前更新的狀態，idle、check、prepare、ready、dispose、apply、fail等；
  • 一般只用到 accept 最多，下麵有個示例；

以上為自定配置中使用頻率較高的選項


//webpack config
plugins:[
    new webpack.HotModuleReplacementPlugin()
]

//路由入口頁
……
if (module.hot) {
    module
        .hot
        .accept([
            './pages/routes'
        ], (err) => {
            const NextRoute = require('./pages/routes')
            // 從DOM 中移除已經掛載的 React 組件 然後重裝
            ReactDOM.unmountComponentAtNode(APP_DOM);
            ReactDOM.render(
                <Provider store={Store}>
                    <Router routes={NextRoute} history={browserHistory}/>
                </Provider>, APP_DOM);
        });
}
……

html-webpack-plugin

  • 這個插件相信大家都熟悉的不能再熟悉了,
  • 把編譯後的文件（css/js）插入到入口文件中，可以只指定某些文件插入，可以對html進行壓縮等
  • filename：輸出文件名；
  • template：模板文件，不局限於html尾碼哦；
  • removeComments：移除HTML中的註釋；
  • collapseWhitespace：刪除空白符與換行符，整個文件會壓成一行；
  • inlineSource：插入到html的css、js文件都要內聯，即不是以link、script的形式引入；
  • inject：是否能註入內容到 輸出 的頁面去；
  • chunks：指定插入某些模塊；
  • hash：每次會在插入的文件後面加上hash ，用於處理緩存，如：；
  • 其他：favicon、meta、title ……；

new HtmlWebPackPlugin({
  filename: path.resolve(__dirname, '../assets/index.html'), 
  template: path.resolve(__dirname,"../views/temp.html"),
  minify:{ //壓縮HTML文件　
　　removeComments:true, 
　　collapseWhitespace:true 
    },
  inlineSource:  '.(js|css)',
  inject: false,
    chunks: ['vendors', 'index'], //首席填坑官∙蘇南的專欄
    hash:true, 
    favicon、meta、title等都可以配置，頁面內使用「<%= htmlWebpackPlugin.options.title %>」即可
    ……
})

uglifyjs-webpack-plugin

  • js代碼壓縮,預設會使用 optimization.minimizer，
  • cache: Boolean/String ,字元串即是緩存文件存放的路徑；
  • test：正則表達式、字元串、數組都可以，用於只匹配某些文件，如：/.js(?.*)?$/i;
  • parallel : 啟用多線程並行運行來提高編譯速度，經常編譯的時候聽到電腦跑的呼呼響，可能就是它乾的，哈哈～；
  • output.comments ： 刪除所有註釋，
  • compress.warnings ：插件在進行刪除一些無用代碼的時候，不提示警告，
  • compress.drop_console：喜歡打console的同學，它能自動幫你過濾掉，再也不用擔心線上還列印日誌了；
  • 等等還有一些如：定義壓縮的程度、提出多次出現但沒有變數的值的配置，想深入的同學可移步官方；

//預設：
optimization:{
    minimizer:true
};

//自定義
minimizer: [
  new UglifyJsPlugin({
    cache: true,
    // cache: "assets", 
    parallel: true, //也可以指定 Number ,即最多並行運行數量
    sourceMap: true,
    uglifyOptions: {
      output: {
        comments: false,
        …… //首席填坑官∙蘇南的專欄，QQ:912594095
      },
      compress: {
          warnings: false,
          drop_console:true,
          …… 
        }
    },
  }),
],

BannerPlugin

  • 這個插件，它的作用在於某些時候，我們需要對文件添加一些說明，比如版本號，作者、日期等，
  • 它就可以幫到，每次編譯，在頭部插件一些註釋；
  • 它可以直接是一個字元串，也可以是一個options;
  • 嗯，差點忘說了，它是webpack自帶的一個插件，不用另外再安裝依賴，

以上為自定配置中使用頻率較高的選項，公眾號：honeyBadger8


//字元串：
new webpack.BannerPlugin('給文件添加一些信息，打包日期：'+ new Date());

//自定義
plugins: [
  new webpack.BannerPlugin({
    {
          banner: ' \n @item:蘇南的項目 \n @author:suSouth \n @date:'+new Date()+' \n @description:蘇南的項目 \n @version:'+package.version+'  \n', // 要輸出的註釋內容
          test:string/正則/數組，//可用於匹配某些文件才輸出，
          entryOnly: boolean, // 即是否只在入口 模塊 文件中添加註釋；
          ……
        }
  })
],

preload-webpack-plugin

  • 在使用這個插件之前，我們需要先瞭解一下 preload、prefetch，從字面意思上講：預載入，
  • 不難理解，就是提前載入資源(匹配其他頁面可能用到的資源進行預先，從而達到無loading ，用戶無感知的跳轉)，它的使用也非常的簡單，在你要進行預載入的資源上添加 rel="preload"標簽即可；
  • 示例：
  • 而preload-webpack-plugin它的作用就是在編譯打包的時候，幫我們把以上的操作都做了，
  • 編譯完成後，你可以（指定某些/全部）文件動態插入到 HtmlWebPackPlugin 配置輸出的文件內，
  • as： 表示你預載入的資源類型；可以有有先多：script、font、image、style、video等等，更多詳細請查看API，它還可以返回function；
  • include：要插入，進行預載入的文件，它有：allChunks、initial、asyncChunks、數組等選項，數組即表示指定插入某些文件
  • fileBlacklist:即文件黑名單，可以指定某個文件，也可以使用正則來匹配；

以上為自定配置中使用頻率較高的選項，公眾號：honeyBadger8


//註意點1：請把配置一定寫在HtmlWebPackPlugin插件之後，否則會報`HtmlWebpackPlugin.getHooks is not a function`錯誤，
//註意點2：webpack4之後，請使用最新版本 npm install --save-dev preload-webpack-plugin@next，

new PreloadWebpackPlugin({
  rel: 'prefetch',
  as: 'script',
  // as(entry) {
  //   if (/\.css$/.test(entry)) return 'style';
  //   return 'script';//首席填坑官∙蘇南的專欄，QQ:912594095
  // },
  include: 'asyncChunks',
  // fileBlacklist: ["index.css"]
  fileBlacklist: [/\index.css|index.js|vendors.js/, /\.whatever/]
})

webpack-bundle-analyzer

  • 這個插件還是蠻棒的，強烈推薦可以看看，也是本次分享的最後一個插件
  • 它的作用在於能幫我們很清晰直觀的看到，你編譯後的每一個、每一個文件哦，內容的分佈組成，有利於我們快速查找包過大、內容是否重覆、問題定位優化等；
  • 它會在編譯完成後，自動啟動一個服務、也可以自定義配置，打開一個可視化視窗，滑鼠移動到對應的模塊上，都可以顯示出，該模塊在某文件內占比的大小及stat、parsed、gzipped等的狀態；
  • analyzerHost、analyzerPort：自定配置打開的地址、埠，預設使用：127.0.0.1:8888
  • reportFilename： 報告生成的路徑，預設以項目的output.path輸出；
  • openAnalyzer：是否要自動打開分析視窗，
  • 其他還有很多屬性，官網也有，這裡只是引導簡介，請大佬們勿噴；

以上為自定配置中使用頻率較高的選項，公眾號：honeyBadger8
以上為自定配置中使用頻率較高的選項，公眾號：honeyBadger8

plugins:[
    new BundleAnalyzerPlugin({...}) //預設配置就很好了，能滿足我們的要求
]

常用的幾個插件地址彙總：

結尾：

　　以上就是今天為大家整理的幾個項目中常用的插件，可能有些地方理解的不是特別到位，歡迎大家補充，同時我也給大家準備了一個整合後完整的webpack配置的示例，如有興趣可自行測試。

　　下一期計劃跟大家一起分享“React如何封裝一個組件”（或者說沉澱一個組件庫）來簡單實戰一下react如何上手？歡迎持續關註，如覺得不錯記得點個贊哦，當然您能動動手指關註下方公眾號就更棒了，謝謝支持！

寶劍鋒從磨礪出，梅花香自苦寒來，做有溫度的攻城獅!，公眾號：honeyBadger8

熱門推薦

作者：蘇南 - 首席填坑官

鏈接：https://blog.csdn.net/weixin_43254766/article/details/83758660

交流：912594095、公眾號：honeyBadger8

本文原創，著作權歸作者所有。商業轉載請聯繫@IT·平頭哥聯盟獲得授權，非商業轉載請註明原鏈接及出處。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前端入門12-JavaScript語法之函數
    聲明 本系列文章內容全部梳理自以下幾個來源： 《JavaScript權威指南》 "MDN web docs" "Github:smyhvae/web" "Github:goddyZhao/Translation/JavaScript" 作為一個前端小白，入門跟著這幾個來源學習，感謝作者的分享，在其基 ...
  • footer固定在頁面底部的實現方法總結
    方法一：footer高度固定+絕對定位 HTML代碼： CSS代碼： 實現的效果： 首先，設置body的高度至少充滿整個屏幕，並且body作為footer絕對定位的參考節點； 其次，設置main（footer前一個兄弟元素）的padding-bottom值大於等於footer的height值，以保證 ...
  • Vue 基礎指令學習
    學習Vue的一些總結，第一次寫博客，文筆實在是很差 不過我會不斷寫的。 這裡只寫了一部分常用的vue的指令，後面還會有的。 ...
  • 08 . 12/3 事件對象
    12.3事件對象 1.每個元素身上的事件都是天生自帶的，不需要我們去定義，只需要我們給這個事件綁定一個方法， 2.事件綁定的寫法 1.div.onclick=function(){} DOM 0級事件綁定 2.div.addEventListener()或div.attachEvent()　DOM2 ...
  • 前端面試題（一）JS篇
    內置類型 JS 中分為七種內置類型，七種內置類型又分為兩大類型：基本類型和對象（Object）。 基本類型有六種： ，`undefined boolean number string symbol`。 其中 JS 的數字類型是浮點類型的，沒有整型。並且浮點類型基於 IEEE 754標準實現，在使用中 ...
  • 上傳文件進度條（筆記）
    參考資料：CSDN-真實的上傳進度條 ...
  • 前端入門11-JavaScript語法之數組
    聲明 本系列文章內容全部梳理自以下幾個來源： 《JavaScript權威指南》 "MDN web docs" "Github:smyhvae/web" "Github:goddyZhao/Translation/JavaScript" 作為一個前端小白，入門跟著這幾個來源學習，感謝作者的分享，在其基 ...
  • react-router的簡單使用
    React Router是一個基於React之上的強大路由庫，可以讓你嚮應用中快速的添加視圖和數據流，同時保持頁面與URL間的同步。 1.安裝： 2.問題說明： 剛開始的時候由於沒有註意到版本信息，導致出現了一些錯誤，現在記錄如下： 這是我package.js中的版本信息， 說明1：react-ro ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類