//@ts-check "use strict"; const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { DefinePlugin } = require("webpack"); const CopyWebpackPlugin = require("copy-webpack-plugin"); const { CleanWebpackPlugin } = require("clean-webpack-plugin"); //@ts-check /** @typedef {import('webpack').Configuration} WebpackConfig **/ /** @type WebpackConfig */ const extensionConfig = { name: "vscode extension", target: "node", // VS Code extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/ mode: "none", // this leaves the source code as close as possible to the original (when packaging we set this to 'production') entry: "./src/extension.ts", // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/ output: { // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/ path: path.resolve(__dirname, "dist"), filename: "extension.js", libraryTarget: "commonjs2", }, externals: { vscode: "commonjs vscode", // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/ // modules added here also need to be added in the .vscodeignore file }, resolve: { // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader extensions: [".ts", ".json"], }, module: { rules: [ { test: /\.ts?$/, exclude: /node_modules/, use: [ { loader: "babel-loader", options: { presets: [ "@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript", ], }, }, { loader: "ts-loader", }, ], }, ], }, devtool: "nosources-source-map", infrastructureLogging: { level: "log", // enables logging required for problem matchers }, plugins: [ new CleanWebpackPlugin() ], }; /** @type WebpackConfig */ const webviewConfig = { name: "webview", target: "web", mode: "development", entry: "./src/index.tsx", output: { path: path.resolve(__dirname, "dist"), filename: "index.js", publicPath: "/", }, resolve: { extensions: [".ts", ".tsx", ".js", ".json"], alias: { "@": path.resolve(__dirname, "src/"), }, }, module: { rules: [ { test: /\.tsx?$/, exclude: /node_modules/, use: [ { loader: "babel-loader", options: { presets: [ "@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript", ], }, }, { loader: "ts-loader", }, ], }, { test: /\.jsx?$/, exclude: /node_modules/, use: [ { loader: "babel-loader", options: { presets: [["@babel/preset-env", "@babel/preset-react"]], }, }, ], }, { test: /\.css$/i, use: [ { loader: "style-loader", }, { loader: "css-loader", options: { modules: { localIdentName: "[name]__[local]___[hash:base64:5]", }, }, }, ], include: /views/, }, { test: /\.json$/i, use: "json-loader", type: "asset/source", }, { test: /\.(png|jpg|jpeg|gif|svg)$/, // 匹配文件类型 use: [ { loader: "file-loader", // 使用file-loader options: { name: "[name].[ext]", // 输出文件的名称和扩展名 outputPath: "assets/", // 输出文件的路径 }, }, ], }, ], }, devtool: "source-map", infrastructureLogging: { level: "log", }, plugins: [ // generate an HTML file that includes the extension's JavaScript file new HtmlWebpackPlugin({ template: path.resolve(__dirname, "src", "index.html"), filename: "index.html", chunks: ["index"], }), new HtmlWebpackPlugin({ template: path.resolve(__dirname, "src", "welcome.html"), filename: "welcome.html", chunks: ["welcome"], }), new DefinePlugin({ "process.env.platform": JSON.stringify("vscode"), }), ], }; module.exports = extensionConfig;