webpack.config.prod.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  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 OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
  6. const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
  7. const path = require('path');
  8. function resolvePath(dir) {
  9. return path.join(__dirname, '..', dir);
  10. }
  11. module.exports = {
  12. mode: 'production',
  13. entry: [
  14. './src/app.js'
  15. ],
  16. output: {
  17. path: resolvePath('www'),
  18. filename: 'app.js',
  19. publicPath: ''
  20. },
  21. devServer: {
  22. hot: true,
  23. open: true,
  24. compress: true,
  25. contentBase: '/www/',
  26. watchOptions: {
  27. poll: true
  28. }
  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. 'babel-loader',
  47. {
  48. loader: 'framework7-component-loader',
  49. options: {
  50. helpersPath: './src/template7-helpers-list.js'
  51. }
  52. }
  53. ],
  54. },
  55. {
  56. test: /\.css$/,
  57. use: [
  58. MiniCssExtractPlugin.loader,
  59. 'css-loader',
  60. ],
  61. },
  62. {
  63. test: /\.styl(us)?$/,
  64. use: [
  65. MiniCssExtractPlugin.loader,
  66. 'css-loader',
  67. 'stylus-loader',
  68. ],
  69. },
  70. {
  71. test: /\.less$/,
  72. use: [
  73. MiniCssExtractPlugin.loader,
  74. 'css-loader',
  75. 'less-loader',
  76. ],
  77. },
  78. {
  79. test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  80. loader: 'url-loader',
  81. options: {
  82. limit: 10000,
  83. name: 'images/[name].[hash:7].[ext]'
  84. }
  85. },
  86. {
  87. test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
  88. loader: 'url-loader',
  89. options: {
  90. limit: 10000,
  91. name: 'media/[name].[hash:7].[ext]'
  92. }
  93. },
  94. {
  95. test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
  96. loader: 'url-loader',
  97. options: {
  98. limit: 10000,
  99. name: 'fonts/[name].[hash:7].[ext]'
  100. }
  101. }
  102. ]
  103. },
  104. plugins: [
  105. new webpack.DefinePlugin({
  106. 'process.env': JSON.stringify('production'),
  107. }),
  108. new UglifyJsPlugin({
  109. uglifyOptions: {
  110. compress: {
  111. }
  112. },
  113. sourceMap: true,
  114. parallel: true
  115. }),
  116. new OptimizeCSSPlugin({
  117. cssProcessorOptions: {
  118. safe: true,
  119. map: { inline: false }
  120. }
  121. }),
  122. new webpack.HotModuleReplacementPlugin(),
  123. new webpack.NamedModulesPlugin(),
  124. new HtmlWebpackPlugin({
  125. filename: './index.html',
  126. template: './src/index.html',
  127. inject: true,
  128. minify: {
  129. removeComments: true,
  130. collapseWhitespace: true,
  131. removeAttributeQuotes: true,
  132. },
  133. }),
  134. new webpack.HashedModuleIdsPlugin(),
  135. new webpack.optimize.ModuleConcatenationPlugin(),
  136. new MiniCssExtractPlugin({
  137. filename: 'app.css'
  138. }),
  139. new CopyWebpackPlugin([{
  140. from: resolvePath('static'),
  141. to: resolvePath('www/static'),
  142. }]),
  143. ]
  144. }