webpack.config.ts 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. /*---------------------------------------------------------------------------------------------
  2. * Copyright (c) Microsoft Corporation. All rights reserved.
  3. * Licensed under the MIT License. See License.txt in the project root for license information.
  4. *--------------------------------------------------------------------------------------------*/
  5. import * as webpack from "webpack";
  6. import * as path from "path";
  7. import * as HtmlWebpackPlugin from "html-webpack-plugin";
  8. import { CleanWebpackPlugin } from "clean-webpack-plugin";
  9. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  10. import * as CopyPlugin from "copy-webpack-plugin";
  11. const r = (file: string) => path.resolve(__dirname, file);
  12. module.exports = {
  13. entry: {
  14. index: r("src/website/index.tsx"),
  15. playgroundRunner: r("src/runner/index.ts"),
  16. monacoLoader: r("src/website/monaco-loader-chunk.ts"),
  17. },
  18. optimization: {
  19. runtimeChunk: "single",
  20. },
  21. output: {
  22. path: r("dist"),
  23. devtoolModuleFilenameTemplate: "file:///[absolute-resource-path]",
  24. },
  25. resolve: {
  26. extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"],
  27. },
  28. devtool: "source-map",
  29. devServer: {
  30. headers: {
  31. "Access-Control-Allow-Origin": "*",
  32. "Access-Control-Allow-Methods":
  33. "GET, POST, PUT, DELETE, PATCH, OPTIONS",
  34. "Access-Control-Allow-Headers":
  35. "X-Requested-With, content-type, Authorization",
  36. },
  37. allowedHosts: "all",
  38. watchFiles: [],
  39. },
  40. module: {
  41. rules: [
  42. {
  43. test: /\.css$/,
  44. use: [
  45. /*"style-loader"*/ MiniCssExtractPlugin.loader,
  46. "css-loader",
  47. ],
  48. },
  49. {
  50. test: /\.scss$/,
  51. use: [
  52. /*"style-loader",*/ MiniCssExtractPlugin.loader,
  53. "css-loader",
  54. "sass-loader",
  55. ],
  56. },
  57. {
  58. test: /\.(jpe?g|png|gif|eot|ttf|svg|woff|woff2|md)$/i,
  59. loader: "file-loader",
  60. },
  61. {
  62. test: /\.tsx?$/,
  63. loader: "ts-loader",
  64. options: { transpileOnly: true },
  65. },
  66. { test: /\.txt$/i, use: "raw-loader" },
  67. ],
  68. },
  69. plugins: [
  70. new webpack.DefinePlugin({
  71. "process.env": {
  72. YEAR: JSON.stringify(new Date().getFullYear()),
  73. },
  74. }),
  75. new CleanWebpackPlugin(),
  76. new MiniCssExtractPlugin({
  77. filename: "[name].css",
  78. chunkFilename: "[id].css",
  79. }),
  80. new HtmlWebpackPlugin({
  81. chunks: ["monacoLoader", "index"],
  82. templateContent: getHtml(),
  83. chunksSortMode: "manual",
  84. }),
  85. new HtmlWebpackPlugin({
  86. chunks: ["index"],
  87. filename: "playground.html",
  88. templateContent: getHtml(),
  89. }),
  90. new HtmlWebpackPlugin({
  91. chunks: ["playgroundRunner"],
  92. filename: "playgroundRunner.html",
  93. templateContent: getHtml(),
  94. }),
  95. new HtmlWebpackPlugin({
  96. chunks: ["index"],
  97. filename: "docs.html",
  98. templateContent: getHtml(),
  99. }),
  100. new HtmlWebpackPlugin({
  101. chunks: ["index"],
  102. filename: "monarch.html",
  103. templateContent: getHtml(),
  104. }),
  105. new CopyPlugin({
  106. patterns: [{ from: "./static", to: "./" }],
  107. }),
  108. new CopyPlugin({
  109. patterns: [{ from: "./typedoc/dist", to: "./typedoc/" }],
  110. }),
  111. new CopyPlugin({
  112. patterns: [
  113. {
  114. from: "./node_modules/monaco-editor/",
  115. to: "./node_modules/monaco-editor/",
  116. // This disables minification for js files
  117. info: { minimized: true },
  118. },
  119. ],
  120. }),
  121. new CopyPlugin({
  122. patterns: [
  123. {
  124. from: "../node_modules/monaco-editor-core/",
  125. to: "./node_modules/monaco-editor-core/",
  126. // This disables minification for js files
  127. info: { minimized: true },
  128. },
  129. ],
  130. }),
  131. new CopyPlugin({
  132. patterns: [{ from: "../out/languages/", to: "./out/languages/" }],
  133. }),
  134. ],
  135. } as webpack.Configuration;
  136. function getHtml(): string {
  137. return `
  138. <!DOCTYPE html>
  139. <html>
  140. <head>
  141. <meta charset="utf-8">
  142. <title>Monaco Editor</title>
  143. </head>
  144. <body>
  145. </body>
  146. </html>`;
  147. }