To learn about what this does, read its introduction article: https://medium.com/@faceyspacey/webpacks-import-will-soon-fetch-js-css-here-s-how-you-do-it-today-4eb5b4929852
yarn add babel-plugin-dual-import
"presets": whatever you usually have"plugins": "dual-import"
What it does
Taking from the test snapshots, it does this:
import'./Foo.js'↓ ↓ ↓ ↓ ↓ ↓Promiseallimport /* webpackChunkName: 'Foo' */ './Foo';
And if you're using dynamic imports:
import`../base/`↓ ↓ ↓ ↓ ↓ ↓Promiseallimport /* webpackChunkName: 'base/[request]' */ `./base/`;
It names all your chunks using "magic comments" 🔮 behind the scenes and is derived from the imported file. It's so magic you don't gotta use "magic comments" anymore. This works with both static and dynamic import paths, as you can see above.
How do I Serve the Css:
Use webpack-flush-chunks to serve a hash of chunk names to css files. It's built to work with this.
importCss(chunkName) will retreive it from there.
If you don't wanna do that, you can dig through your webpack stats and manually embed the following in the HTML you serve:
Or if you already use the html-webpack-plugin as part of your build process, take a look at the flush-chunks-html plugin for webpack. It identifies all your generated css-chunks and adds them to your html file like shown above during build!
webpack-flush-chunks you will have to supply the
chunkNames option, not the
moduleIds option since this plugin is based on chunk names. Here's an example:
const UniversalComponent =const UniversalDynamicComponent =
const app = ReactDOMServerconst js styles cssHash =res
Babel Server Or Webpack < 2.2.20
If your compiling the server with Babel, you may need to add this babel-plugin as well: babel-plugin-dynamic-import-webpack. And if you're using a version of Webpack before 2.2.0, you also must add it.
The chunk name is created out of the path you provide (stripping slashes, dots and extension). So if in one dir you have
./Page and in another place you have
../components/Page, well then you gotta do the same for the first one even if you're already in the same directory. I.e.
components gotta be the first named path segment in both cases.
We use commitizen, so run
npm run cm to make commits. A command-line form will appear, requiring you answer a few questions to automatically produce a nicely formatted commit. Releases, semantic version numbers, tags, changelogs and publishing to NPM will automatically be handled based on these commits thanks to semantic-release. Be good.
Reviewing a package's tests are a great way to get familiar with it. It's direct insight into the capabilities of the given package (if the tests are thorough). What's even better is a screenshot of the tests neatly organized and grouped (you know the whole "a picture says a thousand words" thing).