New Webpack5 features [season 2]

In the title we wrote “Webpack beta 2”, so there must be a beta 1 (Webpack5.0 beta 🦀🦀 [Beta 1]). It has been more than a year since I wrote my last article, which was still the major version. Let’s summarize it first:

Dist Package file evaluation

It’s gut-wrenching loading on demand

ModuleIds & chunkIds must be identified

The much-maligned compile speed

MinSize&maxSize is a better way to say it

Compiler optimization

Node.js polyfills is automatically removed

At the time of writing this article, the current version is V5.0.0-beta.22 with 71% progress. If there are more changes and new features, I will continue to output season 3.

What else happened this year

In addition to the above new features written by Lao Yuan, the biggest new feature this year is Module Federation, which solves the core component sharing problem for the micro front end. There are too many excellent articles on this on Google. Of course, this one old yuan is also old one year old 🤤 I also learn not to move 🤒 well the next day is not early, people are also many, we do point of business.

Walk into Webpack5 Experiments

The Experiments optional option was introduced in WebPack 5 to enable users to activate and try out experimental features. It’s an experimental property, but all I can say is it smells good.

1. TopLevelAwait supportTop-level Await Stage 3 proposal

//demo/data.js
const data = 'Beijing Chengyi Lamp';
export default data;
//demo/index.js
let output;
async function main() {
  const dynamic = await import('./data');
  output = dynamic + '🏮';
}
main();
export { output };

// Execute the following code
import { output } from './demo';
console.log(output);
// 很遗憾output是undefined
Copy the code

Regrettably, there seems to be no way we can get him to the value we end up dealing with. Of course you can use sentry variable to keep asking and recursing and so on, but neither is the best way because async and await must be a pair for front-end students. Today the situation has improved.

yarn add webpack@next
#It will let you select the latest beta
yarn add webpack-cli@next
Copy the code

Next, write webpack.config.js

module.exports = {
  experiments: {
    // Import the asynchronous module import Webpack to prompt you to open this property
    importAsync: true.// topLevelAwait
    topLevelAwait: true,}};Copy the code

/ / rewrite the demo/index. Js
const dynamic = await import('./data');
export const output = dynamic.default + '';
// You can also write this way
const dynamic = import('./data');
export const output = (await dynamic).default + Math.random() + '🍊';
Copy the code

All right, now it’s time for the magic.

My heart suddenly had filar silk happiness, you 🙃 but you think over, we can play a bit more dynamite burst.

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

// Execute the following code
import await { output } from './demo02';
console.log(output);
Copy the code

Tweak webpack.config.js

module.exports = {
  experiments: {
    // The three brothers got together
    importAsync: true.topLevelAwait: true.// Support import await
    importAwait: true,}};Copy the code

My heart without waves even dull for a long time 😧

2. Goodbye file-loader, url-loader, and raw-loader

Let’s cut the crap and move on to core code

body {
  background: url('./bg.png');
}
Copy the code

import './demo03/index.css';
console.log('Beijing Chengyi Lamp');
Copy the code

Continue to modify 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,}};Copy the code

Large truly fragrant scene is undoubtedly 🔮

yarn dev
Copy the code

3. Sleek WebAssembly

// a very simple C code
int add (int x, int y) {
  return x + y;
}
// Then we compile it into program.wasm
Copy the code

Come on, show 🎙

// WebPack4 can only load program.wasm
Wasm cannot be used as the primary chunk
import('./demo04/program.wasm').then((p) = > {
  console.log(p.add(4.6));
});
// Webpack5 shock
// WebAssembly is not used. That 🛏 good night
import { add } from './demo03/program';
console.log(add(4.6));
Copy the code

Continue to modify webpack.config.js, Lao Yuan should not continue to explain.

module.exports = {
  experiments: {
    asyncWebAssembly: true.syncWebAssembly: true,}};Copy the code

4. Can my MJS manage it? can

//demo05/index.mjs
const data = 'Beijing Chengyi Lamp';
export default data;
// Run the code
import data from './demo5';
console.log(data);
Copy the code

Modify the webpack. Config. Js

module.exports = {
  experiments: {
     mjs: true,}};Copy the code

5. What is outputModule?

attribute	value
outputModule	true
output.libraryTarget	module

We’ll use it a lot when we’re writing our libraries. It helps us standardize our generated code. So what’s the difference between setting outputModule to True and not setting it? Just look at the picture (as the name suggests, dropping the closure and turning yourself into a Module).

6. I’d like to finish with a family photo

More Webpack

A lot of your projects are still using Webpack4, so here’s a little bit more for you.

1. Webpack

Github.com/lgwebdream/…

2. Webpack brush questions artifact

Scan the code to enter the front interview planet 🌍, unlock the brush question magic device, not only Webpack related interview questions, but also get 800+ front end questions and a line of common interview high-frequency test points.

3. This article source click below address to obtain