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

littleGrow 發(fā)布于2019-08-26 13:56 / 2427人閱讀

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

核心概念

? webpack是一個(gè)前端資源模塊打包工具，它可以根據(jù)模塊的依賴關(guān)系進(jìn)行打包輸出成瀏覽器能夠識(shí)別的靜態(tài)資源，可以把多個(gè)文件打包成一個(gè)，減少http請(qǐng)求。

源碼地址

零配置啟動(dòng)

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

下面我通過一段代碼來演示一下，零配置啟動(dòng)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 啟動(dòng)webpack

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

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

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

云服務(wù)器 GPU云服務(wù)器 php01 Beta01 java01++ database01

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/109841.html

相關(guān)文章

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

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

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

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

wangtdgoodluck 2019-08-23 18:01 評(píng)論0 收藏0
01 【零基礎(chǔ)入門】html學(xué)習(xí)筆記（2）

摘要：，表單的兩個(gè)常見屬性為填寫表單的人提供一個(gè)輸入提示。可用于任何表單控件，表示這個(gè)域是必要的，如果不填，則無法提交表單。，表格，表格由行中的數(shù)據(jù)單元格組成，列隱含地定義在行中。，表格應(yīng)用于表示表格數(shù)據(jù)，而不是建立頁(yè)面布局。 1，如何設(shè)計(jì)一個(gè)頁(yè)面 1）先規(guī)劃好web頁(yè)面的結(jié)構(gòu)，首先畫出一個(gè)草圖，然后創(chuàng)建一個(gè)略圖，最后再寫html2）規(guī)劃頁(yè)面時(shí)，先設(shè)計(jì)大的塊元素，再用內(nèi)聯(lián)元素...

kamushin233 2019-08-02 10:39 評(píng)論0 收藏0
01 【零基礎(chǔ)入門】html學(xué)習(xí)筆記（1）

摘要：公司就是中文網(wǎng)頁(yè)，極度的追求網(wǎng)頁(yè)的顯示速度，要使用。，與類似，用于將相關(guān)的內(nèi)聯(lián)元素和文本歸組在一起。用途區(qū)別塊元素通常用在頁(yè)面中的主要構(gòu)建模塊，而內(nèi)聯(lián)元素則用來標(biāo)記小段內(nèi)容。之前學(xué)習(xí)了前端的一些基礎(chǔ)知識(shí)，現(xiàn)在想深入地、精通地學(xué)習(xí)前端，往前端和全棧工程師方向發(fā)展。之前學(xué)習(xí)前端主要是通過看視頻，結(jié)合動(dòng)手練習(xí)。現(xiàn)在認(rèn)為看書+視頻+實(shí)踐，應(yīng)該是最高效的學(xué)習(xí)方法。對(duì)于html、css，我主要...

xeblog 2019-08-02 10:38 評(píng)論0 收藏0
php 學(xué)習(xí)筆記之日期時(shí)間操作一籮筐

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

tain335 2019-07-01 12:51 評(píng)論0 收藏0