{"action":"created","issue":{"url":"https://api.github.com/repos/mrdulin/blog/issues/43","repository_url":"https://api.github.com/repos/mrdulin/blog","labels_url":"https://api.github.com/repos/mrdulin/blog/issues/43/labels{/name}","comments_url":"https://api.github.com/repos/mrdulin/blog/issues/43/comments","events_url":"https://api.github.com/repos/mrdulin/blog/issues/43/events","html_url":"https://github.com/mrdulin/blog/issues/43","id":280939225,"node_id":"MDU6SXNzdWUyODA5MzkyMjU=","number":43,"title":"使用import()配合webpack动态导入模块时，如何指定chunk name？","user":{"login":"mrdulin","id":17866683,"node_id":"MDQ6VXNlcjE3ODY2Njgz","avatar_url":"https://avatars2.githubusercontent.com/u/17866683?v=4","gravatar_id":"","url":"https://api.github.com/users/mrdulin","html_url":"https://github.com/mrdulin","followers_url":"https://api.github.com/users/mrdulin/followers","following_url":"https://api.github.com/users/mrdulin/following{/other_user}","gists_url":"https://api.github.com/users/mrdulin/gists{/gist_id}","starred_url":"https://api.github.com/users/mrdulin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mrdulin/subscriptions","organizations_url":"https://api.github.com/users/mrdulin/orgs","repos_url":"https://api.github.com/users/mrdulin/repos","events_url":"https://api.github.com/users/mrdulin/events{/privacy}","received_events_url":"https://api.github.com/users/mrdulin/received_events","type":"User","site_admin":false},"labels":[{"id":583689161,"node_id":"MDU6TGFiZWw1ODM2ODkxNjE=","url":"https://api.github.com/repos/mrdulin/blog/labels/JavaScript","name":"JavaScript","color":"b60205","default":false},{"id":775444411,"node_id":"MDU6TGFiZWw3NzU0NDQ0MTE=","url":"https://api.github.com/repos/mrdulin/blog/labels/webpack","name":"webpack","color":"fcf280","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":8,"created_at":"2017-12-11T08:58:35Z","updated_at":"2018-08-02T15:14:55Z","closed_at":null,"author_association":"OWNER","body":"**问题:**\r\n\r\n使用`webpack` + es2015的`import()`语法进行`code splitting`时，需要指定`chunk name`，便于查看`chunk`具体是什么文件分离出的。\r\n\r\n`webpack`版本: `3.10.0`\r\n\r\n`webpack`相关配置：\r\n\r\n```js\r\n  output: {\r\n    publicPath: '/',\r\n    filename: 'scripts/[name].[chunkhash].js',\r\n    chunkFilename: 'scripts/[id].[name].[chunkhash].js',\r\n  },\r\n```\r\n\r\n先看没有指定`chunk name`的写法和打包编译输出：\r\n\r\n代码片段：\r\n```jsx\r\nclass App extends React.Component {\r\n  render() {\r\n    return (\r\n      <div>\r\n        <ul>\r\n          <li><Link to='/'>Home</Link></li>\r\n          <li><Link to='/about'>About</Link></li>\r\n          <li><Link to='/topics'>Topics</Link></li>\r\n          <li><Link to='/contact'>contact</Link></li>\r\n        </ul>\r\n        <Switch>\r\n          <Route exact path='/' component={Home}></Route>\r\n          <Route path='/about' component={asyncComponent({\r\n            loader: () => import('../about'),\r\n            loading: Loading\r\n          })}></Route>\r\n          <Route path='/topics' component={asyncComponent({\r\n            loader: () => import('../topics'),\r\n          })}></Route>\r\n          <Route path='/contact' component={asyncComponent({\r\n            loader: () => import('../contact'),\r\n            loading: Loading\r\n          })} />\r\n          <Route component={asyncComponent({\r\n            loader: () => import('../NoMatch'),\r\n          })} />\r\n        </Switch>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n```\r\n\r\n打包编译输出：\r\n\r\n![image](https://user-images.githubusercontent.com/17866683/33822253-daa75722-de91-11e7-8c74-3b12a26e49bd.png)\r\n\r\n看到这个编译输出的`chunk name`，我的表情是这样的\r\n<img src='https://ws4.sinaimg.cn/large/006tNc79gy1fmcx6gm7jwj30xc0xf74h.jpg' width='100px'/>\r\n\r\n都是模块`id`, 根本不知道这些`chunk`文件到底是哪些模块（在一般情况下，可以简单的理解为哪些页面）。\r\n如果某个`chunk`文件过大，怎么知道是哪个页面呢？\r\n\r\n所以有必要加入人类可读`chunk name`。\r\n\r\n**解决办法:**\r\n\r\nes2015规格中的`import()`本身是不支持指定动态导入模块生成的chunk文件的名称的，不过，`webpack 2.6.0`以后，支持使用**注释**的方式给动态导入的模块添加`chunk name`。语法如下：\r\n\r\n```js\r\nimport(\r\n  /* webpackChunkName: \"my-chunk-name\" */\r\n  /* webpackMode: \"lazy\" */\r\n  'module'\r\n);\r\n```\r\n\r\n好了，到这里基本就清楚了。改写后的代码和打包编译输出如下：\r\n\r\n代码片段：\r\n```jsx\r\nclass App extends React.Component {\r\n  render() {\r\n    return (\r\n      <div>\r\n        <ul>\r\n          <li><Link to='/'>Home</Link></li>\r\n          <li><Link to='/about'>About</Link></li>\r\n          <li><Link to='/topics'>Topics</Link></li>\r\n          <li><Link to='/contact'>contact</Link></li>\r\n        </ul>\r\n        <Switch>\r\n          <Route exact path='/' component={Home}></Route>\r\n          <Route path='/about' component={asyncComponent({\r\n            loader: () => import(/* webpackChunkName: 'about' */'../about'),\r\n            loading: Loading\r\n          })}></Route>\r\n          <Route path='/topics' component={asyncComponent({\r\n            loader: () => import(/* webpackChunkName: 'topics' */'../topics')\r\n          })}></Route>\r\n          <Route path='/contact' component={asyncComponent({\r\n            loader: () => import(/* webpackChunkName: 'contact' */'../contact'),\r\n            loading: Loading\r\n          })} />\r\n          <Route component={asyncComponent({\r\n            loader: () => import(/* webpackChunkName: 'NoMatch' */'../NoMatch')\r\n          })} />\r\n        </Switch>\r\n      </div>\r\n    )\r\n  }\r\n}\r\n```\r\n\r\n打包编译输出：\r\n\r\n![image](https://user-images.githubusercontent.com/17866683/33822814-e1350358-de93-11e7-9eda-bbe4b9f4e891.png)\r\n\r\n感觉代码有点重复，想抽象出一个函数，入参是模块路径和`chunk name`? 类似：\r\n\r\n```js\r\nconst loader = (path, name) => () => import(/* webpackChunkName: `${name}` */  `${path}`)\r\n```\r\n\r\n为了让生成的每个`chunk`文件都有自己指定的名称，然而`import()`并不支持这样的注释，那么问题就是如何使用js动态生成注释? 也就是说，`${name}`需要被替换成自己指定的`chunk`名称，如上面的`contact`, `NoMatch`等。\r\n\r\n\r\n\r\n参考链接：\r\n\r\nhttps://doc.webpack-china.org/api/module-methods/#import-\r\nhttps://github.com/webpack/webpack/issues/1949\r\n"},"comment":{"url":"https://api.github.com/repos/mrdulin/blog/issues/comments/409962723","html_url":"https://github.com/mrdulin/blog/issues/43#issuecomment-409962723","issue_url":"https://api.github.com/repos/mrdulin/blog/issues/43","id":409962723,"node_id":"MDEyOklzc3VlQ29tbWVudDQwOTk2MjcyMw==","user":{"login":"mrdulin","id":17866683,"node_id":"MDQ6VXNlcjE3ODY2Njgz","avatar_url":"https://avatars2.githubusercontent.com/u/17866683?v=4","gravatar_id":"","url":"https://api.github.com/users/mrdulin","html_url":"https://github.com/mrdulin","followers_url":"https://api.github.com/users/mrdulin/followers","following_url":"https://api.github.com/users/mrdulin/following{/other_user}","gists_url":"https://api.github.com/users/mrdulin/gists{/gist_id}","starred_url":"https://api.github.com/users/mrdulin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mrdulin/subscriptions","organizations_url":"https://api.github.com/users/mrdulin/orgs","repos_url":"https://api.github.com/users/mrdulin/repos","events_url":"https://api.github.com/users/mrdulin/events{/privacy}","received_events_url":"https://api.github.com/users/mrdulin/received_events","type":"User","site_admin":false},"created_at":"2018-08-02T15:14:55Z","updated_at":"2018-08-02T15:14:55Z","author_association":"OWNER","body":"@mqliutie 有验证过么，很久没关注这一块了，这个issue之前看过，不知道这个特性有没有加进去"}}
{"actor":{"display_login":"mrdulin"}}