@travlrcom/icons/webpack/webpack.config.site.js

TRAVLR Icons

const rootPath = './../';
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const UikitDocsPage = require(`${rootPath}src/assets/docs/js/config/uikitPages`);
const getDataPage = require(`${rootPath}src/assets/docs/js/library/getDataPage`);

module.exports = (args = {}) => {
  const mode = args.mode || 'production'

  return {
    mode,
    devtool: mode === 'production' ? 'none' : 'inline-source-map',
    entry: Object.assign({
      app: [
        './src/nodelist',
        'polyfills',
        '@travlrcom/uikit/src/scss/app.scss',
        '@travlrcom/uikit/src/travlruikit',
        path.resolve(__dirname, `${rootPath}src/app.js`)
      ],
    }, mode === 'production' ? {
      // production entry
    } : {
      // development entry
      docs: [
        path.resolve(__dirname, `${rootPath}src/index.js`)
      ],
    }),
    output: {
      libraryTarget: 'umd',
      // This option determines the name of each output bundle.
      filename: mode === 'production' ? '[name].[contenthash].js' : '[name].js',
      path: path.resolve(__dirname, `${rootPath}lib`)
    },
    resolve: {
      alias: {
        '~': path.resolve(__dirname, rootPath),
        '@assets': path.resolve(__dirname, `${rootPath}src`)
      }
    },
    plugins: [
      // Html Webpack Plugins
      ...UikitDocsPage.map(page => new HtmlWebpackPlugin(
        Object.assign({}, {
          filename: `${page}.html`,
          template: path.resolve(__dirname, `${rootPath}site/page/${page}.html`),
          inject: 'body',
          templateParamaters: true,
          minify: {
            html5                          : true,
            collapseWhitespace             : true,
            minifyCSS                      : true,
            minifyJS                       : true,
            minifyURLs                     : false,
            removeAttributeQuotes          : true,
            removeComments                 : true,
            removeEmptyAttributes          : true,
            removeOptionalTags             : true,
            removeRedundantAttributes      : true,
            removeScriptTypeAttributes     : true,
            removeStyleLinkTypeAttributese : true,
            useShortDoctype                : true
          }
        }, getDataPage(page))
      )),
      // Clean the output folder
      new CleanWebpackPlugin(path.resolve(__dirname, `${rootPath}lib`), {
        root: __dirname,
        verbose: false
      }),
      ...(mode === 'production' ? [
        // production plugins
        new MiniCssExtractPlugin({
          filename: mode === 'production' ? '[name].[contenthash].css' : '[name].css'
        })
      ] : [
        // production plugins
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
      ]),
    ],
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: [
								['@babel/preset-env', {
									// - If useBuiltIns: 'usage' is specified in .babelrc then do not include @babel/polyfill in either webpack.config.js entry array
									//   nor source. Note, @babel/polyfill still needs to be installed.
									// - If useBuiltIns: 'entry' is specified in .babelrc then include @babel/polyfill at the top of the entry point to your application
									//   via require or import
									// - If useBuiltIns key is not specified or it is explicitly set with useBuiltIns: false in your .babelrc, add @babel/polyfill
									//   directly to the entry array in your webpack.config.js.
									useBuiltIns: 'entry'
								}]
							],
							plugins: [
								['@babel/plugin-transform-modules-commonjs', {
									strictMode: false
								}]
							]
            }
          }
        },
        {
          test: /\.(scss|sass)$/,
          use: [
            mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader',
            'sass-loader'
          ]
        },
        {
          test: /\.(png|jpg|jpeg|woff|woff2|eot|ttf|svg|webp)$/,
          use: {
            loader: 'file-loader'
          }
        }
        // {
        //   test: /\.(html)$/,
        //   include: path.join(__dirname, `${pathRoot}site/components`),
        //   use: {
        //     loader: 'html-loader',
        //     options: {
        //       interpolate: true
        //     }
        //   }
        // }
      ]
    },
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: true // set to true if you want JS source maps
        }),
        new OptimizeCSSAssetsPlugin({})
      ]
    },
    devServer: {
      compress: true,
      port: '8989',
      hot: true,
      inline: true,
      contentBase: [
        path.resolve(__dirname, `${rootPath}lib`)
      ],
      watchContentBase: true
    }
  };
};