webpack.config.dev.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. const webpack = require('webpack');
  2. const CopyWebpackPlugin = require('copy-webpack-plugin');
  3. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  5. const path = require('path');
  6. function resolvePath(dir) {
  7. return path.join(__dirname, '..', dir);
  8. }
  9. module.exports = {
  10. mode: 'development',
  11. entry: [
  12. './src/app.js'
  13. ],
  14. output: {
  15. path: resolvePath('www'),
  16. filename: 'app.js',
  17. publicPath: ''
  18. },
  19. devServer: {
  20. host: '0.0.0.0',
  21. hot: true,
  22. open: true,
  23. compress: true,
  24. contentBase: '/www/',
  25. watchOptions: {
  26. poll: true
  27. },
  28. https: true,
  29. },
  30. module: {
  31. rules: [
  32. {
  33. test: /\.js$/,
  34. use: 'babel-loader',
  35. include: [
  36. resolvePath('src'),
  37. resolvePath('node_modules/framework7'),
  38. resolvePath('node_modules/template7'),
  39. resolvePath('node_modules/dom7'),
  40. resolvePath('node_modules/ssr-window'),
  41. ],
  42. },
  43. {
  44. test: /\.f7.html$/,
  45. use: [
  46. {
  47. loader: 'framework7-component-loader',
  48. options: {
  49. helpersPath: './src/template7-helpers-list.js'
  50. }
  51. }
  52. ],
  53. },
  54. {
  55. test: /\.css$/,
  56. use: [
  57. MiniCssExtractPlugin.loader,
  58. 'css-loader',
  59. ],
  60. },
  61. {
  62. test: /\.styl(us)?$/,
  63. use: [
  64. MiniCssExtractPlugin.loader,
  65. 'css-loader',
  66. 'stylus-loader',
  67. ],
  68. },
  69. {
  70. test: /\.less$/,
  71. use: [
  72. MiniCssExtractPlugin.loader,
  73. 'css-loader',
  74. 'less-loader',
  75. ],
  76. },
  77. {
  78. test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  79. loader: 'url-loader',
  80. options: {
  81. limit: 10000,
  82. name: 'images/[name].[hash:7].[ext]'
  83. }
  84. },
  85. {
  86. test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  87. loader: 'url-loader',
  88. options: {
  89. limit: 10000,
  90. name: 'media/[name].[hash:7].[ext]'
  91. }
  92. },
  93. {
  94. test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  95. loader: 'url-loader',
  96. options: {
  97. limit: 10000,
  98. name: 'fonts/[name].[hash:7].[ext]'
  99. }
  100. }
  101. ]
  102. },
  103. plugins: [
  104. new webpack.DefinePlugin({
  105. 'process.env': JSON.stringify('development'),
  106. }),
  107. new webpack.HotModuleReplacementPlugin(),
  108. new webpack.NamedModulesPlugin(),
  109. new HtmlWebpackPlugin({
  110. filename: './index.html',
  111. template: './src/index.html',
  112. inject: true,
  113. }),
  114. new MiniCssExtractPlugin({
  115. filename: 'app.css'
  116. }),
  117. new CopyWebpackPlugin([{
  118. from: resolvePath('static'),
  119. to: resolvePath('www/static'),
  120. }]),
  121. ],
  122. optimization: {
  123. splitChunks: {
  124. chunks: "initial",
  125. },
  126. }
  127. }