info-sapphire / webpack-template

clean webpack 4 template with instructions for connecting modules

Webpack Template

This is the clear basic version of the template for creating projects. It contains several additional instructions on how to configure the additional modules you need. I hope this reduces the likelihood that you will have to create your own webpack configuration.

• How to install?
• How to use?
• Project Structures
• Path Configuration
• Import JS Modules
• Add new html page
• Import custom fonts

Installation:

# Download repository:
git clone https://github.com/info-sapphire/webpack-template

Basic Usage:

# Go to the project folder:
cd webpack-template

# Install dependencies:
npm install

# Dev server with hot reload at http://localhost:8080/
npm run dev

# Output will be at dist/ folder
npm run build

Project Structure:

• src: source folder
  • assets:
    • scss: put custom SCSS styles here.
    • css: the same as above but CSS here.
    • fonts: put your font here.
    • images: put your images here.
  • js: put your custom scripts here.
  • static: folder with extra static assets that will be copied into output folder.
  • main.js: your main entry point, you may import all required libs here.

Config paths:

You may easy reconfigurate path to move all files.

const PATHS = {
    // path to source dir
    src: path.resolve(__dirname, '..', 'src'),
    // path to output dir
    dist: path.resolve(__dirname, '..', 'dist'),
    // path to configuration dir
    config: path.resolve(__dirname, '..', 'config'),
    // path to static dir (js/scss/ etc ...)
    assets: 'assets'
};

Customize paths:

Change output folders:

const PATHS = {
    ...
    dist: path.join(__dirname, '../public')
    ...
}

Import js files:

1. Create another js module in ./src/js/ folder
2. Import modules in ./src/main.js or another entry:

// import js module for example
import '~/js/example.js'

if you want to import files into js modules you need to install file-loader

npm i --save-dev file-loader

Added new rules in ./config/webpack.default.config.js:

module: {
    rules: [
        ...
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            },
            {
                test: /\.(gif|png|jpe?g|svg)$/,
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            }
        ...
    ]
}

now you can use it as:

// import image in as module
import icon from '~/assets/icons/icon.svg';

if you want you can set the output folder for the imported images:

...
    options: {
        name: '[name].[hash].[ext]',
        outputPath: `${PATHS.assets}/images`
    }
...

Create another HTML Page:

1. Сreate a directory in ./src/ for future pages, for ex: views then we need to modify the configuration files
2. Edit ./config/path.js:

    ...
    // import file system module
    const fs = require('fs');

    // create a path to the folder with pages
    const PAGES_DIR = path.join(PATHS.src, 'views');
    // get all our pages from the folder
    const PAGES = fs.readdirSync(PAGES_DIR).filter(page => page.endsWith('.html'));

    module.exports = {
        ...
        // export new path constant
        PAGES_DIR,
        PAGES
    }

3. Edit ./config/webpack.default.config.js:

    ...
    // add the constants that we created earlier
    const { ... PAGES_DIR, PAGES } = require('./path');

• Replace this code:

   module.exports = {
       ...
       plugins: [
           ...
           new HtmlWebpackPlugin({
               hash: false,
               template: `${PATHS.src}/index.html`,
               filename: 'index.html',
           })
       ]
   }

• on this:

   module.exports = {
       ...
       plugins: [
           ...
           ...PAGES.map(page => new HtmlWebpackPlugin({
               template: `${PAGES_DIR}/${page}`,
               filename: `./${page}`
           }))
       ]
   }

4. Now you can create new page in a previously created folder ./src/views/, for ex: about.html
5. Open new page http://localhost:8080/about.html (Do not forget to restart the server)

Add your fonts:

1. Put your font ./src/assets/fonts{your_font}, for ex: Roboto
2. Register new @font-face in ./src/assets/scss/{your_file}.scss:

// Example with Roboto
@font-face {
  font-family: "Roboto";
  src: url('/assets/fonts/Roboto/Roboto.eot'); /* IE9 Compat Modes */
  src: url('/assets/fonts/Roboto/Roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/assets/fonts/Roboto/Roboto.woff') format('woff'), /* Pretty Modern Browsers */
       url('/assets/fonts/Roboto/Roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('/assets/fonts/Roboto/Roboto.svg') format('svg'); /* Legacy iOS */
}

3. Then you can add new variable in ./src/assets/scss/utilities/variables.scss:

$myCustomFont : 'Roboto', Helvetica, sans-serif;