摘要:簡(jiǎn)介模式是新增的配置,用來(lái)指定使用對(duì)應(yīng)模式的內(nèi)置優(yōu)化它有三個(gè)可選模式默認(rèn)為。源碼地址選項(xiàng)描述通過(guò)插件將的值設(shè)為。啟用和通過(guò)插件將的值設(shè)為。使用默認(rèn)的優(yōu)化項(xiàng)。注意上面說(shuō)的并不是的運(yùn)行環(huán)境變量,它其實(shí)是通過(guò)插件設(shè)置的一個(gè)全局變量。
簡(jiǎn)介
? mode(模式)是webpack4.0.0新增的配置,用來(lái)指定webpack使用對(duì)應(yīng)模式的內(nèi)置優(yōu)化;它有三個(gè)可選模式:production、development、none;默認(rèn)為production。
源碼地址
選項(xiàng) | 描述 |
---|---|
development | 通過(guò)DefinePlugin插件將 process.env.NODE_ENV 的值設(shè)為 development。啟用 NamedChunksPlugin 和 NamedModulesPlugin。 |
production | 通過(guò)DefinePlugin插件將 process.env.NODE_ENV 的值設(shè)為 production。啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin. |
none | 通過(guò)DefinePlugin插件將 process.env.NODE_ENV 的值設(shè)為 node。使用默認(rèn)的優(yōu)化項(xiàng)。 |
下面通過(guò)一段代碼分別演示一個(gè)每一個(gè)模式打包輸出的文件內(nèi)容:
第一步:編寫(xiě)入口文件和依賴代碼
// webpack@4.32.2系列教程/demo02-mode/src/role.js export default class Role { constructor(name, skill) { this.name = name; this.skill = skill; } }
// webpack@4.32.2系列教程/demo02-mode/src/index.js import Role from "./role" const role = new Role("喬峰", "降龍十八掌"); console.log(role); console.log("process.env.NODE_ENV: ", process.env.NODE_ENV);
第二步:編寫(xiě)webpack配置 & 啟動(dòng)webpack
// webpack@4.32.2系列教程/demo02-mode/scripts/build.js const webpack = require("webpack"); // 創(chuàng)建編譯器對(duì)象 const compiler = webpack({ // mode模式:webpack4.0.0新增配置,用來(lái)指定webpack使用相應(yīng)模式的內(nèi)置優(yōu)化。 // mode: "development" // 會(huì)將 process.env.NODE_ENV 的值設(shè)為 development。啟用 NamedChunksPlugin 和 NamedModulesPlugin。 // mode: "production" // 會(huì)將 process.env.NODE_ENV 的值設(shè)為 production。啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin. mode: "none" // 使用默認(rèn)優(yōu)化項(xiàng) }); // 啟動(dòng)webpack compiler.run((err, stats) => { if (err) { console.error(err); return; } // 輸出編譯成功信息 console.log(stats.toString({ colors: true })); });
第三步:cd到demo02-mode文件夾下,運(yùn)行node scripts/build.js
mode: none 打包輸出的main.js文件內(nèi)容
mode:development 打包輸出的main.js文件內(nèi)容
mode:production 打包輸出的main.js文件內(nèi)容
小結(jié): 可以看到每一種模式,打包后輸出的代碼都不一樣,我們平時(shí)開(kāi)發(fā)使用development模式,當(dāng)代碼需要發(fā)布上線時(shí)使用production模式。
注意: 上面說(shuō)的process.env.NODE_ENV并不是Node.js的process.env.NODE_ENV運(yùn)行環(huán)境變量,它其實(shí)是通過(guò)DefinePlugin插件設(shè)置的一個(gè)webpack全局變量。
配置? mode其實(shí)可以理解為webpack4.0.0 提供一個(gè)語(yǔ)法糖,它的三個(gè)可選項(xiàng),其實(shí)就是三套不同的webpack默認(rèn)配置而已,以下是每一種模式對(duì)應(yīng)的webpack配置:
mode: development mode: production mode: none文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/104243.html
摘要:簡(jiǎn)介選項(xiàng)用于控制是否需要生成,以及如何生成。表示把每一個(gè)模塊文件都轉(zhuǎn)換為字符串,并且在每一個(gè)模塊代碼的尾部添加文件名,并使用執(zhí)行。通過(guò)來(lái)處理已有的。優(yōu)點(diǎn)是不需要建立和部署內(nèi)網(wǎng)的服務(wù)器,缺點(diǎn)是無(wú)法直接線上源碼。 簡(jiǎn)介 ? devtool選項(xiàng)用于控制是否需要生成source map,以及如何生成source map。源碼地址 什么是source map? ? source ma...
摘要:核心概念是一個(gè)前端資源模塊打包工具,它可以根據(jù)模塊的依賴關(guān)系進(jìn)行打包輸出成瀏覽器能夠識(shí)別的靜態(tài)資源,可以把多個(gè)文件打包成一個(gè),減少請(qǐng)求。源碼地址零配置啟動(dòng)從開(kāi)始,可以零配置啟動(dòng),命令被遷移到一個(gè)單獨(dú)的包上,的功能變得更加豐富強(qiáng)大。 核心概念 ? webpack是一個(gè)前端資源模塊打包工具,它可以根據(jù)模塊的依賴關(guān)系進(jìn)行打包輸出成瀏覽器能夠識(shí)別的靜態(tài)資源,可以把多個(gè)文件打包成一...
摘要:按屏幕往后移動(dòng)半頁(yè)。按移動(dòng)到光標(biāo)所在行的行首按光標(biāo)跳到下個(gè)字的開(kāi)頭按光標(biāo)跳到下個(gè)字的字尾按光標(biāo)回到上個(gè)字的開(kāi)頭按光標(biāo)移到該行的第個(gè)位置,如。例如,,表示移動(dòng)光標(biāo)至文章的第行行首。 01:查找和替換 例1:要找about字符串 /about 在命令行輸入/后接要查找的字符串,下一個(gè)匹配按n(ext),上一個(gè)是N?about 在當(dāng)前位置找,n跳到前一個(gè)匹配/about$ 匹配行尾的a...
showImg(http://img3.douban.com/lpic/s8958650.jpg); 0x00 javascript組成 ECMAScript(-265)核心語(yǔ)言部分 DOM文檔對(duì)象模型(DOM1、2、3) BOM瀏覽器對(duì)象模型(提供與瀏覽器交互的接口和方法) 0x01 async 異步加載 執(zhí)行順序不定 charset defer 延遲加載,立即下載腳本但不執(zhí)行 src ...
閱讀 1292·2023-04-26 01:03
閱讀 1907·2021-11-23 09:51
閱讀 3299·2021-11-22 15:24
閱讀 2663·2021-09-22 15:18
閱讀 1010·2019-08-30 15:55
閱讀 3458·2019-08-30 15:54
閱讀 2234·2019-08-30 15:53
閱讀 2387·2019-08-30 15:44