philipwalton / webpack-esnext-boilerplate

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

This is not the approach that you write about

lhoff opened this issue · comments

commented

I came here after reading your article https://philipwalton.com/articles/deploying-es2015-code-in-production-today/. However, this project does not even have a webpack.config.js file. Instead, you have created a compiler of your own. This makes it difficult to identify where our setup might be incorrectly configured.

Our approach to building webpack/babel projects utilizes the standard webpack.config.js file. I followed the steps outlined in your article and created two module.exports sections within that file, with the following differences in the filename property:

/* ES5 bundle */
module.exports = {
  output: {
    filename: 'app.es5.js',
    path: path.join(__dirname, '/build'),
  },
...
}
/* ES2015+ bundle */

module.exports = {
  output: {
    filename: 'app.mjs',
    path: path.join(__dirname, '/build'),
  },
...
}

The browser targets were also set differently, per the example in the article.

According to the article,

When run, these two configs will output two, production-ready JavaScript files:
main.mjs (the syntax will be ES2015+)
main.es5.js (the syntax will be ES5)

However, when I run webpack --mode development, the ES5 bundle is not even created. Only the ES2015+ bundle is created.

Why would webpack not generate both bundles?

Thank you for your insights.

commented

Found my error. Per https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations, module.exports should be assigned to an array containing the different configurations.

This is not clear from the original article. You might want to update the article to reflect this.

Thanks!

However, this project does not even have a webpack.config.js file. Instead, you have created a compiler of your own.

Using a webpack.config.js is not required when using webpack. In fact, I personally find it to be much easier to manage a complex build process by running webpack via it node API rather using its command line API, but either is perfectly fine for you to use.

Here's a more recently written post that might fit a bit better with your dev style: https://calendar.perfplanet.com/2018/doing-differential-serving-in-2019/

commented

Here's a more recently written post that might fit a bit better with your dev style: https://calendar.perfplanet.com/2018/doing-differential-serving-in-2019/

I appreciate the info. Thanks very much!