add style entry for CSS in package.json

Author: nezanuha

package.json

@@ -1,8 +1,9 @@
 {
   "name": "markdown-text-editor",
-  "version": "0.0.16-beta.1",
+  "version": "0.0.18-beta.1",
   "description": "A powerful, easy-to-use Markdown editor with a real-time preview, syntax highlighting. Ideal for developers, writers, and content creators who need a seamless, interactive writing experience with full Markdown support.",
-  "main": "./src/plugins/markdown/editor.js",
+  "main": "./dist/markdown-text-editor.js",
+  "style": "./dist/markdown-text-editor.css",
   "files": [
     "dist/**/*",
     "src/**/*"
@@ -12,36 +13,29 @@
     "url": "https://github.com/nezanuha/markdown-text-editor"
   },
   "scripts": {
-    "build": "webpack --mode=production",
+    "clean": "rm -rf dist",
+    "build": "npm run clean && webpack --mode=production",
+    "prepublishOnly": "npm run build",
     "dev": "webpack --watch --mode=development"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
   "keywords": [
     "markdown-text-editor",
-    "markdown-text",
-    "mde",
-    "text-editor",
-    "simple mde",
     "markdown",
+    "text-editor",
     "editor",
     "live preview",
     "syntax highlighting",
-    "react",
-    "web app",
     "developer tools",
     "content creation",
-    "WYSIWYG",
     "plugin",
-    "open source",
-    "markdown",
-    "markdown editor",
-    "simple markdown"
+    "open source"
   ],
   "author": "Nezanuha",
   "license": "MIT",
-  "homepage": "",
+  "homepage": "https://github.com/nezanuha/markdown-text-editor",
   "bugs": {
     "url": "https://github.com/nezanuha/markdown-text-editor/issues"
   },

webpack.config.js

@@ -3,9 +3,9 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = (env, argv) => {
-    const isProd = process.env.NODE_ENV === 'production';
+    const isProd = argv.mode === 'production';
     return {
-        mode: isProd ? 'production' : 'development', // Set to 'production' for minified output
+        mode: isProd ? 'production' : 'development',
         stats: 'minimal',
         entry: {
             index: './src/plugins/index.js',
@@ -15,25 +15,28 @@ module.exports = (env, argv) => {
             extensions: ['.ts', '.js'],
         },
         output: {
-            filename: '[name].js', // Output file name
-            path: path.resolve(__dirname, 'dist'), // Output directory
-            library: '[name]', // Name of the library
-            libraryTarget: 'umd', // Universal Module Definition
-            libraryExport: 'default', // Use default export
-            globalObject: 'this', // Ensures compatibility
+            filename: '[name].js',
+            path: path.resolve(__dirname, 'dist'),
+            library: {
+                name: '[name]',
+                type: 'umd',
+                export: 'default',
+            },
+            globalObject: 'typeof self !== "undefined" ? self : this',
+            clean: true, // Ensures output directory is cleaned before each build
         },
         module: {
             rules: [
                 {
-                    test: /\.css$/, // Handle CSS files
+                    test: /\.css$/,
                     use: [
-                        'style-loader', // Extract CSS into separate files
-                        'css-loader', // Translates CSS into CommonJS
-                        'postcss-loader', // Processes CSS with PostCSS
+                        MiniCssExtractPlugin.loader,
+                        'css-loader',
+                        'postcss-loader',
                     ],
                 },
                 {
-                    test: /\.m?js$/, // Handle JavaScript files
+                    test: /\.m?js$/,
                     exclude: /node_modules/,
                     use: {
                         loader: 'babel-loader',
@@ -46,16 +49,17 @@ module.exports = (env, argv) => {
         },
         plugins: [
             new MiniCssExtractPlugin({
-                filename: 'styles.css', // Output CSS filename
+                filename: '[name].css',
             }),
         ],
         optimization: {
-            minimize: true,
+            minimize: isProd,
             minimizer: [
                 new TerserPlugin({
                     extractComments: false,
                 }),
             ],
-        }
+        },
+        devtool: isProd ? 'source-map' : 'eval-source-map',
     };
-};
+};