一、需求效果
/js
/css
二、具体操作
1. 格式
import(/* webpackChunkName: "my-chunk-name" */ 'module');
2. 示例
//vue: router.js
component: () => import(/* webpackChunkName: "appointment" */"@/pages/Appointment")
3. 作用
每个模块按照注释中webpackChunkName
的值生成对应的模块js
三、关于 webpackChunkName
/* webpackChunkName: '...' */
webpack-Doc
: 机票
Make sure to understand the intention:
- The chunk’s name here is intended
to be public
. - It’s
not a development-only
name. - Webpack will use it to name files in production and development modes.
Webpack 5
will automatically assign useful file names in development mode even when not using webpackChunkName.