資訊專欄INFORMATION COLUMN
摘要：前段時間又發(fā)布了新版本我接觸的時候已經(jīng)版本了支持的版本必須打包速度大小比較以及粗淺的試了一下下圖所示，黃色為版本綠色為我寫的配置，跟基本相似，具體不同下面會介紹藍(lán)色是自帶的模式紅色為具體大小速度大家可以比較一下，還是很給力的關(guān)于配置方面，應(yīng)
前段時間webpack又發(fā)布了新版本webpack4
我接觸的時候已經(jīng)4.1版本了
node支持的版本必須"node": ">=6.11.5"
粗淺的試了一下
下圖所示，黃色為webpack3版本；綠色為我寫的配置，跟webpack3基本相似，具體不同下面會介紹；藍(lán)色是webpack4自帶的production模式；紅色為parcel；
具體大小速度大家可以比較一下，還是很給力的
關(guān)于配置方面，webpack4應(yīng)該說最大的噱頭就是零配置了
webpack4簡單介紹安裝
首先在安裝上，我們照往常一樣
npm i webpack
這里需要注意一點，webpack4需要安裝webpack cli，跟往常不一樣，大家安裝好webpack4以后并不能直接使用，會提示你安裝webpack cli
運行
第一步安裝完之后，我們就可以直接實驗了
這是我的文件目錄，其中webpack.config.js不需要，這是我后面實驗用的，寫上自己的js就可以運行了
webpack4默認(rèn)配置，入口文件默認(rèn)src/index.js，輸出默認(rèn)dist/main.js
下面是我的配置文件，我測試速度寫的，webpack4有默認(rèn)配置
var path = require("path")
var webpack = require("webpack")
module.exports = {
entry: path.resolve("", "./src/index.js"),
output: {
path: path.resolve("", "./dist"),
filename: "[name].js",
},//出口
optimization: {
minimize: true
},
mode: "none",
}
UglifyJs的相關(guān)配置變化
壓縮插件寫法已經(jīng)不一樣了，換成了
optimization: {
minimize: true
},
//原先的寫法，現(xiàn)在會報錯，具體看下圖
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),//代碼壓縮，開發(fā)環(huán)境慎用
]
新增的mode字段，默認(rèn)模式配置
另外，大家看到了，里面有個mode："node"，這個是設(shè)置模式的
production為默認(rèn)生產(chǎn)模式，development為生產(chǎn)模式，另外有一個隱藏的none模式，node模式就是不使用默認(rèn)的，采用我們所配置的
這里有個細(xì)節(jié)，那就是，當(dāng)我們設(shè)置了pro、dev模式的時候，我們寫的配置會被忽略，采用默認(rèn)的，所以自己配置必須寫none模式
自己寫配置的話，如果不寫node字段，并且沒有設(shè)置壓縮，會警告，代碼過大讓你拆分
新手第一次寫文章，喜歡或者對你有用麻煩點一下贊收藏~
如有不對歡迎各位指點~
我也是最近網(wǎng)上沒看到太多文章才自己試了一下
具體的跟以前版本不同的內(nèi)容大家可以去gayhub項目里面看，官方有介紹
本文只要介紹自己粗淺的實驗~后期有更多接觸我會更新的~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93243.html
摘要：的另一個核心特性，蘋果表示也正在開發(fā)中，按開發(fā)進(jìn)度可能幾個月后就能與我們見面。是基于的本地化數(shù)據(jù)庫，支持以及瀏覽器環(huán)境。 前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點；分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號（ID: frontshow），及時獲取前端每周清單。 本期是 2017 年的最后一...
摘要：通過對比各項目過去個月在上新增數(shù)量，來評估其在年度的受關(guān)注程度，進(jìn)而選出年度領(lǐng)域崛起的明星項目。也許正因為上述最后一點，在中國擁有大量的擁躉。不僅被中國最大的電商平臺阿里巴巴使用，也獲得了與這些公司青睞。 共 4741 字，讀完需 8 分鐘，速讀 2 分鐘。我有幸參與了該項目的部分中文版翻譯、校對工作，感謝 Sacha Grief，Micheal Ramberu 的統(tǒng)計整理，以及 Fr...
摘要：中在性能優(yōu)化所做的努力，也大抵圍繞著這兩個大方向展開。因此，將依賴模塊從業(yè)務(wù)代碼中分離是性能優(yōu)化重要的一環(huán)。大型庫是否可以通過定制功能的方式減少體積。這又違背了性能優(yōu)化的基礎(chǔ)。接下來可以抓住一些細(xì)節(jié)做更細(xì)的優(yōu)化。中，為默認(rèn)啟動這一優(yōu)化。 前言：在現(xiàn)實項目中，我們可能很少需要從頭開始去配置一個webpack 項目，特別是webpack4.0發(fā)布以后，零配置啟動一個項目成為一種標(biāo)配。正因為...
摘要：默認(rèn)出入口在中，不再強制要求指定和路徑。構(gòu)建模式提供了兩種構(gòu)建模式可供選擇和選項描述會將的值設(shè)為。如果是，那就會開啟。默認(rèn)只會對按需加載的代碼做分割。在或更低版本中，如果你想為一個推導(dǎo)出來的定制選項，你不得不在自己的選項中將它重復(fù)一遍。 前言 現(xiàn)在距離2018年2月15號webpack4.0.0出來已經(jīng)有一段時間了，現(xiàn)在已經(jīng)出了 @vue/cli 3.0，但是樓主還沒試過，聽說很強大，...
閱讀 782·2021-09-26 09:55
閱讀 2071·2021-09-22 15:44
閱讀 1480·2019-08-30 15:54
閱讀 1336·2019-08-30 15:54
閱讀 2683·2019-08-29 16:57
閱讀 526·2019-08-29 16:26
閱讀 2496·2019-08-29 15:38
閱讀 2133·2019-08-26 11:48
