資訊專欄INFORMATION COLUMN
摘要：該插件的作用是為組件分配，通過這個(gè)插件會(huì)分析使用頻率最多的模塊，并未他們分配最小的，越小表示模塊被找到的速度會(huì)更快使用方法用于抽取公共的模塊
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
當(dāng)啟動(dòng)webpack時(shí)，會(huì)使瀏覽器打開指定頁(yè)面
var OpenBrowserPlugin = require("open-browser-webpack-plugin");
plugins: [
new OpenBrowserPlugin({ url: "http://localhost:8080" })
]
html-webpack-plugin
這個(gè)插件的作用是依據(jù)一個(gè)簡(jiǎn)單的模板，幫你生成最終的html文件，這個(gè)文件中自動(dòng)引用了打包后的js文件。
webpack.ProvidePlugin如果項(xiàng)目中需要使用jQuery類似的工具，難道需要在每一個(gè)文件中都加入require("jquery")嗎？使用webpack.ProvidePlugin,可以使jquery變成全局變量，這樣在項(xiàng)目的任何地方都可以直接使用
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jquery"
})
webpack.BannerPlugin
這個(gè)插件的作用是給輸出文件添加注釋頭。
使用方法
new webpack.BannerPlugin("Copyright by yanxin")
這樣在打包生成的文件中都會(huì)包含上面的版權(quán)信息
webpack.optimize.UglifyJsPlugin用于代碼的壓縮
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
webpack.HotModuleReplacementPlugin
該插件允許你在修改組件代碼后，自動(dòng)刷新實(shí)時(shí)預(yù)覽修改后的效果。
webpack.optimize.OccurenceOrderPlugin該插件的作用是為組件分配id，通過這個(gè)插件webpack會(huì)分析使用頻率最多的模塊，并未他們分配最小的id，id越小表示模塊被找到的速度會(huì)更快
使用方法：
new webpack.optimize.OccurenceOrderPlugin()webpack.optimize.CommonsChunkPlugin
用于抽取公共的模塊
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83593.html
摘要：從打包后的文件中提取出特定的內(nèi)容到一個(gè)新的文件中，需要配合使用，由指定提取文件的路徑提取文件，使其變成代碼。在打包過程中會(huì)將代碼中資源的原始路徑替換成資源的新路徑在打包文件夾下資源的路徑。 less-loader 處理代碼中引入的less文件，通過對(duì)應(yīng)的less模塊，將less轉(zhuǎn)變?yōu)閏ss css-loader 通過css-loader，使得在css中能夠使用@import和url(....
摘要：基本環(huán)境搭建就不展開講了一插件篇自動(dòng)補(bǔ)全前綴官方是這樣說的，也就是說它是一個(gè)自動(dòng)檢測(cè)兼容性給各個(gè)瀏覽器加個(gè)內(nèi)核前綴的插件。 上一篇博客講解了webpack環(huán)境的基本，這一篇講解一些更深入的內(nèi)容和開發(fā)技巧?；经h(huán)境搭建就不展開講了showImg(http://static.xiaomo.info/images/webpack.png); 一、插件篇 1. 自動(dòng)補(bǔ)全css3前綴 autop...
摘要：面試你一般問你的原理，的原理，你有用那些優(yōu)化措施前端開發(fā)已經(jīng)模塊化，它改進(jìn)了代碼庫(kù)的封裝和結(jié)構(gòu)。這么說負(fù)責(zé)的是處理源文件的如，一次處理一個(gè)文件。小心的運(yùn)用他們。因?yàn)殡S著項(xiàng)目的增長(zhǎng)，它們會(huì)變得很難馴服。 還是以前一樣，有些概念面試可能會(huì)考，我都用*標(biāo)記了出來，兩句話就總結(jié)清楚其余的地方如果你想了解webpack，就仔細(xì)看看，雖然本教程不能讓你webpack玩的很6，但是懂操作流程夠了。面...
摘要：完整專題上一篇已經(jīng)介紹了編寫插件所需要了解的基礎(chǔ)知識(shí)，這篇我們就開始編寫插件了。如字面意思，他們分別代表了節(jié)點(diǎn)數(shù)據(jù)父節(jié)點(diǎn)群數(shù)據(jù)?？吹竭@里你已經(jīng)可以動(dòng)手開始嘗試寫一個(gè)插件了。使用上述文件目錄結(jié)構(gòu)為在中編寫程序。 完整專題：http://www.codefrom.com/p/Babel.js 上一篇已經(jīng)介紹了編寫babel.js插件所需要了解的基礎(chǔ)知識(shí)，這篇我們就開始編寫babe...
閱讀 3542·2021-10-09 09:41
閱讀 2745·2021-10-08 10:18
閱讀 2183·2021-09-10 10:51
閱讀 2680·2021-09-10 10:50
閱讀 776·2021-09-09 09:33
閱讀 3383·2021-09-06 15:14
閱讀 3017·2019-08-30 11:06
閱讀 3248·2019-08-29 14:04
