Cesium: Cesium and Webpack

[ggetz]

We're working on putting together an example app as an official recommendation on getting Cesium up and running with Webpack.

Here's the plan:

• [x] Cleanup some of the pain points we've run into in the past within the Cesium library itself. (PR #5861)
  This includes:

  • #5417
  • #4876
  • Resolve issue with how Webpack compiles require.toUrl in buildModuleUrl.js

• [x] Create a new cesium-webpack-example repo with the reccomended webpack.config.json configuration.

  • We'll be using the npm version of Cesium and compiling the Source directory instead of either the minified or unminified built versions of Cesium.
  • We'll also handle managing the assets files and the built versions of the web workers
  • We'll include a README with how to run the repo, and any optional configurations for performance or development

• [x] Setup continuous integration test on that repo to run after every release to make sure nothing in a new release breaks the recommended Cesium setup.

Thanks, please let us know your thoughts!

[markerikson]

Yay! Great to hear this.

I'll throw in a reminder link to my post on how to load Cesium with Webpack, and produce a DllPlugin bundle for faster builds: http://blog.isquaredsoftware.com/2017/03/declarative-earth-part-1-cesium-webpack/ .

[ggetz]

Thanks @markerikson!

[bampakoa]

@ggetz A relevant entry on the Tutorials section of the website would be great also!

[ggetz]

@bampakoa Good point, we could add something like the Webpack equivalent of the Getting Started tutorial

[mramato]

@ggetz not sure how much this may apply to your efforts but here's a blog post about webpack performance in large project. https://redfin.engineering/tech-talk-recap-how-to-improve-webpack-performance-in-large-projects-5435bb18dd18

[markerikson]

On which note, I've got a ton of articles on Webpack build optimization, code splitting, and other related concepts, in the Webpack Advanced Techniques section of my React/Redux links list. (And I hadn't seen that one yet, as it was posted yesterday - added to my bookmarks queue for evaluation!)

[ggetz]

Thanks @mramato and @markerikson, I'll take a look!

[pjcozzi]

@ggetz OK to close this? Is there anything left in the above tasklist for future work?

[ggetz]

Yep, this is good to close. #5417 and #4876 will also be resolved using the recommended config.

[mramato]

For anyone that stumbles on this issue, see @ggetz's awesome work on Cesium and webpack here: https://cesiumjs.org/tutorials/cesium-and-webpack/

[nmschulte]

@ggetz, I found that the ThirdParty/Workers code is not accounted for in the tutorial you've created.

Adding configuration to copy the ThirdParty/Workers directory via Webpack seems to resolve the issue. My configuration looks like this now:

    new CopyWebpackPlugin([
        {from: path.join(paths.cesiumSource, 'Assets'), to: 'Assets'},
        {from: path.join(paths.cesiumSource, 'Widgets'), to: 'Widgets'},
        {from: path.join(paths.cesiumSource, 'ThirdParty'), to: 'ThirdParty'}
    ]), 
    new CopyWebpackPlugin([
        {from: path.join(paths.cesiumSource, '../Build/Cesium/ThirdParty/Workers'), to: 'ThirdParty/Workers'},
        {from: path.join(paths.cesiumSource, '../Build/Cesium/Workers'), to: 'Workers'}
    ])  

[ggetz]

Thanks @nmschulte , good catch! I've opened an issue (https://github.com/AnalyticalGraphicsInc/cesium-webpack-example/issues/4) to update this in the tutorial as well as the example repo.

[custompro12]

For anyone stumbling here from Google, the above tutorial link is no longer valid.

The documentation is available here: https://cesium.com/docs/tutorials/cesium-and-webpack/