Webpack5 新特性尝鲜实战 【第二季】

---

标题咱们写上了Webpack 新特性实战尝鲜的第二季，那么确定就有第一季了( Webpack5.0 新特性尝鲜实战 🦀🦀【第一季】)。距离写上一篇文章已经超过了一年的时间，那时候仍是major版，咱们先来总结一下吧：

• dist打包文件测评
• 让人揪心的按需加载
• moduleIds & chunkIds得已肯定
• 饱受诟病的编译速度
• minSize&maxSize 更好的方式表达
• 编译器的优化
• Node.js polyfills 自动被移除

老袁写这篇文章的时候如今的版本是 v5.0.0-beta.22，开发进度71%。若是有更多变化和新特性，我也会给你们持续输出第三季。

这一年还发生了啥

除了以上老袁写的一些新特性之外，这一年最大的新增特性就是 Module federation 它的出现为 微前端解决了最核心的组件共享的问题，这个的Google上的优秀文章就太多了，你们自行查阅吧。固然这一年老袁也又老了一岁🤤我也学不动了🤒好了接下来天也不早了，人也很多了，咱们干点正事吧。

---

走进Webpack5 Experiments

webpack 5中引入了experiments可选选项，以使用户可以激活和试用实验功能。虽是实验属性，可我只能说真香。

1. topLevelAwait 支持顶级Await Stage 3提案

//demo/data.js
const data = '京程一灯';
export default data;
//demo/index.js
let output;
async function main() {
  const dynamic = await import('./data');
  output = dynamic + '🏮';
}
main();
export { output };

//执行以下代码
import { output } from './demo';
console.log(output);
// 很遗憾output是undefined
复制代码

遗憾归遗憾，咱们彷佛丝毫没得办法去让他获得咱们最后处理的值。固然你能够用哨兵变量不停的去询问和递归等等，但都不是一个最佳的办法，由于对于前端同窗来说async和await必须是一对。今天这种状况获得了改善。

yarn add webpack@next
#会让你选择版本 选择最新的beta版本
yarn add webpack-cli@next
复制代码

接下来编写webpack.config.js

module.exports = {
  experiments: {
    // 导入异步模块 import webpack会提示你打开这个属性
    importAsync: true,
    // 全靠它了topLevelAwait
    topLevelAwait: true,
  },
};

复制代码

//重写demo/index.js
const dynamic = await import('./data');
export const output = dynamic.default + '';
//你也能够这么写
const dynamic = import('./data');
export const output = (await dynamic).default + Math.random() + '🍊';
复制代码

好的，接下来就是见证奇迹的时刻了。

个人心里忽然有了丝丝的幸福感，你呢🙃但是你觉得结束了，咱们能够玩点更劲爆的。

//demo02/index.js
const connectToDB = async () => {
  const data = await new Promise((r) => {
    r('京程一灯');
  });
  return data;
};
const result = await connectToDB();
let output = `${result}🍊`;
export { output };

//执行以下代码
import await { output } from './demo02';
console.log(output);
复制代码

调整一下webpack.config.js

module.exports = {
  experiments: {
    // 三兄弟聚齐了
    importAsync: true,
    topLevelAwait: true,
    // 支持import await
    importAwait: true,
  },
};
复制代码

个人心里毫无波澜甚至呆滞了好久😧

2. 再见了file-loader、url-loader、raw-loader

废话少说仍是上硬核代码吧

body {
  background: url('./bg.png');
}
复制代码

import './demo03/index.css';
console.log('京程一灯');
复制代码

再继续修改下webpack.config.js

module.exports = {
    output: {
      assetModuleFilename: 'images/[name].[hash:5][ext]',
    },
    module: {
      rules: [
        {
          test: /\.(png|jpg|svg)$/,
          type: 'asset',
        },
        {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader'],
        },
      ],
  },
  experiments: {
		asset: true,
  },
};
复制代码

大型真香现场无疑了🔮

yarn dev
复制代码

3. 丝丝顺滑的WebAssembly

//一段很是简单的C代码
int add (int x, int y) {
  return x + y;
}
//而后咱们把它编译成program.wasm
复制代码

来吧，展现🎙

//webpack4只能这样去加载program.wasm
//若是同步去加载 会报错不能把wasm当成主chunk
import('./demo04/program.wasm').then((p) => {
  console.log(p.add(4, 6));
});
//webpack5震撼来袭 
//有人说WebAssembly这玩意也没人用啊？那啥 🛏 晚安
import { add } from './demo03/program';
console.log(add(4, 6));
复制代码

继续修改webpack.config.js，应该不用老袁继续解释了。

module.exports = {
  experiments: {
    asyncWebAssembly: true,
    syncWebAssembly: true,
  },
};
复制代码

4. 个人mjs能管不？能

//demo05/index.mjs
const data = '京程一灯';
export default data;
//运行一下代码
import data from './demo5';
console.log(data);
复制代码

修改webpack.config.js

module.exports = {
  experiments: {
     mjs: true,
  },
};
复制代码

5. outputModule是啥？

属性	值
outputModule	true
output.libraryTarget	module

这个属性有什么用呢，咱们编写类库的时候会常常使用到它，他能够帮助咱们完成生成的代码的模块标准，那么设置outputModule为true之后和不设置的区别在哪呢？看图说话吧（如名字所示丢掉了闭包把本身变成了module）。

6. 最后来张全家福吧

---

更多Webpack

目前不少同窗项目中使用的仍是Webpack4，这里给你们准备了更多相关知识。

1. Webpack实战总计+大厂面试题集合

github.com/lgwebdream/…

2. Webpack刷题神器

扫码进入前端面试星球🌍，解锁刷题神器，不止有Webpack相关面试题，还能够获取800+道前端面试题和一线常见面试高频考点。

3. 本文源码点击下边地址获取

github.com/lgwebdream/…

---

做者 老袁 2020 年 07月 15日