webpack

import return promise  所以可以与async函数一起用，需要插件

@babel/plugin-syntax-dynamic-import

 

 

It is possible to provide a dynamic expression to import() when you might need to import specific module based on a computed variable later.

 todo https://developer.mozilla.org/en-US/docs/Glossary/CORS

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-crossorigin

 

浏览器。 支持preload： 当前页需要使用，下载下来，不执行

prefetch：下一个navigation可能会使用，在浏览器空闲时间下载下来。

webpack也支持

 

Bundle Analysis    打包分析

 生成解析文件webpack --profile --json > stats.json    使用官方分析工具，等分析

 

lazy  loading

caching

 [name]。[contenthash]  .js

代码没变，contenthash变了：

原因：This is because webpack includes certain boilerplate, specifically the runtime and manifest, in the entry chunk.

解决：Extracting Boilerplate　

+     runtimeChunk: 'single',

Lets add optimization.splitChunks with cacheGroups with next params and build:

optimization: {
      runtimeChunk: 'single',
+     splitChunks: {
+       cacheGroups: {
+         vendor: {
+           test: /[\\/]node_modules[\\/]/,
+           name: 'vendors',
+           chunks: 'all',
+         },
+       },
+     },
    },

 

... we can see that all three have. This is because each module.id is incremented based on resolving order by default. Meaning when the order of resolving is changed, the IDs will be changed as well. So, to recap:

• The main bundle changed because of its new content.
• The vendor bundle changed because its module.id was changed.
• And, the runtime bundle changed because it now contains a reference to a new module.

 

 

+     moduleIds: 'hashed',

 

发布library

webpack的环境变量 webpack --env.production --env.NODE_ENV=local 

webpack cli

在webpack配置里面访问webpack env 需要将module。exports指向函数