'use strict' process.env.BABEL_ENV = 'renderer' const path = require('path') const { dependencies } = require('../package.json') const webpack = require('webpack') const CopyWebpackPlugin = require('copy-webpack-plugin') const MiniCssExtractPlugin = require('mini-css-extract-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const { VueLoaderPlugin } = require('vue-loader') let rendererConfig = { devtool: '#cheap-module-eval-source-map', entry: { renderer: path.join(__dirname, '../src/renderer/main.ts') }, module: { rules: [ { test: /\.(js|vue|ts)$/, enforce: 'pre', exclude: /node_modules/, use: { loader: 'eslint-loader', options: { formatter: require('eslint-friendly-formatter') } } }, { test: /\.scss$/, use: ['vue-style-loader', 'css-loader', 'sass-loader'] }, { test: /\.sass$/, use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax'] }, { test: /\.less$/, use: ['vue-style-loader', 'css-loader', 'less-loader'] }, { test: /\.css$/, use: ['vue-style-loader', 'css-loader'] }, { test: /\.html$/, use: 'vue-html-loader' }, { test: /\.ts$/, exclude: /node_modules/, use: [ { loader: 'babel-loader' }, { loader: 'ts-loader', options: { appendTsSuffixTo: [/\.vue$/] } } ] }, { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, { test: /\.node$/, use: 'node-loader' }, { test: /\.vue$/, use: { loader: 'vue-loader', options: { extractCSS: process.env.NODE_ENV === 'production', loaders: { js: 'ts-loader', ts: 'ts-loader', sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1', scss: 'vue-style-loader!css-loader!sass-loader', less: 'vue-style-loader!css-loader!less-loader' } } } }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: { loader: 'url-loader', options: { limit: 10000, name: 'imgs/[name]--[folder].[ext]', esModule: false } } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: 'media/[name]--[folder].[ext]' } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, use: { loader: 'url-loader', query: { limit: 10000, name: 'fonts/[name]--[folder].[ext]' } } }, { test: /\.json$/, exclude: /node_modules/, use: 'json-loader', type: 'javascript/auto' } ] }, node: { __dirname: process.env.NODE_ENV !== 'production', __filename: process.env.NODE_ENV !== 'production' }, plugins: [ new VueLoaderPlugin(), new MiniCssExtractPlugin({ filename: 'styles.css' }), new HtmlWebpackPlugin({ filename: 'index.html', template: path.resolve(__dirname, '../src/index.ejs'), minify: { collapseWhitespace: true, removeAttributeQuotes: true, removeComments: true }, nodeModules: process.env.NODE_ENV !== 'production' ? path.resolve(__dirname, '../node_modules') : false }), new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin() ], output: { filename: '[name].js', path: path.join(__dirname, '../dist/electron') }, resolve: { alias: { // Same as tsconfig.json '@': path.join(__dirname, '../src/renderer'), '~': path.join(__dirname, '../'), vue$: 'vue/dist/vue.esm.js' }, extensions: ['.ts', '.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.mode = 'production' rendererConfig.plugins.push( new CopyWebpackPlugin([ { from: path.join(__dirname, '../static'), to: path.join(__dirname, '../dist/electron/static'), ignore: ['.*', '*~'] } ]), new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }), new webpack.LoaderOptionsPlugin({ minimize: true }) ) } module.exports = rendererConfig