Webpack5.0 新特性尝鲜实战

作者：志佳老师

本文首发微信公众号：jingchengyideng
欢迎关注，每天都给你推送新鲜的前端技术文章

前言

在老袁写这篇文章的时候，v5版本仍然处于早期阶段，可能仍然有问题。而且作为一个major版本，其中有一些breaking changes，可能会导致一些配置和插件不工作。但这并无妨碍我们去开始对changelog上的新特性进行尝鲜实战。大家如果遇到什么问题可以移步到这进行反馈。另外有关于Webpack4的配置和Compiler->Compilation->Chunk->Module->Template整体运行原理国内外有很多优秀的文章我这里就不一一展开了。接下来天也不早了人也不少了，让我们一起干点正事。

（本图截自twitter列出了接下来v5版本的改进，嗯…感觉屏幕还是小了一点）

（本图截自github,截图时间为3月12日。我们看到目前开发进度到了57%）

一顿操作猛如虎指南

• 升级你的Node到8（V5将Node.js版本从6升级到了8）
• npm install webpack@next —save-dev
• npm install webpack-cli —save-dev
• package.json添加 "dev": "webpack --mode development"
• package.json 添加 "prod": "webpack --mode production"

开始Webpack V5尝鲜之旅

新建src文件夹，然后新建index.js。简单的写了一句 console.log("Hello Webpack5")

1. dist打包文件测评

#激动的心 颤抖的手
npm run dev

我的内心毫无波澜…...卒