webpack.config.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. var path = require('path')
  2. var webpack = require('webpack')
  3. const VueLoaderPlugin = require('vue-loader/lib/plugin')
  4. module.exports = {
  5. entry: './src/index.ts',
  6. output: {
  7. path: path.resolve(__dirname, './dist'),
  8. publicPath: '/dist/',
  9. filename: 'frontend.js'
  10. },
  11. module: {
  12. rules: [
  13. {
  14. test: /\.vue$/,
  15. loader: 'vue-loader',
  16. options: {
  17. loaders: {
  18. // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
  19. // the "scss" and "sass" values for the lang attribute to the right configs here.
  20. // other preprocessors should work out of the box, no loader config like this necessary.
  21. 'scss': 'vue-style-loader!css-loader!sass-loader',
  22. 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
  23. }
  24. // other vue-loader options go here
  25. }
  26. },
  27. {
  28. test: /\.tsx?$/,
  29. loader: 'ts-loader',
  30. exclude: /node_modules/,
  31. options: {
  32. appendTsSuffixTo: [/\.vue$/],
  33. }
  34. },
  35. {
  36. test: /\.(png|jpg|gif|svg)$/,
  37. loader: 'file-loader',
  38. options: {
  39. name: '[name].[ext]?[hash]'
  40. }
  41. },
  42. {
  43. test: /\.css$/,
  44. use: [
  45. 'vue-style-loader',
  46. 'css-loader'
  47. ]
  48. }
  49. ]
  50. },
  51. resolve: {
  52. extensions: ['.ts', '.js', '.vue', '.json'],
  53. alias: {
  54. 'vue$': 'vue/dist/vue.esm.js'
  55. }
  56. },
  57. devServer: {
  58. historyApiFallback: true,
  59. noInfo: true
  60. },
  61. performance: {
  62. hints: false
  63. },
  64. devtool: '#eval-source-map',
  65. plugins: [
  66. // make sure to include the plugin for the magic
  67. new VueLoaderPlugin(),
  68. // add a nice banner
  69. new webpack.BannerPlugin({
  70. banner: `
  71. EliasDB - Data mining frontend example
  72. Copyright 2020 Matthias Ladkau. All rights reserved.
  73. This Source Code Form is subject to the terms of the Mozilla Public
  74. License, v. 2.0. If a copy of the MPL was not distributed with this
  75. file, You can obtain one at http://mozilla.org/MPL/2.0/.
  76. `,
  77. entryOnly: true
  78. })
  79. ]
  80. }
  81. if (process.env.NODE_ENV === 'production') {
  82. module.exports.devtool = '#source-map'
  83. // http://vue-loader.vuejs.org/en/workflow/production.html
  84. module.exports.plugins = (module.exports.plugins || []).concat([
  85. new webpack.DefinePlugin({
  86. 'process.env': {
  87. NODE_ENV: '"production"'
  88. }
  89. }),
  90. new webpack.optimize.UglifyJsPlugin({
  91. sourceMap: true,
  92. compress: {
  93. warnings: false
  94. }
  95. }),
  96. new webpack.LoaderOptionsPlugin({
  97. minimize: true
  98. })
  99. ])
  100. }