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

資訊專欄INFORMATION COLUMN

webpack@4.32.2研究筆記【02】- mode

newtrek / 2367人閱讀

摘要：簡介模式是新增的配置，用來指定使用對應(yīng)模式的內(nèi)置優(yōu)化它有三個可選模式默認為。源碼地址選項描述通過插件將的值設(shè)為。啟用和通過插件將的值設(shè)為。使用默認的優(yōu)化項。注意上面說的并不是的運行環(huán)境變量，它其實是通過插件設(shè)置的一個全局變量。

簡介

? mode（模式）是webpack4.0.0新增的配置，用來指定webpack使用對應(yīng)模式的內(nèi)置優(yōu)化；它有三個可選模式：production、development、none；默認為production。

源碼地址

選項 描述
development 通過DefinePlugin插件將 process.env.NODE_ENV 的值設(shè)為 development。啟用 NamedChunksPlugin 和 NamedModulesPlugin。
production 通過DefinePlugin插件將 process.env.NODE_ENV 的值設(shè)為 production。啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin.
none 通過DefinePlugin插件將 process.env.NODE_ENV 的值設(shè)為 node。使用默認的優(yōu)化項。
演示

下面通過一段代碼分別演示一個每一個模式打包輸出的文件內(nèi)容：

第一步：編寫入口文件和依賴代碼

// 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);

第二步：編寫webpack配置 & 啟動webpack

// webpack@4.32.2系列教程/demo02-mode/scripts/build.js
const webpack = require("webpack");

// 創(chuàng)建編譯器對象
const compiler = webpack({
  // mode模式：webpack4.0.0新增配置，用來指定webpack使用相應(yīng)模式的內(nèi)置優(yōu)化。
  // mode: "development"   // 會將 process.env.NODE_ENV 的值設(shè)為 development。啟用 NamedChunksPlugin 和 NamedModulesPlugin。
  // mode: "production"    // 會將 process.env.NODE_ENV 的值設(shè)為 production。啟用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.
  mode: "none"             // 使用默認優(yōu)化項
});

// 啟動webpack
compiler.run((err, stats) => {
  if (err) {
    console.error(err);
    return;
  }
  // 輸出編譯成功信息
  console.log(stats.toString({ colors: true }));
});

第三步：cd到demo02-mode文件夾下，運行node scripts/build.js

mode: none 打包輸出的main.js文件內(nèi)容

mode:development 打包輸出的main.js文件內(nèi)容

mode:production 打包輸出的main.js文件內(nèi)容

小結(jié)： 可以看到每一種模式，打包后輸出的代碼都不一樣，我們平時開發(fā)使用development模式，當(dāng)代碼需要發(fā)布上線時使用production模式。

注意： 上面說的process.env.NODE_ENV并不是Node.js的process.env.NODE_ENV運行環(huán)境變量，它其實是通過DefinePlugin插件設(shè)置的一個webpack全局變量。

配置

? mode其實可以理解為webpack4.0.0 提供一個語法糖，它的三個可選項，其實就是三套不同的webpack默認配置而已，以下是每一種模式對應(yīng)的webpack配置：

mode: development

mode: production

mode: none

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104243.html

相關(guān)文章

  • webpack@4.32.2研究筆記【03】- devtool

    摘要：簡介選項用于控制是否需要生成，以及如何生成。表示把每一個模塊文件都轉(zhuǎn)換為字符串，并且在每一個模塊代碼的尾部添加文件名，并使用執(zhí)行。通過來處理已有的。優(yōu)點是不需要建立和部署內(nèi)網(wǎng)的服務(wù)器，缺點是無法直接線上源碼。 簡介 ? devtool選項用于控制是否需要生成source map，以及如何生成source map。源碼地址 什么是source map？ ? source ma...

    wangtdgoodluck 評論0 收藏0

  • webpack@4.32.2研究筆記【01】- 零配置

    摘要：核心概念是一個前端資源模塊打包工具，它可以根據(jù)模塊的依賴關(guān)系進行打包輸出成瀏覽器能夠識別的靜態(tài)資源，可以把多個文件打包成一個，減少請求。源碼地址零配置啟動從開始，可以零配置啟動，命令被遷移到一個單獨的包上，的功能變得更加豐富強大。 核心概念 ? webpack是一個前端資源模塊打包工具，它可以根據(jù)模塊的依賴關(guān)系進行打包輸出成瀏覽器能夠識別的靜態(tài)資源，可以把多個文件打包成一...

    littleGrow 評論0 收藏0

  • linux下vi使用筆記

    摘要：按屏幕往后移動半頁。按移動到光標(biāo)所在行的行首按光標(biāo)跳到下個字的開頭按光標(biāo)跳到下個字的字尾按光標(biāo)回到上個字的開頭按光標(biāo)移到該行的第個位置，如。例如，，表示移動光標(biāo)至文章的第行行首。 01：查找和替換 例1：要找about字符串 /about 在命令行輸入/后接要查找的字符串，下一個匹配按n(ext)，上一個是N?about 在當(dāng)前位置找，n跳到前一個匹配/about$ 匹配行尾的a...

    Awbeci 評論0 收藏0

  • 讀“js高程”筆記一

    showImg(http://img3.douban.com/lpic/s8958650.jpg); 0x00 javascript組成 ECMAScript(-265)核心語言部分 DOM文檔對象模型（DOM1、2、3） BOM瀏覽器對象模型(提供與瀏覽器交互的接口和方法) 0x01 async 異步加載 執(zhí)行順序不定 charset defer 延遲加載，立即下載腳本但不執(zhí)行 src ...

    CollinPeng 評論0 收藏0

發(fā)表評論

0條評論

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