Nessuna descrizione

webpack.dev.js 2.6KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. const path = require('path')
  2. const webpack = require('webpack')
  3. // const CleanWebpackPlugin = require("clean-webpack-plugin")
  4. const { CleanWebpackPlugin } = require('clean-webpack-plugin');
  5. const HtmlWebpackPlugin = require("html-webpack-plugin")
  6. const glob = require('glob')
  7. const setMPA = () => {
  8. const entry = {}
  9. const htmklWebpackPlugins = [];
  10. const entryFiles = glob.sync(path.join(__dirname ,"./src/*/index.js")) // 匹配入口文件
  11. console.log('entryFiles',entryFiles)
  12. Object.keys(entryFiles).map((index) => {
  13. const entryFile = entryFiles[index]
  14. const match = entryFile.match(/src\/(.*)\/index\.js/)
  15. const pageName = match && match[1]
  16. entry[pageName] = entryFile; // 设置entry
  17. htmklWebpackPlugins.push( // 设置html模版
  18. new HtmlWebpackPlugin({
  19. template: path.join(__dirname, `src/${pageName}/index.html`),
  20. filename: `${pageName}.html`,
  21. chunks: [pageName],
  22. inject: true, // 注入css/js
  23. minify: { // 模板格式设置
  24. html5:true,
  25. collapseWhitespace: true ,
  26. preserveLicenseComments: false ,
  27. minifyJS: true ,
  28. minifyCSS: true,
  29. removeComments: true,
  30. }
  31. }),
  32. )
  33. })
  34. return {
  35. entry,
  36. htmklWebpackPlugins ,
  37. }
  38. }
  39. const {entry,htmklWebpackPlugins} = setMPA()
  40. module.exports = {
  41. entry,
  42. output: {
  43. path: path.join(__dirname, 'dist'),
  44. filename: '[name].js'
  45. },
  46. mode: 'development',
  47. // mode: 'production',
  48. watch: true ,
  49. module: {
  50. rules:[
  51. {
  52. test: /.js$/,
  53. use:'babel-loader'
  54. },
  55. {
  56. test: /.less$/,
  57. use:[
  58. 'style-loader',
  59. 'css-loader',
  60. 'less-loader'
  61. ]
  62. },
  63. {
  64. test: /.(png|jpg|gif|jpeg)$/,
  65. use:[
  66. {
  67. loader: 'url-loader',
  68. options: {
  69. limit: 10240
  70. }
  71. }
  72. ]
  73. },
  74. {
  75. test: /.(otf|ttf|woff|woff2|eot)$/,
  76. use:[
  77. 'file-loader',
  78. ]
  79. }
  80. ]
  81. },
  82. plugins:[
  83. new webpack.HotModuleReplacementPlugin(),
  84. new CleanWebpackPlugin(),
  85. ].concat(htmklWebpackPlugins),
  86. devServer: {
  87. contentBase: path.join(__dirname ,"dist"),
  88. hot: true ,
  89. },
  90. devtool: 'cheap-source-map'
  91. }