webpack.renderer.config.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. 'use strict'
  2. process.env.BABEL_ENV = 'renderer'
  3. const path = require('path')
  4. const { dependencies } = require('../package.json')
  5. const webpack = require('webpack')
  6. const MinifyPlugin = require("babel-minify-webpack-plugin")
  7. const CopyWebpackPlugin = require('copy-webpack-plugin')
  8. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  9. const HtmlWebpackPlugin = require('html-webpack-plugin')
  10. const { VueLoaderPlugin } = require('vue-loader')
  11. /**
  12. * List of node_modules to include in webpack bundle
  13. *
  14. * Required for specific packages like Vue UI libraries
  15. * that provide pure *.vue files that need compiling
  16. * https://simulatedgreg.gitbooks.io/electron-vue/content/en/webpack-configurations.html#white-listing-externals
  17. */
  18. let whiteListedModules = ['vue']
  19. let rendererConfig = {
  20. devtool: '#cheap-module-eval-source-map',
  21. entry: {
  22. renderer: path.join(__dirname, '../src/renderer/main.js')
  23. },
  24. externals: [
  25. ...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))
  26. ],
  27. module: {
  28. rules: [
  29. {
  30. test: /\.scss$/,
  31. use: ['vue-style-loader', 'css-loader', 'sass-loader']
  32. },
  33. {
  34. test: /\.sass$/,
  35. use: ['vue-style-loader', 'css-loader', 'sass-loader?indentedSyntax']
  36. },
  37. {
  38. test: /\.less$/,
  39. use: ['vue-style-loader', 'css-loader', 'less-loader']
  40. },
  41. {
  42. test: /\.css$/,
  43. use: ['vue-style-loader', 'css-loader']
  44. },
  45. {
  46. test: /\.html$/,
  47. use: 'vue-html-loader'
  48. },
  49. {
  50. test: /\.js$/,
  51. use: 'babel-loader',
  52. exclude: /node_modules/
  53. },
  54. {
  55. test: /\.node$/,
  56. use: 'node-loader'
  57. },
  58. {
  59. test: /\.vue$/,
  60. use: {
  61. loader: 'vue-loader',
  62. options: {
  63. extractCSS: process.env.NODE_ENV === 'production',
  64. loaders: {
  65. sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
  66. scss: 'vue-style-loader!css-loader!sass-loader',
  67. less: 'vue-style-loader!css-loader!less-loader'
  68. }
  69. }
  70. }
  71. },
  72. {
  73. test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  74. use: {
  75. loader: 'url-loader',
  76. query: {
  77. limit: 10000,
  78. name: 'imgs/[name]--[folder].[ext]'
  79. }
  80. }
  81. },
  82. {
  83. test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  84. loader: 'url-loader',
  85. options: {
  86. limit: 10000,
  87. name: 'media/[name]--[folder].[ext]'
  88. }
  89. },
  90. {
  91. test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  92. use: {
  93. loader: 'url-loader',
  94. query: {
  95. limit: 10000,
  96. name: 'fonts/[name]--[folder].[ext]'
  97. }
  98. }
  99. }
  100. ]
  101. },
  102. node: {
  103. __dirname: process.env.NODE_ENV !== 'production',
  104. __filename: process.env.NODE_ENV !== 'production'
  105. },
  106. plugins: [
  107. new VueLoaderPlugin(),
  108. new MiniCssExtractPlugin({filename: 'styles.css'}),
  109. new HtmlWebpackPlugin({
  110. filename: 'index.html',
  111. template: path.resolve(__dirname, '../src/index.ejs'),
  112. templateParameters(compilation, assets, options) {
  113. return {
  114. compilation: compilation,
  115. webpack: compilation.getStats().toJson(),
  116. webpackConfig: compilation.options,
  117. htmlWebpackPlugin: {
  118. files: assets,
  119. options: options,
  120. },
  121. process,
  122. };
  123. },
  124. minify: {
  125. collapseWhitespace: true,
  126. removeAttributeQuotes: true,
  127. removeComments: true
  128. },
  129. nodeModules: process.env.NODE_ENV !== 'production'
  130. ? path.resolve(__dirname, '../node_modules')
  131. : false
  132. }),
  133. new webpack.NoEmitOnErrorsPlugin()
  134. ],
  135. output: {
  136. filename: '[name].js',
  137. libraryTarget: 'commonjs2',
  138. path: path.join(__dirname, '../dist/electron')
  139. },
  140. resolve: {
  141. alias: {
  142. '@': path.join(__dirname, '../src/renderer'),
  143. 'vue$': 'vue/dist/vue.esm.js'
  144. },
  145. extensions: ['.js', '.vue', '.json', '.css', '.node']
  146. },
  147. target: 'electron-renderer'
  148. }
  149. /**
  150. * Adjust rendererConfig for development settings
  151. */
  152. if (process.env.NODE_ENV !== 'production') {
  153. rendererConfig.plugins.push(
  154. new webpack.HotModuleReplacementPlugin(),
  155. new webpack.DefinePlugin({
  156. '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
  157. })
  158. )
  159. }
  160. /**
  161. * Adjust rendererConfig for production settings
  162. */
  163. if (process.env.NODE_ENV === 'production') {
  164. rendererConfig.devtool = ''
  165. rendererConfig.plugins.push(
  166. new MinifyPlugin(),
  167. new CopyWebpackPlugin([
  168. {
  169. from: path.join(__dirname, '../static'),
  170. to: path.join(__dirname, '../dist/electron/static'),
  171. ignore: ['.*']
  172. }
  173. ]),
  174. new webpack.DefinePlugin({
  175. 'process.env.NODE_ENV': '"production"'
  176. }),
  177. new webpack.LoaderOptionsPlugin({
  178. minimize: true
  179. })
  180. )
  181. }
  182. module.exports = rendererConfig