老图镇楼
不废话看看官方怎么谈5，Webpack5的新特性
1.使用持久化缓存提高构建性能
2.使用更好的算法和默认值改进长期缓存（long-term caching）
3.清理内部结构而不引入任何破坏性的变化
4.引入一些breaking changes，以便尽可能长的使用v5版本
光说不练假把式
安装webpack(v5)威武版,不用用怎么知道他有多好用？
npm init -y
npm i webpack@next --save-dev
可以直接通过@next方式来安装webpack5版本,目前版本是"^5.0.0-alpha.23"
先来看下基本结构
├── bootstrap.js // 手动启动webpack
├── pack.js // 自己实现的webpack
├── package-lock.json
├── package.json
├── README.md
├── src
│ ├── a.js// 入口文件会引用 a.js
│ └── index.js // 打包的入口文件
└── webpack.config.js // webpack配置文件
a.js只是导出个变量而已，非常的简单
module.exports = "webyouxuan"
index.js负责引入a.js模块
let webyouxuan= require("./a");
console.log(webyouxuan)
webpack.config文件
const path = require("path");
module.exports = {
mode:"development",
entry:"./src/index.js",
output:{
path:path.join(__dirname,"dist"),
filename:"main.js"
}
}
你会发现和webpack4的配置基本没有变化
开始打包，你会发现npx webpack需要webpack-cli的支持，比较尴尬的是，到目前还没有与之匹配的webpack-cli,没办法啦，我们只好手动启动webpack了~~~
bootstrap.js 引入webpack进行打包项目
const webpack = require("webpack");
const webpackOptions = require("./webpack.config");
// 需要将 配置文件传入到webpack中，打包成功后我们打印stats信息
webpack(webpackOptions,(err,stats)=>{
if(err){
console.log(err);
}else{
console.log(stats.toJson())
}
})
看下打包出来的信息:
我们需要掌握一些关键词:
module:在webpack中所有文件都是模块，一个模块会对应一个文件，webpack会通过入口找到所有依赖的模块
chunk:代码块，一个chunk由多个模块组合而成
assets:打包出的资源,一般和chunk个数相同
查看编译出的源码
发现比webpack4，打包出来的结果确实少了不少！更简洁，更容易读懂（这里我已把注释删掉）。
// 2.整体函数是个自执行函数
((modules) => { // 3.module传入的为所有打包后的结果
var installedModules = {};
function __webpack_require__(moduleId) {
if (installedModules[moduleId]) { // 做缓存的可以先不理
return installedModules[moduleId].exports;
}
var module = (installedModules[moduleId] = { // 5.创建模块,每个模块都有一个exports对象
i: moduleId,
l: false,
exports: {}
});
modules[moduleId](module, module.exports, __webpack_require__); // 6.调用对应的模块函数,将模块exports传入
module.l = true;
// 8.用户会将结果放到module.exports对象上
return module.exports;
}
function startup() {
// 通过入口开始加载
return __webpack_require__("./src/index.js"); // 默认返回的是 module.exports结果;
}
return startup(); // 4.启动加载
})({ // 1.列出打包后的模块
"./src/a.js": module => {
eval(
"module.exports = "webyouxuan"\n\n//# sourceURL=webpack:///./src/a.js?"
);
},
"./src/index.js": (__unusedmodule, __unusedexports, __webpack_require__) => { // 7.加载其他模块，拿到其他模块的module.exports结果
eval(
"let webyouxuan = __webpack_require__(/*! ./a */ "./src/a.js");\nconsole.log(webyouxuan)\n\n//# sourceURL=webpack:///./src/index.js?"
);
}
});
总的来说不难理解，其实还是内部实现了个___webpack_require__方法，如果看不懂就多来几遍，看懂了发现也没什么。。。
这样我们可以直接把main.js在html中直接引入啦~，发现是不是已经可以打印出webyouxuan啦，顺便做个广告，关注我们！持续推送精品文章，给你点个赞
