jcr-webpack-static/webpack/webpack.config.js

Starter Kit para Frontends con el stack de HandleBars , SCSS , Babel , ITCSS , PostCSS , Autoprefixer y Webpack.

const path = require('path'),
      HtmlWebpackPlugin = require('html-webpack-plugin'),
      MiniCssExtractPlugin = require('mini-css-extract-plugin'),
      autoprefixer = require('autoprefixer'),
      CopyPlugin = require('copy-webpack-plugin'),
      { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  entry: ['@babel/polyfill', './src/app.js'],
  output: {
    path: path.resolve(__dirname, '../public'),
    filename: 'index.[hash].js',
  },
  devServer: {
    port: 4000,
    open: true,
  },
  module: {
    rules: [{
      test: /\.hbs$/,
      loader: 'handlebars-loader',
    },
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: ['babel-loader', 'eslint-loader'],
    },
    {
      test: /\.(sa|sc|c)ss$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            autoprefixer: {
              browser: ['last 2 versions'],
            },
            plugins: () => [
              autoprefixer,
            ],
          },
        },
        'sass-loader',
      ],
    },
    {
      test: /\.(?:ico|gif|png|jpg|jpeg|webp|svg)$/i,
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'assets/media/',
        useRelativePath: true,
      },
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
        disable: true,
      },
    },
    {
      test: /\.(ttf|eot|woff2?|mp3|mp4|txt|pdf|xml)$/i,
      use: 'file-loader?name=data/[name].[ext]',
    },

    ],
  },

  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/pages/index.hbs',
      minify: {
        html5: true,
        collapseWhitespace: false,
        caseSensitive: true,
        removeComments: true,
        removeEmptyElements: false,
      },
    }),
    new MiniCssExtractPlugin({
      filename: 'index.[hash].css',
    }),

    new CopyPlugin([{
      from: './src/assets/',
      to: 'assets/',
      ignore: ['*.DS_Store'],
    }]),


  ],
};