webpack4使用筆記之plugin

ymyang 發(fā)布于2019-08-23 14:57 / 2026人閱讀

摘要：默認為根據自己的指定的模板文件來生成特定的文件主要是針對多入口文件。那么選項就可以決定是否都使用這些生成的文件。壓縮壓縮通過使用可以看到項目各模塊的大小，可以按需優(yōu)化圖片來自于的

webpack4 常用plugin

clean-webpack-plugin

html-webpack-plugin

mini-css-extract-plugin

terser-webpack-plugin(webpack4內置)

optimize-css-assets-webpack-plugin

webpack-bundle-analyzer

clean-webpack-plugin

清除文件插件

new cleanWebpackPlugin(
  [resolve("dist"), resolve("build")], {
    root: __dirname,
    exclude:  ["test.html"], // 排除
    verbose: true, // Write logs to console.
    dry: false,    // Use boolean "true" to test/emulate delete. (will not remove files).
    watch: false,     // If true, remove files on recompile. 
    beforeEmit: false // 在將文件發(fā)送到輸出目錄之前執(zhí)行清理
})

html-webpack-plugin

自動幫你生成一個 html 文件，并且引用相關的 assets 文件(如 css, js)。

如果你既指定了 template 選項，又指定了 title 選項，那么webpack 會選擇哪一個？事實上，這時候會選擇你指定的模板文件的 title, 即使你的模板文件中未設置 title。

new htmlWebpackPlugin({
    title: "testooo", // html 文件的標題
    filename: "detail.html", // 生成 html 文件的文件名。默認為 index.html.
    template: `./src/detail.html`, // 根據自己的指定的模板文件來生成特定的 html 文件
    chunks: ["index", "vendor"], // 主要是針對多入口(entry)文件。當你有多個入口文件的時候，對應就會生成多個編譯后的 js 文件。那么 chunks 選項就可以決定是否都使用這些生成的 js 文件。默認引用所有
    inject: "body",  // true默認值，script標簽位于html文件的 body 底部 注入選項 
    hash: true, //  hash選項的作用是 給生成的 js 文件一個獨特的 hash 值 xx.js?xxxxxx
    // 對 html 文件進行壓縮
    minify: {
      removeAttributeQuotes:true,
      removeComments: true,
      collapseWhitespace: true,
      removeScriptTypeAttributes:true,
      removeStyleLinkTypeAttributes:true
   }
})

mini-css-extract-plugin

分離css: 此插件將CSS提取到多帶帶的文件中。

它為每個包含CSS的JS文件創(chuàng)建一個CSS文件。它支持CSS和SourceMaps的按需加載。

extract-text-webpack-plugin ，只支持 webpack 4 以下提取 CSS 文件, webpack 4以上用mini-css-extract-plugin

terser-webpack-plugin(webpack4內置)

webpack 4 中刪除了 webpack.optimize.CommonsChunkPlugin,并且使用 optimization 中的splitChunk來替代,下面的配置代替了之前的 CommonsChunkPlugin 配置，同意能提取 JS 和 CSS 文件

壓縮的配置也移動到了 optimization 選項下，值得注意的是壓縮工具換成了 terser-webpack-plugin，這是 webpack 官方也推薦使用的

module.exports = {
    optimization: {
        splitChunks: {
          vendors: {
            name:  "venders",
            chunks:  "all",
            minChunks: chunks.length
        }
      }
}

optimize-css-assets-webpack-plugin

webpack5很可能會內置css壓縮,為了壓縮輸出，可使用optimize-css-assets-webpack-plugin插件。

默認只壓縮js，所以通過設置optimization.minimizer覆蓋默認的壓縮配置，應確保指定了一個JS的壓縮配置, 否則默認配置就被覆蓋了，就不再壓縮js了。

類似extract-text-webpack-plugin，通過optimization.splitChunks.cacheGroups可以將css提取到一個文件中。

module.exports = {
    minimizer: [
      new terserPlugin({ // 壓縮js
        cache:  true,
        parallel:  true
      }),
      new optimizeCSSAssetsPlugin({ // 壓縮css
        cssProcessorOptions: {
          safe: true
        }
      })
    ],
    optimization: {
        cacheGroups: {
            styles: {            
              name: "styles",
              test: /.scss|css$/,
              chunks: "all",    // merge all the css chunk to one file
              enforce: true
            }
          }
      }
}

webpack-bundle-analyzer

通過使用webpack-bundle-analyzer可以看到項目各模塊的大小，可以按需優(yōu)化

圖片來自于webpack-bundle-analyzer的github

GPU云服務器云服務器云服務器多人獨之使用 webpack4 webpack4教程 plugins

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101401.html

webpack4搭建Vue開發(fā)環(huán)境筆記~~持續(xù)更新

摘要：項目地址一知識獲取當前文件所在路徑，等同于把一個路徑或路徑片段的序列解析為一個絕對路徑給定的路徑的序列是從右往左被處理的，后面每個被依次解析，直到構造完成一個絕對路徑如果處理完全部給定的片段后還未生成一個絕對路徑，則當前工作目錄會被用上生成項目git地址一、node知識 __dirname: 獲取當前文件所在路徑，等同于path.dirname(__filename) consol...

hankkin 2019-08-23 13:01 評論0 收藏0
webpack4配置詳解之逐行分析

摘要：今天就嘗試著一起來聊聊吧，旨在幫大家加深理解新手更容易上路，都能從到搭建配置自定屬于自己的腳手架，或對已封裝好的腳手架有進一步的鞏固，接下來蘇南會詳細講解中的每一個配置字段的作用部分為新增。 showImg(https://segmentfault.com/img/bVbjmMV?w=1008&h=298); 前言　　經常會有群友問起webpack、react、redux、甚至cre...

dkzwm 2019-08-23 13:04 評論0 收藏0
webpack4配置之分享幾個常用插件

摘要：去做想做的事，去愛值得的人去成為自己喜歡的模樣，去讓自己發(fā)光渾身充滿力量，充實的日子最美好各位早安，這里是平頭哥聯盟，我是首席填坑官蘇南，用心分享一起成長做有溫度的攻城獅。 showImg(https://segmentfault.com/img/bVbjIcs?w=1008&h=298); 前言　　繼上一次webpack的基礎配置分享之后，本次將分享一些工作中項目常用的配置插件、也...

Jackwoo 2019-08-26 13:24 評論0 收藏0
webpack 基礎與項目優(yōu)化實踐總結

摘要：前言本文基于，主要涉及基本概念基本配置和實際項目打包優(yōu)化。關于概念方面參考官網，常用配置來自于網絡資源，在文末有相關參考鏈接，實踐部分基于自己的項目進行優(yōu)化配置。同一文件中，修改某個影響其他。前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實際項目打包優(yōu)化。關于概念方面參考官網，常用配置來自于網絡資源，在文末有相關參考鏈接，實踐部分基于自己的項目進行...

Scorpion 2019-08-23 18:15 評論0 收藏0
為什么我不推薦你使用vue-cli創(chuàng)建腳手架？

摘要：后來經過排查你會發(fā)現是由于目前還沒有版本。可以使用該方式解決。這就是我為什么不推薦你使用創(chuàng)建腳手架的原因此文的受眾是想要進階中級的初級前端人員。最近在知乎看到一個問題，原問題如下：很奇怪，為什么現在能找到自己手動創(chuàng)建vue腳手架的文章非常少，而且大家似乎對webpack4的熱情并不高，對于想基于vue2.0+webpack4搭建一個腳手架的我來說資料真是少得可憐。難道現在一般的做...

trigkit4 2019-08-22 16:09 評論0 收藏0