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日