webpack.config.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. const path = require('path');
  2. const CleanWebpackPlugin = require("clean-webpack-plugin");
  3. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  4. const HtmlWebpackPlugin = require('html-webpack-plugin');
  5. const autoprefixer = require('autoprefixer');
  6. const outputDirectory = "build";
  7. var config = {
  8. devtool: 'source-map',
  9. module: {
  10. rules: [
  11. {
  12. test: /.(ts)$/,
  13. loader: 'ts-loader',
  14. options: {
  15. transpileOnly: true,
  16. configFile: path.resolve(__dirname, './tsconfig.json')
  17. },
  18. exclude: /node_modules/
  19. },
  20. {
  21. test: /\.jsx?$/,
  22. exclude: /node_modules/,
  23. use: [
  24. {
  25. loader: 'babel-loader',
  26. options: {
  27. presets: ['react']
  28. }
  29. }
  30. ]
  31. },
  32. {
  33. test: /\.(sa|sc|c)ss$/,
  34. use: [
  35. MiniCssExtractPlugin.loader,
  36. {
  37. loader: "css-loader",
  38. options: {
  39. modules: false,
  40. sourceMap: true,
  41. importLoader: 2
  42. }
  43. },
  44. "sass-loader"
  45. ]
  46. },
  47. {
  48. test: /\.(cur|ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
  49. use: {
  50. loader: 'file-loader',
  51. query: {
  52. name: '[name].[hash:8].[ext]',
  53. outputPath: './assets/media/',
  54. publicPath: '/'
  55. }
  56. }
  57. },
  58. {
  59. test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
  60. use: {
  61. loader: 'url-loader',
  62. query: {
  63. limit: 10000,
  64. name: '[name].[hash:8].[ext]',
  65. outputPath: './assets/media/',
  66. publicPath: '/'
  67. }
  68. }
  69. }
  70. ]
  71. },
  72. devServer: {
  73. historyApiFallback: true,
  74. port: 3000,
  75. open: true
  76. },
  77. node: {
  78. fs: "empty"
  79. },
  80. stats: {
  81. // One of the two if I remember right
  82. entrypoints: false,
  83. children: false
  84. },
  85. plugins: [
  86. new CleanWebpackPlugin([outputDirectory]),
  87. new HtmlWebpackPlugin({
  88. template: './public/index.html',
  89. }),
  90. new MiniCssExtractPlugin({
  91. filename: "style.css",
  92. chunkFilename: "[name].css"
  93. })
  94. ]
  95. };
  96. var certConfig = Object.assign({}, config, {
  97. name: "cert",
  98. entry: "./src/cert.ts",
  99. output: {
  100. library: 'Cert',
  101. path: path.resolve(__dirname, outputDirectory),
  102. filename: "index.ts"
  103. },
  104. });
  105. var brandingConfig = Object.assign({}, config, {
  106. name: "branding",
  107. entry: "./src/index.js",
  108. output: {
  109. library: 'Branding',
  110. libraryTarget: 'umd',
  111. path: path.resolve(__dirname, outputDirectory),
  112. filename: "index.js"
  113. },
  114. });
  115. module.exports = [
  116. certConfig, brandingConfig,
  117. ];
  118. // module.exports = mode => {
  119. // console.log('WEBPACK MODE: ', mode);
  120. // const PROD = (mode.WEBPACK_BUILD || false)
  121. // console.log('EXPORTS PROD: ', PROD);
  122. // return {
  123. // entry: PROD ? {
  124. // 'branding': './src/branding.js',
  125. // 'cert': './src/cert.ts',
  126. // } : './src/index.js',
  127. // output: {
  128. // library: 'Branding',
  129. // libraryTarget: 'umd',
  130. // path: path.resolve(__dirname, outputDirectory),
  131. // filename: '[name].js'
  132. // },
  133. // // entry: PROD ? './src/branding.js' : './src/index.js',
  134. // // output: {
  135. // // library: 'Branding',
  136. // // libraryTarget: 'umd',
  137. // // path: path.resolve(__dirname, outputDirectory),
  138. // // filename: 'index.js',
  139. // // },
  140. // devtool: 'source-map',
  141. // module: {
  142. // rules: [
  143. // {
  144. // test: /.(ts)$/,
  145. // loader: 'ts-loader',
  146. // options: {
  147. // transpileOnly: true,
  148. // configFile: path.resolve(__dirname, './tsconfig.json')
  149. // },
  150. // exclude: /node_modules/
  151. // },
  152. // {
  153. // test: /\.jsx?$/,
  154. // exclude: /node_modules/,
  155. // use: [
  156. // {
  157. // loader: 'babel-loader',
  158. // options: {
  159. // presets: ['react']
  160. // }
  161. // }
  162. // ]
  163. // },
  164. // {
  165. // test: /\.(sa|sc|c)ss$/,
  166. // use: [
  167. // MiniCssExtractPlugin.loader,
  168. // {
  169. // loader: "css-loader",
  170. // options: {
  171. // modules: false,
  172. // sourceMap: true,
  173. // importLoader: 2
  174. // }
  175. // },
  176. // "sass-loader"
  177. // ]
  178. // },
  179. // {
  180. // test: /\.(cur|ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
  181. // use: {
  182. // loader: 'file-loader',
  183. // query: {
  184. // name: '[name].[hash:8].[ext]',
  185. // outputPath: './assets/media/',
  186. // publicPath: '/'
  187. // }
  188. // }
  189. // },
  190. // {
  191. // test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
  192. // use: {
  193. // loader: 'url-loader',
  194. // query: {
  195. // limit: 10000,
  196. // name: '[name].[hash:8].[ext]',
  197. // outputPath: './assets/media/',
  198. // publicPath: '/'
  199. // }
  200. // }
  201. // }
  202. // ]
  203. // },
  204. // devServer: {
  205. // historyApiFallback: true,
  206. // port: 3000,
  207. // open: true
  208. // },
  209. // node: {
  210. // fs: "empty"
  211. // },
  212. // stats: {
  213. // // One of the two if I remember right
  214. // entrypoints: false,
  215. // children: false
  216. // },
  217. // plugins: [
  218. // ...(PROD ? [new CleanWebpackPlugin([outputDirectory])] : []),
  219. // new HtmlWebpackPlugin({
  220. // template: './public/index.html',
  221. // }),
  222. // new MiniCssExtractPlugin({
  223. // filename: "style.css",
  224. // chunkFilename: "[name].css"
  225. // })
  226. // ]
  227. // }
  228. // };