webpack打包生成的文件名问题

  1. webpack入口为多页,每个页面中有懒加载的组件,打包出来懒加载的组件会打成不同id的文件名,但是没有模快名,分辨不出当前这个id属于哪个模块下,如果能让懒加载的文件带上模块名?
    如:

     a.html  
     a.js
     b.html
     b.js

    //懒加载模块,分别对应a,b模块

     1.js
     2.js
     3.js
     4.js
    
  //webpack配置
output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
阅读 16.6k
3 个回答

代码里的[name]默认是id覆盖,如果你要给chunkFilename重新起名字,要使用webpack1require.ensure()webpack2以上的import()方法。

webpack1:

require.ensure(dependencies: String[], callback: function(require), chunkName: String)

上面的chunkName对应的就是webpack里的chunkFilename里的[name]

webpack2-3:

const Foo = asyncComponent(() => import(/* webpackChunkName: "foo" */ "./foo"))

<Route path="/xx" component={Foo} />

上面的import()webpack2以上版本的写法,注意/* webpackChunkName: "foo" */,这里对应的就是webpack里的chunkFilename里的[name]

具体使用方法,给你两个参考链接吧:
webpack1require.ensure(): http://www.css88.com/doc/webp...
webpack2-3import(): https://webpack.js.org/api/mo...

chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')

...

@趁月光正好丶 如果是懒加载,加布局加载呢,怎么写名字

{
    path: '/user/register',
    name: '/user/register',
    meta: {
      title: '会员注册',
      auth: false
    },
    components: {
      default: resolve => require(['./register'], resolve),
      nav: resolve => require(['./nav'], resolve)
    }
  },

我要定义这个页面叫user_register
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏