成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webpack4使用筆記之plugin

ymyang / 2033人閱讀

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

webpack4 常用plugin 
clean-webpack-plugin


html-webpack-plugin


mini-css-extract-plugin


terser-webpack-plugin(webpack4內(nèi)置)


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

自動(dòng)幫你生成一個(gè) html 文件，并且引用相關(guān)的 assets 文件(如 css, js)。

如果你既指定了 template 選項(xiàng)，又指定了 title 選項(xiàng)，那么webpack 會(huì)選擇哪一個(gè)？ 事實(shí)上，這時(shí)候會(huì)選擇你指定的模板文件的 title, 即使你的模板文件中未設(shè)置 title。

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

mini-css-extract-plugin

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

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

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

terser-webpack-plugin(webpack4內(nèi)置)

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

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

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

optimize-css-assets-webpack-plugin

webpack5很可能會(huì)內(nèi)置css壓縮,為了壓縮輸出，可使用optimize-css-assets-webpack-plugin插件。

默認(rèn)只壓縮js，所以通過(guò)設(shè)置optimization.minimizer覆蓋默認(rèn)的壓縮配置，應(yīng)確保指定了一個(gè)JS的壓縮配置, 否則默認(rèn)配置就被覆蓋了，就不再壓縮js了。

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

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

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


圖片來(lái)自于webpack-bundle-analyzer的github

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101401.html

相關(guān)文章

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

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

    hankkin 評(píng)論0 收藏0

  • webpack4配置詳解之逐行分析

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

    dkzwm 評(píng)論0 收藏0

  • webpack4配置之分享幾個(gè)常用插件

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

    Jackwoo 評(píng)論0 收藏0

  • webpack 基礎(chǔ)與項(xiàng)目?jī)?yōu)化實(shí)踐總結(jié)

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

    Scorpion 評(píng)論0 收藏0

  • 為什么我不推薦你使用vue-cli創(chuàng)建腳手架？

    摘要：后來(lái)經(jīng)過(guò)排查你會(huì)發(fā)現(xiàn)是由于目前還沒(méi)有版本?？梢允褂迷摲绞浇鉀Q。這就是我為什么不推薦你使用創(chuàng)建腳手架的原因此文的受眾是想要進(jìn)階中級(jí)的初級(jí)前端人員。 最近在知乎看到一個(gè)問(wèn)題，原問(wèn)題如下： 很奇怪，為什么現(xiàn)在能找到自己手動(dòng)創(chuàng)建vue腳手架的文章非常少，而且大家似乎對(duì)webpack4的熱情并不高，對(duì)于想基于vue2.0+webpack4搭建一個(gè)腳手架的我來(lái)說(shuō)資料真是少得可憐。難道現(xiàn)在一般的做...

    trigkit4 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

ymyang

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<