webpack.renderer.config.js

'use strict';

//if ( typeof(process.env.BABEL_ENV) === "undefined" ) {
//  process.env.BABEL_ENV = 'renderer';
//}

const path = require('path');
const { dependencies, productName } = require('./package.json');
const webpack = require('webpack');

const outputDir = path.join(__dirname, "output");

const BabiliWebpackPlugin = require('babili-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

var htmlPageOptions = function(id, title) {
  return {
    filename: id + '.html',
    template: path.resolve(__dirname, 'src/index.ejs'),
    id: id,
    title: productName + ": " + title,
    minify: {
      collapseWhitespace: true,
      removeAttributeQuotes: true,
      removeComments: true
    },
    nodeModules: process.env.NODE_ENV !== 'production' ? path.resolve(__dirname, 'node_modules') : false
  }
};

/**
 * List of node_modules to include in webpack bundle
 *
 * Required for specific packages like Vue UI libraries
 * that provide pure *.vue files that need compiling
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
 */
let whiteListedModules = ['vue'];

let rendererConfig = {
  //devtool: '#cheap-module-eval-source-map',
  devtool: '#source-map',
  entry: {
    renderer: path.join(__dirname, 'src/renderer/main.js')
  },
  externals: [
    ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
  ],
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        enforce: 'pre',
        exclude: /node_modules/,
        include: [
          // use `include` vs `exclude` to white-list vs black-list
          //path.resolve(__dirname, "src"), // white-list your app source files
          require.resolve("bootstrap-vue"), // white-list bootstrap-vue
        ],
        use: {
          loader: 'eslint-loader',
          options: {
            formatter: require('eslint-friendly-formatter')
          }
        }
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
      {
        test: /\.(scss)$/,
        use: [{
          loader: 'style-loader', // inject CSS to page
        }, {
          loader: 'css-loader', // translates CSS into CommonJS modules
        }, {
          loader: 'sass-loader' // compiles SASS to CSS
        }]
      },
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader',
          options: {
            extractCSS: process.env.NODE_ENV === 'production',
            loaders: {
              sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
              scss: 'vue-style-loader!css-loader!sass-loader'
            }
          }
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: {
          loader: 'url-loader',
          query: {
            limit: 10000,
            name: 'imgs/[name]--[folder].[ext]'
          }
        }
      },
    ]
  },
  node: {
    //    __dirname: process.env.NODE_ENV !== 'production',
    //    __filename: process.env.NODE_ENV !== 'production'
    __dirname: false,
    __filename: false
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new HtmlWebpackPlugin(htmlPageOptions("prefs", "Preferences")),
    new HtmlWebpackPlugin(htmlPageOptions("editor", "Editor")),    
    new HtmlWebpackPlugin(htmlPageOptions("new", "Create Screensaver!")),
    new HtmlWebpackPlugin(htmlPageOptions("about", "About!")),
    new CopyWebpackPlugin(
      [
        {
          from: path.join(__dirname, 'src', 'renderer', 'assets'),
          to: path.join(outputDir, 'assets'),
          ignore: ['.*']
        }
      ]
    ),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ],
  output: {
    filename: '[name].js',
    libraryTarget: 'commonjs2',
    path: outputDir
  },
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src/renderer'),
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['.js', '.vue', '.json', '.css', '.node']
  },
  target: 'electron-renderer'
}

/**
 * Adjust rendererConfig for development settings
 */
/*if (process.env.NODE_ENV !== 'production') {
  rendererConfig.plugins.push(
    new webpack.DefinePlugin({
      '__static': `"${path.join(__dirname, 'static').replace(/\\/g, '\\\\')}"`
    })
  )
}*/

/**
 * Adjust rendererConfig for production settings
 */
if (process.env.NODE_ENV === 'production') {
  rendererConfig.devtool = ''

  rendererConfig.plugins.push(
    new BabiliWebpackPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  )
}

module.exports = rendererConfig;