config one css files

Author: frankpagan

.gitignore

@@ -1,4 +1,4 @@
 # ignore
 node_modules
-dist/*
-!dist/CoCreate.min.js
+dist
+; !dist/CoCreate.min.js

dist/CoCreate.min.js

@@ -52,7 +52,10 @@
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^5.1.2",
     "file-loader": "^6.2.0",
+    "html-webpack-inline-source-plugin": "^0.0.10",
     "html-webpack-plugin": "^5.3.1",
+    "html-webpack-tags-plugin": "^3.0.0",
+    "mini-css-extract-plugin": "^1.4.0",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "5.1.0",
     "webpack": "^5.24.4",

package.json

@@ -88,4 +88,4 @@ addLazily('pickr', '.color-pickr', ()=> import (/*webpackChunkName: "pickr-chunk
 // addLazily('uppy', '#drag-drop-area', ()=> import (/*webpackChunkName: "uppy-chunk"*/ '@cocreate/uppy'))
 
 // Test component
-// addLazily('test', '[data-test]', ()=> import (/*webpackChunkName: "test-chunk"*/ '@cocreate/test'))
+// addLazily('test', '[data-test]', ()=> import (webpackChunkName: "test-chunk" '@cocreate/test'))

src/components.js

@@ -1,7 +1,8 @@
 // core components
 import core from "./core.js"
-import css from '@cocreate/cocreatecss';
 import observer from '@cocreate/observer';
+import css from '@cocreate/cocreatecss';
+// import css from '../../CoCreateCSS/src';
 
 (async function() {
 
@@ -13,11 +14,6 @@ import observer from '@cocreate/observer';
     Object.assign(window.CoCreate, {components: importObj.default})
 
 
-    // // prefetched - downloads after main chunk has complete and in idle mode. If no longer idle will pause then resume when not idle. Priority using 1, -1 true=0
-    // importObj = await
-    // import ( /* webpackChunkName: "htmltags-chunk", webpackPrefetch: true */
-    //     "../CoCreate-components/CoCreate-htmltags/src/index.js");
-    // Object.assign(window.CoCreate, {htmltags: importObj.default})
 
 })()
 

src/index.js

@@ -8,7 +8,7 @@ const TerserPlugin = require("terser-webpack-plugin");
 let isProduction = process.env.NODE_ENV === 'production';
 const getLogger = require('webpack-log');
 const log = getLogger({ name: 'webpack-batman' });
-
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 log.info(__filename);
 
@@ -27,7 +27,7 @@ module.exports = {
     // Path and filename of your result bundle.
     // Webpack will bundle all JavaScript into this file
     output: {
-    path: path.resolve(__dirname, 'dist'),
+        path: path.resolve(__dirname, 'dist'),
         filename: isProduction ? '[name].min.js' : '[name].js',
         // filename: (pathData) => {
         //     if (isProduction) {
@@ -48,6 +48,18 @@ module.exports = {
         ...(isProduction ? { /*publicPath: 'https://cdn.cocreate.app/',*/ } : {}),
 
     },
+
+    plugins: [
+        new CleanWebpackPlugin(),
+        new MiniCssExtractPlugin({
+      // Options similar to the same options in webpackOptions.output
+      // both options are optional
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+    }),
+    ],
+
+
     devServer: {
         hot: true,
     },
@@ -76,14 +88,13 @@ module.exports = {
             },
             {
                 test: /\.css$/,
-                use: ['style-loader', 'css-loader']
+                use: [MiniCssExtractPlugin.loader, 'css-loader',
+                    // "file-loader",
+                ]
             },
         ]
     },
 
-    plugins: [
-        new CleanWebpackPlugin()
-    ],
 
     optimization: {
         minimize: true,

webpack.config.js

@@ -5842,6 +5842,15 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
+html-webpack-inline-source-plugin@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/html-webpack-inline-source-plugin/-/html-webpack-inline-source-plugin-0.0.10.tgz#89bd5f761e4f16902aa76a44476eb52831c9f7f0"
+  integrity sha512-0ZNU57u7283vrXSF5a4VDnVOMWiSwypKIp1z/XfXWoVHLA1r3Xmyxx5+Lz+mnthz/UvxL1OAf41w5UIF68Jngw==
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    slash "^1.0.0"
+    source-map-url "^0.4.0"
+
 html-webpack-plugin@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.3.1.tgz#8797327548e3de438e3494e0c6d06f181a7f20d1"
@@ -5853,6 +5862,15 @@ html-webpack-plugin@^5.3.1:
     pretty-error "^2.1.1"
     tapable "^2.0.0"
 
+html-webpack-tags-plugin@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-tags-plugin/-/html-webpack-tags-plugin-3.0.0.tgz#e237c826eec147a22bbe6fcdd93d1de4490d9d9d"
+  integrity sha512-+4H3546xwpiLiznVyvf0Tk/2fKvvkW/BKbFDtbaFilEISINzSwtMeHIssC02qdPiZhNkgJPDJV14P53XvXwAsg==
+  dependencies:
+    glob "^7.1.6"
+    minimatch "^3.0.4"
+    slash "^3.0.0"
+
 htmlparser2@^3.10.1:
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
@@ -9038,6 +9056,16 @@ sirv@^1.0.7:
     mime "^2.3.1"
     totalist "^1.0.0"
 
+slash@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
+  integrity sha1-xB8vbDn8FtHNF61LXYlhFK5HDVU=
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"