webpack.config.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. import path from "path"
  2. import { glob } from "glob"
  3. import { fileURLToPath } from "url"
  4. import { WebpackManifestPlugin } from "webpack-manifest-plugin"
  5. import FaviconsWebpackPlugin from "favicons-webpack-plugin"
  6. import RemoveEmptyScriptsPlugin from "webpack-remove-empty-scripts"
  7. import CopyPlugin from "copy-webpack-plugin"
  8. import { SRIPlugin, GitVersionPlugin } from "./webpack.plugins.js"
  9. const __filename = fileURLToPath(import.meta.url)
  10. const __dirname = path.dirname(__filename)
  11. const nodeModulesPath = path.resolve(__dirname, "node_modules")
  12. var config = {
  13. entry: {
  14. css: [
  15. path.resolve("src", "sass", "main.scss"),
  16. path.resolve("src", "sass", "mobile.scss"),
  17. path.resolve("src", "sass", "print.scss")
  18. ],
  19. main: path.resolve("src", "js", "index.js"),
  20. colortheme: path.resolve("src", "js", "colorTheme.js"),
  21. mermaid: path.resolve("src", "js", "mermaid.js"),
  22. katex: [path.resolve("src", "js", "katex.js")].concat(
  23. glob.sync(path.join(nodeModulesPath, "katex", "dist", "fonts", "*.{woff,woff2}"))
  24. ),
  25. search: [path.resolve("src", "js", "search.js")]
  26. },
  27. output: {
  28. filename: "js/[name]-[contenthash:8].bundle.min.js",
  29. chunkFilename: "js/[name]-[contenthash:8].chunk.min.js",
  30. path: path.join(__dirname, "static"),
  31. clean: true
  32. },
  33. watchOptions: {
  34. ignored: ["/exampleSite/", "/node_modules/"]
  35. },
  36. target: ["web", "es2017"],
  37. plugins: [
  38. new CopyPlugin({
  39. patterns: [
  40. {
  41. from: "**/*",
  42. context: path.resolve(__dirname, "src", "static")
  43. },
  44. {
  45. from: "fonts/*.{woff,woff2}",
  46. context: path.resolve(__dirname, "build")
  47. },
  48. {
  49. from: "sprites/*.svg",
  50. to: path.resolve(__dirname, "assets"),
  51. context: path.resolve(__dirname, "build")
  52. },
  53. {
  54. from: "img/*.svg",
  55. context: path.resolve(__dirname, "build")
  56. }
  57. ]
  58. }),
  59. new FaviconsWebpackPlugin({
  60. logo: path.resolve("src", "static", "favicon", "favicon.svg"),
  61. prefix: "favicon/",
  62. inject: false,
  63. favicons: {
  64. background: "#efefef",
  65. theme_color: "#efefef",
  66. icons: {
  67. android: { offset: 10 },
  68. appleIcon: { offset: 10 },
  69. appleStartup: { offset: 10 },
  70. favicons: true,
  71. windows: { offset: 10 },
  72. yandex: false
  73. }
  74. }
  75. }),
  76. new RemoveEmptyScriptsPlugin(),
  77. new WebpackManifestPlugin({
  78. fileName: "../data/assets.json",
  79. publicPath: "",
  80. writeToFileEmit: true,
  81. generate(seed, files) {
  82. let manifest = {}
  83. files.forEach(function (element, index) {
  84. if (element.name.endsWith("VERSION")) return
  85. if (element.name.endsWith(".svg")) return
  86. if (element.name.startsWith("fonts/")) return
  87. if (element.name.startsWith("/favicon")) return
  88. Object.assign(manifest, {
  89. [element.name]: { src: element.path }
  90. })
  91. })
  92. return manifest
  93. }
  94. }),
  95. new SRIPlugin({
  96. sourceFile: "data/assets.json"
  97. }),
  98. new GitVersionPlugin({
  99. outputFile: "../VERSION"
  100. })
  101. ]
  102. }
  103. export default (argv) => {
  104. if (argv.mode === "development") {
  105. config.devtool = "eval-cheap-source-map"
  106. }
  107. config.module = {
  108. rules: [
  109. {
  110. test: /\.(woff|woff2|eot|ttf|otf)$/i,
  111. type: "asset/resource",
  112. generator: {
  113. filename: "fonts/[name][ext]"
  114. }
  115. },
  116. {
  117. test: /\.(sa|sc|c)ss$/i,
  118. type: "asset/resource",
  119. generator: {
  120. filename: "[name]-[contenthash:8].min.css"
  121. },
  122. use: [
  123. {
  124. loader: "postcss-loader",
  125. options: {
  126. postcssOptions: {
  127. plugins: ["autoprefixer"]
  128. }
  129. }
  130. },
  131. {
  132. loader: "sass-loader",
  133. options: {
  134. sourceMap: argv.mode === "development" ? true : false,
  135. sassOptions: {
  136. outputStyle: argv.mode === "development" ? "expanded" : "compressed"
  137. }
  138. }
  139. }
  140. ]
  141. }
  142. ]
  143. }
  144. return config
  145. }