benjaminpreiss/webpack_conf

A webpack configuration for webdevs using scss, postcss, html and js. Based on HtmlWebpackPlugin. Comes with postcss autoprefixer.

webpack_conf's Issues

Split wepack configuration with webpack merge

As described in this article webpack configuration can be split.

After splitting we should have three files:

1. base file: configurtion shared between production and development
2. prod file: configuration unique to production
3. dev file: configuration unique to development

Add .gitignore file

Add sourceType parserOptions to **.eslintrc**

When using import and export in js files eslint produces and error:

'import' and 'export' may appear only with 'sourceType: module'

That can be mitigated by adding the following parser options to .eslintrc:

    "parserOptions": {
        "sourceType": "module"
    }

Extend stylelint with browserslist funcitonality (stylelint-no-unsupported-browser plugin)

Add Clean Webpack Plugin

Recommend markdownlint in README.md

Extend standardx linting with plugin eslint-plugin-compat

Extend standard style linting with eslint-plugin-compat plugin. This plugin looks into browserslist and checks whether written code is conform.

Configure npm linting test in package.json to use this plugin

Add sass-loader json variable file support

Outsource variables to variables.json file and reference them in sass and js.

Improve README vscode stylelint settings.json

Explain how to configure vscode stylelint extension to be

1. enabled
2. not conflicting with the built in vs code extensions.

How to:

1. Add a folder .vscodein the workspace folder
2. Add a file to this folder called settings.json
3. Add the following lines to this settings.json:

{
    "window.zoomLevel": -1,
    "css.validate": false,
    "less.validate": false,
    "scss.validate": false,
    "stylelint.enable": true
}

add styleLint support

integrate stylelint and add it to npm linting tests.

Also install vscode extension!

Change .stylelintrc indentation to 4 spaces

Add this line to .stylelintrc:

"rules": {
        "indentation": 4
    }

Add postcss normalize functionality

Add rfs functionality and change README

Install missing dep **webpack-cli**

Add webpack-cli to node_modules:

npm install --save-dev webpack-cli

Change htmlhint id and class separation char

Currently htmlhint enforces id and class separation characters to be underdashes.

Change this to dashes.

Disable duplicate font bundling for svgs

Currently svg fonts are bundled twice. Once with svg loader and once with font loader. That has to be disabled.

Add chunks option to html webpack plugin

Generating more than one html file leaves the question which html file should contain which files specified in the webpack config entries.

This can be defined with the chunks option.

For every htmlwebpackplugin instance, declare the entry-name which should be used.
E.g. for lemon.html we would take the 'lemon' entry:

    new HtmlWebpackPlugin({
      chunks: ['lemon'],
      template: './src/html/lemon.html',
      filename: './html/lemon.html',
    }),

Change .eslintrc.json to support es6 syntax

Add

"env": {
    "es6": true
}

to .eslintrc.json

Image-webpack-loader: PNG support not compiled. Please install the libpng development package before building.

Add libpng package to nodejs install command.

Add logic to only optimize images in production mode

Image-webpack-loader should only optimize images in production mode.

Add: disable: true to the image-webpack-loader options.

Add HtmlHint functionality

Add Q&A.md

Q&A.md should be a list of questions that appear when implementing a website.

add esLint support with standardx

Add font file-loader to webpack

in case of dedicated font files (e.g. usage of @font-face):

1. provide a file-loader to load the fonts
2. add a resolve rule for these font-urls

How to Code font-face guide

Add my experience with @font-face to code guide:

1. @font-face declaration, how to download fonts with fontsquirrel.com
   a. If a normal fallback font suffices, do it!
   b. If you need you can use modernizr and adjust more than only the font in case of fallback. Here is a good link: https://webdesignerwall.com/tutorials/css3-font-face-design-guide

Modify Readme with VS Code window reload instruction

Add a last step to README.md install instructions:

Whenever changes to configuration files are made, reload the window in VS Code:

1. Ctrl + Shift + P
2. type Reload Window

This has to be done to make extensions reload their configuration files (e.g. stylelint and .stylelintrc)

Add CopyWebpackPlugin

add CopyWebpackPlugin for assets that are not passed to a loader by reference

Two webpack configuration files depending on mode

Create two configuration files for webpack:

1. webpack_production.config.js
2. webpack_development.config.js

For production mode:

1. mode: production
2. Omit devtool option
3. Output files to dist folder

For development mode:

1. mode: development
2. devtool: 'source-map'
3. Output files to dev-server

Don't forget to add corresponding entries in package.json for each mode