Better configuration suggestions for @snowpack/plugin-webpack

[ahuglajbclajep]

Here are a few small suggestions for @snowpack/plugin-webpack configuration.

Include @babel/preset-env in package.json

The webpackConfig in plugin.js uses @babel/preset-env, which is not included in package.json and needs to be installed additionally, which can be misleading.

Also, terser-webpack-plugin is included in the webpack and does not need to be installed with package.json.

Specifying the version of core-js in more detail

In the core-js's README, it's recommended to specify the version in more detail when using core-js in babel.

Warning! Recommended to specify used minor core-js version, like corejs: '3.6', instead of corejs: 3, since with corejs: 3 will not be injected modules which were added in minor core-js releases.

Therefore, I recommend setting it up as follows:

presets: [
  [
    "@babel/preset-env",
    {
      targets: presetEnvTargets,
      bugfixes: true,
      modules: false,
      useBuiltIns: "usage",
-     corejs: 3,
+     corejs: require("core-js/package.json").version
    },
  ],
],

Add @babel/plugin-transform-runtime

By using @babel/plugin-transform-runtim to avoid duplicate helper functions inserted by babel, you can further reduce the size of your code.

To set this up, add @babel/plugin-transform-runtime to your devdependencies, add @babel/runtime to your dependencies and add the following setting:

plugins: [
+ [
+   "@babel/transform-runtime",
+   { version: require("@babel/runtime/package.json").version },
+ ],
  //Extract a css file from imported css files
  new MiniCssExtractPlugin({
    filename: cssOutputPattern,
  }),
],

Note: This is only for helper function reuse and polyfill is done in @babel/preset-env, so corejs: setting here is unnecessary.

[moshmage]

For the promised "no config" of webpack bundlers to work, I had to:

$ npm i -D @snowpack/plugin-webpack
$ npm i -D @snowpack/plugin-babel
$ npm i -D @babel/core @babel/preset-env @babel/plugin-proposal-class-properties
$ cat <<EOF >> snowpack.config.json
{
  "buildOptions": {
    "sourceMap": false
  },
  "plugins": [
    ["@snowpack/plugin-babel"],
    ["@snowpack/plugin-webpack"]
  ],
  "mount": {
    "src": "/_dist_/",
    "public": "/"
  }
}
EOF
$ cat <<EOF >> babel.config.json
{
  "plugins": [
    ["@babel/plugin-proposal-class-properties"]
  ]
}
EOF

Documentation however is a bit misleading, stating instead that all we need to do is, quote,

if we follow that documentation, we won't be able to correctly use @snowpack/plugin-webpack

[FredKSchott]

This is great, thanks for writing this up. I think this has drifted since those docs were written, and those missing dependencies used to be included indirectly (or maybe still are in create Snowpack App, which would explain why we missed this). You’re right that they can all be included directly now.

Would love a PR to tackle all of this, if you’re interested!

[kevinmnm]

Thank you so much!