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

Github.com/lgwebdream/…

By Lao Yuan on July 15, 2020