1

I am learning front-end development and currently try to understand how to use automatisation systems such as gulp, grunt or webpack. I currently picked webpack and the question is targeted to that system.

I understand its general use and built configurations to automate operations such as the compilation of .less files or minification CSS files.

The point which escapes me is that the development version of (as an example) an HTML file should differ from the production version. Specifically, my development file looks like

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="onestyle.css">
    <link rel="stylesheet" type="text/css" href="anotherstyle.css">
    <link rel="stylesheet" type="text/css" href="bootstrapmaybe.css">
  </head>
  <body>
  Hello World
  <script src="somelibrary.js" type="text/javascript"></script>
  <script src="myown.js" type="text/javascript"></script>
  </body>
</html>

while the production version is rather

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="allcssminified.min.css">
  </head>
  <body>
  Hello World
  <script src="alljsminified.min.js" type="text/javascript"></script>
  </body>
</html>

where allcssminified.min.css and alljsminified.min.js are generated from the the various components of the development file, transformed though the relevant webpack mechanism into a compressed version.

There should however be one HTML file, common to development and production contexts, adapted depending on the context (dev or prod).

How should this be approached with webpack?

  • Through some kind of HTML templating where an if-then-else condition would include the right section?
  • Or should the whole <link> or <script> includes sections be somehow generated and included by webpack (which to me looks like a templating approach as well, though the decision is made by webpack?
  • Or should there just be one include, and the components of this include would be defined in the webpack configuration file (in that case I always get the minified version, which is possibly not optimal for debugging)

Note: there was a similar question for grunt back in 2012-2014 but the solutions listed there are not relevant to webpack and, subjectively, not very aesthetical.

Community
  • 1
  • 1
WoJ
  • 27,165
  • 48
  • 180
  • 345

1 Answers1

0

CSS: I would use one main. css file (styles.css) in your application. Then @import all of the other .less or .scss files into styles.css. These will be compiled by WebPack assuming you are using the proper CSS loaders (style-loader, css-loader, less-loader).

JS: Define them in your entry config like so:

entry: ['./path/to/somelibrary.js', './path/to/myown.js']

They will get combined as well into one file.

bradmaxs
  • 23
  • 5