国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

20170622-webpack之plugin篇

Dean / 2330人閱讀

摘要：該插件的作用是為組件分配，通過這個插件會分析使用頻率最多的模塊，并未他們分配最小的，越小表示模塊被找到的速度會更快使用方法用于抽取公共的模塊

extract-text-webpack-plugin

extract-text-webpack-plugin主要是為了抽離css樣式,并將樣式打包成css文件

const ExtractTextPlugin = require("extract-text-webpack-plugin");
...
module: {
    rules: [
        {
            test: /.less$/,
            use: ExtractTextPlugin.extract({
                use: ["css-loader","less-loader"],
                fallback: "style-loader"
            })
        },
        {
            test: /.css$/,
            use: ExtractTextPlugin.extract({
                use: ["css-loader"],
                fallback: "style-loader"
            })
        }
    ]
},
plugins: [
    new ExtractTextPlugin("bundle/css/[name].css")
]
open-browser-webpack-plugin

當啟動webpack時，會使瀏覽器打開指定頁面

var OpenBrowserPlugin = require("open-browser-webpack-plugin");

plugins: [
    new OpenBrowserPlugin({ url: "http://localhost:8080" })
]
html-webpack-plugin

這個插件的作用是依據一個簡單的模板，幫你生成最終的html文件，這個文件中自動引用了打包后的js文件。

webpack.ProvidePlugin

如果項目中需要使用jQuery類似的工具，難道需要在每一個文件中都加入require("jquery")嗎？使用webpack.ProvidePlugin,可以使jquery變成全局變量，這樣在項目的任何地方都可以直接使用

new webpack.ProvidePlugin({
    $: "jquery",
    jquery: "jquery"
})
webpack.BannerPlugin

這個插件的作用是給輸出文件添加注釋頭。

使用方法

new webpack.BannerPlugin("Copyright by yanxin")

這樣在打包生成的文件中都會包含上面的版權信息

webpack.optimize.UglifyJsPlugin

用于代碼的壓縮

new webpack.optimize.UglifyJsPlugin({
    compress: {
        warnings: false
    }
})
webpack.HotModuleReplacementPlugin

該插件允許你在修改組件代碼后，自動刷新實時預覽修改后的效果。

webpack.optimize.OccurenceOrderPlugin

該插件的作用是為組件分配id，通過這個插件webpack會分析使用頻率最多的模塊，并未他們分配最小的id，id越小表示模塊被找到的速度會更快

使用方法：

new webpack.optimize.OccurenceOrderPlugin()
webpack.optimize.CommonsChunkPlugin

用于抽取公共的模塊

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

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

相關文章

  • 20170622-webpack之loader篇

    摘要：從打包后的文件中提取出特定的內容到一個新的文件中，需要配合使用，由指定提取文件的路徑提取文件，使其變成代碼。在打包過程中會將代碼中資源的原始路徑替換成資源的新路徑在打包文件夾下資源的路徑。 less-loader 處理代碼中引入的less文件，通過對應的less模塊，將less轉變為css css-loader 通過css-loader，使得在css中能夠使用@import和url(....

    付永剛 評論0 收藏0

  • webpack進階之插件篇

    摘要：基本環境搭建就不展開講了一插件篇自動補全前綴官方是這樣說的，也就是說它是一個自動檢測兼容性給各個瀏覽器加個內核前綴的插件。 上一篇博客講解了webpack環境的基本，這一篇講解一些更深入的內容和開發技巧?；经h境搭建就不展開講了showImg(http://static.xiaomo.info/images/webpack.png); 一、插件篇 1. 自動補全css3前綴 autop...

    Tonny 評論0 收藏0

  • 前端面試之webpack篇

    摘要：面試你一般問你的原理，的原理，你有用那些優化措施前端開發已經模塊化，它改進了代碼庫的封裝和結構。這么說負責的是處理源文件的如，一次處理一個文件。小心的運用他們。因為隨著項目的增長，它們會變得很難馴服。 還是以前一樣，有些概念面試可能會考，我都用*標記了出來，兩句話就總結清楚其余的地方如果你想了解webpack，就仔細看看，雖然本教程不能讓你webpack玩的很6，但是懂操作流程夠了。面...

    cangck_X 評論0 收藏0

  • Babel.js插件開發之二 - 開始編寫

    摘要：完整專題上一篇已經介紹了編寫插件所需要了解的基礎知識，這篇我們就開始編寫插件了。如字面意思，他們分別代表了節點數據父節點群數據。看到這里你已經可以動手開始嘗試寫一個插件了。使用上述文件目錄結構為在中編寫程序。 完整專題：http://www.codefrom.com/p/Babel.js 上一篇已經介紹了編寫babel.js插件所需要了解的基礎知識，這篇我們就開始編寫babe...

    focusj 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<