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