webpack打包生成的文件名问题

Question

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')
  },

Answer 1

代码里的[name]默认是id覆盖，如果你要给chunkFilename重新起名字，要使用webpack1的require.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]

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

Answer 2

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

...

Answer 3

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

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

我要定义这个页面叫user_register