Skip to content

CodeCoupler Webpack Lint, Check, Bundle

All imported language files, stylesheet files, HTML files and all linked assets will be bundled and/or otherwise processed and stored in a specific way in the dist directory.

Furthermore all build outputs (JS, CSS, Asset files) will be copied to the destination folder with a filename containing a hash value 1. This allows us to always use the most recent files in the browser when updating. The only thing you have to pay attention to is that the index.html file is never cached by the browser.

The integrated boilerplate contains a .htaccess file that serves as an example for use in an Apache server. For other servers, there is a good overview in a Stack Overflow answer: https://stackoverflow.com/a/2068407

Below we will look at each file type and explain what happens to it.

JS and TS Files

All *.js and *.ts files that you import (starting from src/index.js) will be bundled in one file into the dist folder. The name specified in the package.json will be used as filename comibined with an has value 1. You can also change the filename in bundle.jsName (see Configuration Reference).

Webpack will start with index.js as entry point. You can write here your init code and import from here further modules.

You can use modern ES6 syntax and use the ES6 modules standard in all of your JavaScript and TypeScript files. Using the integrated Bolierplate you are even prepared for experimental features (stage 3) like public and private field declarations in classes or decorators.

JavaScript and TypeScript files will be

  • linted (ESLint)
  • format checked (Prettier)
  • type checked if needed (typescript)
  • compiled (babel) to run on targeted browsers that are specified in .browserlistrc. and based on the configuration .babelrc
  • mangled and minimized (terser)
  • a copyright banner will be added (BannerPlugin)
  • and finally a source map file will be created if in developing mode 2.

CSS Standard Files

All imported CSS files will be bundled in one file into the dist folder. The name specified in the package.json will be used as filename comibined with an has value 1. You can also change the filename in bundle.cssName (see Configuration Reference). To require a CSS file just put an import "./path/to/your/file.css"; in any of your JavaScript or TypeScript files.

You can use modern and pure CSS without thinking about vendor prefixes or browser inconsistencies. Read more about all the modern CSS you can use here: preset-env

Your CSS will be:

  • converted and extended with polyfills (postcss-preset-env)
  • extended with vendor prefixes (autoprefixer) based on your targeted browsers specified in .browserlistrc
  • optimized and minimized (cssnano)
  • a copyright banner will be added (BannerPlugin)
  • and finally a Source Map file will be created if in developing mode 2.

CSS Module Files

All required CSS files which ends with *.module.css will be handled exactly like the other CSS files described above. Furthermore you can use the pseudo selectors :local and :global to define the scope of CSS classes.

The default scope is global. If can specify other scopes like local or pure by renaming the file ending to *.module-global.css (default), *.module-local.css or *.module-pure.css.

Read more about the different scopes here: CSS Module Scopes

Read more about CSS modules: CSS Modules

Vue Files

You can use .vue files in the src folder which will be compiled as vue single-file components into your final .js and .css files. You can use standard JavaScript inside of the script tag or class style TypeScript vue instances Documentation.

You can use <style module> to compile the stylesheet into CSS Modules and use the classes with $style Documentation. 3

Note: The style tag normally must not specified with the lang attribute to use modern CSS. It will always be parsed like any other CSS file (read above). But to work together in combination with the the Vetur validator you should use lang="postcss".

Note: Vue is included as dependency by default. So if you install cc-webpack you do not need to install vue in your project. Just use import Vue from "vue"; and you can start writing Vue Applications. If you do not want to include the Vue library into your bundle add the following to the file webpack.externals.js:

1
2
3
4
5
module.exports = [{
  module: "vue",
  global: "Vue",
  entries: ["dist/vue.runtime.global.prod.js"]
}];

Linked Assets

All linked assets like fonts and images (for example with @import and url() in a CSS file or linked with <img src="image.png"> in HTML or Vue files) will be extracted and saved separately.

For now only JPG and PNG files will be processed as images. If more assets than just JGP and PNG files are imported in the code, the list defined in the configuration option bundle.assetsTest (see Configuration Reference) must be extended. A Regex expression is expected which is set to /(\.png|\.jpg)/ by default.

SVG files will be handled separately (In Progress).

HTML Files and HTML Templates

All HTML files will be included in the final JavaScript bundle if you require them with import htmlText from "./path/to/your/file.html"; in any of your JavaScript, Vue or TypeScript files. You can access to the content of the HTML file via the variable defined in this import statement.

1
2
import htmlText from "./path/to/your/file.html";
let resultingHtml = htmlText;

If you need to write a HTML template you can set the end of the name of the HTML file *.ejs.html or *.template.html.

Files ending with *.ejs.html will be parsed by the package ejs. Files ending with *.template.html will be parsed by the underscore function template.

Then you can use variables like <%= locals["some-var"] %> in your template. All HTML templates will be included in the final JavaScript bundle

In your JavaScript file you require them and submit the properties of the variable data like this:

1
2
import htmlTemplate from "./path/to/your/file.ejs.html";
let resultingHtml = htmlTemplate({ "some-var": "some-value" });

To use the include methods of EJS you have to pay attention to this:

If you are using the ejs parser you cannot use the include() function. You have to use the include preprocessing statement:

1
<%- include inc/part.html %>

If you are using the template() function you have to include the content from variables like described here: Including nested templates:

index.js:

1
2
3
var mainTemplate = require("ejs!./main.ejs");
var hyperlinkTemplate = require("ejs!./hyperlink.ejs");
var renderedHtml = mainTemplate({ hyperlink: hyperlinkTemplate });

main.ejs:

1
<h1><%= hyperlink({ name: 'Example', url: 'http://example.com' }) %></h1>

hyperlink.ejs:

1
<a href="<%= url %>"><%= name %></a>

As a result, renderedHtml becomes a string <h1><a href="http://example.com">Example</a></h1>.

  1. Till 3.4 the JS and CSS files did not contain an hash value ↩↩↩

  2. Till 3.1 the source-map was also produced used in production mode ↩↩

  3. You can use 3 <style module> from Version 3.4 ↩↩