<fieldset id="2ekmq"></fieldset>

<fieldset id="2ekmq"><menu id="2ekmq"></menu></fieldset><abbr id="2ekmq"></abbr>

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

littleGrow 發布于2019-08-26 13:56 / 2433人閱讀

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

核心概念

? webpack是一個前端資源模塊打包工具，它可以根據模塊的依賴關系進行打包輸出成瀏覽器能夠識別的靜態資源，可以把多個文件打包成一個，減少http請求。

源碼地址

零配置啟動

? 從webpack4.0.0開始，webpack可以零配置啟動，webpack命令被遷移到一個多帶帶的npm包 —— webpack-cli上，webpack的cli功能變得更加豐富強大。

下面我通過一段代碼來演示一下，零配置啟動webpack：

第1步：安裝webpack

npm i -D webpack

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

// webpack@4.32.2系列教程/demo01-ZeroConfiguration/src/role.js
export default class Role {
  constructor(name, skill) {
    this.name = name;
    this.skill = skill;
  }
}

// webpack@4.32.2系列教程/demo01-ZeroConfiguration/src/index.js
import Role from "./role"
const role = new Role("喬峰", "降龍十八掌");
console.log(role);

第3步：使用Node API 啟動webpack

const webpack = require("webpack");
// webpack4.0.0 開始支持零配置啟動webpack
const compiler = webpack({});
// 使用Node Api 啟動webpack編譯，webpack4.0.0開始，已經把webpack命令遷移出去了，成為一個多帶帶的npm模塊包，叫做webpack-cli，這個包的功能更多更強大。
// 如果想使用webpack命令，就必須要安裝webpack-cli這個包
// 如果你不需要使用webpack cli命令功能，那么你只需安裝webpack這個包就夠了，如果只安裝webpack這個包，那么只能通過node api來啟動webpack
// vue和react的腳手架的就是用node api來操作webpack的

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

第4步：cd到demo01-ZeroConfiguration文件夾下，運行node scripts/build.js

云服務器 GPU云服務器 php01 Beta01 java01++ database01

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

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

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

摘要：簡介模式是新增的配置，用來指定使用對應模式的內置優化它有三個可選模式默認為。源碼地址選項描述通過插件將的值設為。啟用和通過插件將的值設為。使用默認的優化項。注意上面說的并不是的運行環境變量，它其實是通過插件設置的一個全局變量。簡介 ? mode（模式）是webpack4.0.0新增的配置，用來指定webpack使用對應模式的內置優化；它有三個可選模式：producti...

newtrek 2019-08-23 17:51 評論0 收藏0
webpack@4.32.2研究筆記【03】- devtool

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

wangtdgoodluck 2019-08-23 18:01 評論0 收藏0
01 【零基礎入門】html學習筆記（2）

摘要：，表單的兩個常見屬性為填寫表單的人提供一個輸入提示?？捎糜谌魏伪韱慰丶?，表示這個域是必要的，如果不填，則無法提交表單。，表格，表格由行中的數據單元格組成，列隱含地定義在行中。，表格應用于表示表格數據，而不是建立頁面布局。 1，如何設計一個頁面 1）先規劃好web頁面的結構，首先畫出一個草圖，然后創建一個略圖，最后再寫html2）規劃頁面時，先設計大的塊元素，再用內聯元素...

kamushin233 2019-08-02 10:39 評論0 收藏0
01 【零基礎入門】html學習筆記（1）

摘要：公司就是中文網頁，極度的追求網頁的顯示速度，要使用。，與類似，用于將相關的內聯元素和文本歸組在一起。用途區別塊元素通常用在頁面中的主要構建模塊，而內聯元素則用來標記小段內容。之前學習了前端的一些基礎知識，現在想深入地、精通地學習前端，往前端和全棧工程師方向發展。之前學習前端主要是通過看視頻，結合動手練習?，F在認為看書+視頻+實踐，應該是最高效的學習方法。對于html、css，我主要...

xeblog 2019-08-02 10:38 評論0 收藏0
php 學習筆記之日期時間操作一籮筐

摘要：格式化日期時間格式化日期時間場景將當前日期時間或者特定日期時間格式化輸出為特定格式的字符串常用于人性化展示信息說明返回給定時間戳格式化后所產生的日期時間字符串如果沒有給出時間戳則默認使用本地當前時間備注格式說明返回值示例位數字完整表示的年份 showImg(https://segmentfault.com/img/remote/1460000019351405); 格式化日期時間 d...

tain335 2019-07-01 12:51 評論0 收藏0