webpack-config

webpack-config.js

//ref: https://getbootstrap.com/docs/4.0/getting-started/webpack/

const config = require("./gulp-config.js")();
const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const currentDir = path.resolve();

let WPconfig = {
  module: {
  }
};

var JSConfig = Object.assign({}, WPconfig, {
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: [/node_modules/],
        loader: "eslint-loader",
        options: {
          //formatter: require("eslint-friendly-formatter"),
          quiet: true,
          failOnWarning: false,
          failOnError: false
        }
      },
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"]
        }
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
    }),
    new CopyWebpackPlugin([
      { from: config.wpJSInput, to: config.wpJSOutput },
      { from: config.brainJocksJSInput, to: config.brainJocksJSOutput}
    ])
  ],
  context: path.resolve(currentDir, config.inFolderPath),
  entry: {
    app: "./app.js"
  },
  output: {
    path: path.resolve(currentDir, config.outFolderPath),
    filename: "GrowingFamiliesWeb.bundle.js"
  },
  externals: {
    "jquery": "jQuery"
  }
});

var CssConfig = Object.assign({}, WPconfig, {
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader  
          },
          {
            // Adds CSS to the DOM by injecting a `<style>` tag
            loader: 'style-loader'
          },
          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader'
          },
          {
            // Loader for webpack to process CSS with PostCSS
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('autoprefixer')
                ];
              }
            }
          },
          {
            // Loads a SASS/SCSS file and compiles it to CSS
            loader: 'sass-loader'
          }
        ]
      },
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, use: 'file-loader'},
      //{test: /\.(woff|woff2)$/, use: 'url-loader?prefix=font/&limit=5000'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml'},
      {test: /\.(jpg|png|gif|otf|woff|woff2)$/, use: 'file-loader'},
    ]
  

  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css"
    })
  ],
  context: path.resolve(currentDir, config.inCSSFolderPath),
  entry: {
    main: "./main.scss"
  },
  output: {
    path: path.resolve(currentDir, config.outCSSFolderPath),
    filename: "main.css.tmp"
  }
});

module.exports = [
  JSConfig, CssConfig
];