webpack.renderer.config.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  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: /\.less$/,
  31. use: ['vue-style-loader', 'css-loader', 'less-loader']
  32. },
  33. {
  34. test: /\.css$/,
  35. use: ['vue-style-loader', 'css-loader']
  36. },
  37. {
  38. test: /\.html$/,
  39. use: 'vue-html-loader'
  40. },
  41. {
  42. test: /\.js$/,
  43. use: 'babel-loader',
  44. exclude: /node_modules/
  45. },
  46. {
  47. test: /\.node$/,
  48. use: 'node-loader'
  49. },
  50. {
  51. test: /\.vue$/,
  52. use: {
  53. loader: 'vue-loader',
  54. options: {
  55. extractCSS: process.env.NODE_ENV === 'production',
  56. loaders: {
  57. sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax=1',
  58. scss: 'vue-style-loader!css-loader!sass-loader',
  59. less: 'vue-style-loader!css-loader!less-loader'
  60. }
  61. }
  62. }
  63. },
  64. {
  65. test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  66. use: {
  67. loader: 'url-loader',
  68. query: {
  69. limit: 10000,
  70. name: 'imgs/[name]--[folder].[ext]'
  71. }
  72. }
  73. },
  74. {
  75. test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  76. loader: 'url-loader',
  77. options: {
  78. limit: 10000,
  79. name: 'media/[name]--[folder].[ext]'
  80. }
  81. },
  82. {
  83. test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  84. use: {
  85. loader: 'url-loader',
  86. query: {
  87. limit: 10000,
  88. name: 'fonts/[name]--[folder].[ext]'
  89. }
  90. }
  91. }
  92. ]
  93. },
  94. node: {
  95. __dirname: process.env.NODE_ENV !== 'production',
  96. __filename: process.env.NODE_ENV !== 'production'
  97. },
  98. plugins: [
  99. new VueLoaderPlugin(),
  100. new MiniCssExtractPlugin({filename: 'styles.css'}),
  101. new HtmlWebpackPlugin({
  102. filename: 'index.html',
  103. template: path.resolve(__dirname, '../src/index.ejs'),
  104. /*templateParameters(compilation, assets, options) {
  105. return {
  106. compilation: compilation,
  107. webpack: compilation.getStats().toJson(),
  108. webpackConfig: compilation.options,
  109. htmlWebpackPlugin: {
  110. files: assets,
  111. options: options
  112. },
  113. process,
  114. };
  115. },*/
  116. minify: {
  117. collapseWhitespace: true,
  118. removeAttributeQuotes: true,
  119. removeComments: true
  120. },
  121. nodeModules: process.env.NODE_ENV !== 'production'
  122. ? path.resolve(__dirname, '../node_modules')
  123. : false
  124. }),
  125. new webpack.HotModuleReplacementPlugin(),
  126. new webpack.NoEmitOnErrorsPlugin()
  127. ],
  128. output: {
  129. filename: '[name].js',
  130. libraryTarget: 'commonjs2',
  131. path: path.join(__dirname, '../dist/electron')
  132. },
  133. resolve: {
  134. alias: {
  135. '@': path.join(__dirname, '../src/renderer'),
  136. 'vue$': 'vue/dist/vue.esm.js',
  137. 'static':path.resolve(__dirname,'../static')
  138. },
  139. extensions: ['.js', '.vue', '.json', '.css', '.node']
  140. },
  141. target: 'electron-renderer'
  142. }
  143. /**
  144. * Adjust rendererConfig for development settings
  145. */
  146. if (process.env.NODE_ENV !== 'production') {
  147. rendererConfig.plugins.push(
  148. new webpack.DefinePlugin({
  149. '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
  150. })
  151. )
  152. }
  153. /**
  154. * Adjust rendererConfig for production settings
  155. */
  156. if (process.env.NODE_ENV === 'production') {
  157. rendererConfig.devtool = ''
  158. rendererConfig.plugins.push(
  159. new MinifyPlugin(),
  160. new CopyWebpackPlugin([
  161. {
  162. from: path.join(__dirname, '../static'),
  163. to: path.join(__dirname, '../dist/electron/static'),
  164. ignore: ['.*']
  165. }
  166. ]),
  167. new webpack.DefinePlugin({
  168. 'process.env.NODE_ENV': '"production"'
  169. }),
  170. new webpack.LoaderOptionsPlugin({
  171. minimize: true
  172. })
  173. )
  174. }
  175. module.exports = rendererConfig