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

核心概念

​ 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