webpack.renderer.config.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  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. name: 'imgs/[name].[ext]'
  72. }
  73. }
  74. },
  75. {
  76. test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  77. loader: 'url-loader',
  78. options: {
  79. limit: 10000,
  80. name: 'media/[name]--[folder].[ext]'
  81. }
  82. },
  83. {
  84. test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  85. use: {
  86. loader: 'url-loader',
  87. query: {
  88. limit: 10000,
  89. name: 'fonts/[name]--[folder].[ext]'
  90. }
  91. }
  92. }
  93. ]
  94. },
  95. node: {
  96. __dirname: process.env.NODE_ENV !== 'production',
  97. __filename: process.env.NODE_ENV !== 'production'
  98. },
  99. plugins: [
  100. new VueLoaderPlugin(),
  101. new MiniCssExtractPlugin({filename: 'styles.css'}),
  102. new HtmlWebpackPlugin({
  103. filename: 'index.html',
  104. template: path.resolve(__dirname, '../src/index.ejs'),
  105. /*templateParameters(compilation, assets, options) {
  106. return {
  107. compilation: compilation,
  108. webpack: compilation.getStats().toJson(),
  109. webpackConfig: compilation.options,
  110. htmlWebpackPlugin: {
  111. files: assets,
  112. options: options
  113. },
  114. process,
  115. };
  116. },*/
  117. minify: {
  118. collapseWhitespace: true,
  119. removeAttributeQuotes: true,
  120. removeComments: true
  121. },
  122. nodeModules: process.env.NODE_ENV !== 'production'
  123. ? path.resolve(__dirname, '../node_modules')
  124. : false
  125. }),
  126. new webpack.HotModuleReplacementPlugin(),
  127. new webpack.NoEmitOnErrorsPlugin()
  128. ],
  129. output: {
  130. filename: '[name].js',
  131. libraryTarget: 'commonjs2',
  132. path: path.join(__dirname, '../dist/electron')
  133. },
  134. resolve: {
  135. alias: {
  136. '@': path.join(__dirname, '../src/renderer'),
  137. 'vue$': 'vue/dist/vue.esm.js',
  138. 'static':path.resolve(__dirname,'../static')
  139. },
  140. extensions: ['.js', '.vue', '.json', '.css', '.node'],
  141. modules: [path.resolve('node_modules'), 'node_modules'],
  142. },
  143. target: 'electron-renderer'
  144. }
  145. /**
  146. * Adjust rendererConfig for development settings
  147. */
  148. if (process.env.NODE_ENV !== 'production') {
  149. rendererConfig.plugins.push(
  150. new webpack.DefinePlugin({
  151. '__static': `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
  152. })
  153. )
  154. }
  155. /**
  156. * Adjust rendererConfig for production settings
  157. */
  158. if (process.env.NODE_ENV === 'production') {
  159. rendererConfig.devtool = ''
  160. rendererConfig.plugins.push(
  161. new MinifyPlugin(),
  162. new CopyWebpackPlugin([
  163. /*{
  164. from: path.join(__dirname, '../static'),
  165. to: path.join(__dirname, '../dist/electron/static'),
  166. ignore: ['.*']
  167. }*/
  168. {
  169. from: path.resolve(__dirname, '../static'),
  170. to: '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