fix: assets relative path

ccontrols · Jul 7, 2020 · b3bf9e8 · b3bf9e8
1 parent 32ea2f4
commit b3bf9e8
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 74 deletions.
diff --git a/core/webpack-compile/package.json b/core/webpack-compile/package.json
@@ -5,8 +5,7 @@
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
-  "browser": "dist/bundle.js",
-  "files": [
+   "files": [
     "dist/",
     "package.json",
     "README.md",

diff --git a/core/webpack-compile/src/utilities.ts b/core/webpack-compile/src/utilities.ts
@@ -19,6 +19,7 @@ export type CompileRunProps = CompileProps & {
 
 const createConfig = (options: CompileRunProps): webpack.Configuration => {
   const { webPack, presets, configPath, mode, outputFolder } = options;
+  const distFolder = path.resolve(__dirname, '../dist');
   const plugins = [
     new LoaderPlugin({
       config: configPath,
@@ -35,7 +36,7 @@ const createConfig = (options: CompileRunProps): webpack.Configuration => {
       },
 
       output: {
-        path: path.resolve(__dirname, '../dist'),
+        path: distFolder,
         filename: 'bundle.js',
         libraryTarget: 'umd',
         globalObject: 'this',
@@ -48,7 +49,7 @@ const createConfig = (options: CompileRunProps): webpack.Configuration => {
       ...(webPack || {}),
     },
     presets,
-    { outputFolder },
+    { outputFolder, distFolder },
   );
 
   //add all the aliases to avoid double loading of packages

diff --git a/core/webpack-configs/src/react/index.ts b/core/webpack-configs/src/react/index.ts
@@ -1,80 +1,89 @@
+import * as path from 'path';
 import { PresetType, PresetOptions } from '../types';
 
-export const react: PresetType = (options?: PresetOptions) => ({
-  performance: { hints: false },
-  module: {
-    rules: [
-      {
-        test: /\.(js|jsx)$/,
-        exclude: [/node_modules/],
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              presets: [
-                [require.resolve('@babel/preset-env'), { modules: 'commonjs' }],
-                require.resolve('@babel/preset-react'),
-              ],
+export const react: PresetType = (options?: PresetOptions) => {
+  return {
+    performance: { hints: false },
+    module: {
+      rules: [
+        {
+          test: /\.(js|jsx)$/,
+          exclude: [/node_modules/],
+          use: [
+            {
+              loader: 'babel-loader',
+              options: {
+                presets: [
+                  [
+                    require.resolve('@babel/preset-env'),
+                    { modules: 'commonjs' },
+                  ],
+                  require.resolve('@babel/preset-react'),
+                ],
+              },
             },
+          ],
+        },
+        {
+          test: /\.(eot|md|svg|ico|jpg|jpeg|png|gif|ttf|woff|woff2|pdf|mp4|web|wav|mp3|m4a|aac|oga)$/i,
+          exclude: [/node_modules/],
+          loader: 'url-loader',
+          options: {
+            limit: 25000,
+            name: '[name].[hash].[ext]',
+            publicPath: '/static',
+            outputPath: path.relative(
+              options?.distFolder || process.cwd(),
+              path.resolve(options?.outputFolder || process.cwd(), 'static'),
+            ),
           },
-        ],
-      },
-      {
-        test: /\.(eot|md|svg|ico|jpg|jpeg|png|gif|ttf|woff|woff2|pdf|mp4|web|wav|mp3|m4a|aac|oga)$/i,
-        exclude: [/node_modules/],
-        loader: 'url-loader',
-        options: {
-          limit: 25000,
-          name: '[name].[hash].[ext]',
-          publicPath: '/static',
-          outputPath: options?.outputFolder,
         },
-      },
-      {
-        test: /\.(ts|tsx)$/,
-        exclude: [/node_modules/],
-        use: [
-          {
-            loader: require.resolve('babel-loader'),
-            options: {
-              presets: [['react-app', { flow: false, typescript: true }]],
+        {
+          test: /\.(ts|tsx)$/,
+          exclude: [/node_modules/],
+          use: [
+            {
+              loader: require.resolve('babel-loader'),
+              options: {
+                presets: [['react-app', { flow: false, typescript: true }]],
+              },
             },
-          },
-        ],
-      },
-      {
-        test: /\.txt$/i,
-        use: require.resolve('raw-loader'),
-      },
-      {
-        test: /\.(md|mdx)$/i,
-        exclude: [/node_modules/],
-        loader: 'babel-loader',
-        options: {
-          presets: [
-            [require.resolve('@babel/preset-env'), { modules: 'commonjs' }],
-            require.resolve('@babel/preset-react'),
           ],
         },
-      },
-      {
-        test: /\.(md|mdx)$/i,
-        exclude: [/node_modules/],
-        loader: '@component-controls/loader/loader',
-        options: {
-          mdx: {
-            transformMDX: true,
+        {
+          test: /\.txt$/i,
+          use: require.resolve('raw-loader'),
+        },
+        {
+          test: /\.(md|mdx)$/i,
+          exclude: [/node_modules/],
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              [require.resolve('@babel/preset-env'), { modules: 'commonjs' }],
+              require.resolve('@babel/preset-react'),
+            ],
           },
         },
-      },
-      {
-        test: /\.(story|stories|doc|docs).(js|jsx|ts|tsx)$/,
-        loader: '@component-controls/loader/loader',
-        exclude: [/node_modules/],
-      },
-    ],
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx'],
-  },
-});
+        {
+          test: /\.(md|mdx)$/i,
+          exclude: [/node_modules/],
+          loader: '@component-controls/loader/loader',
+          options: {
+            mdx: {
+              transformMDX: true,
+            },
+          },
+        },
+        {
+          test: /\.(story|stories|doc|docs).(js|jsx|ts|tsx)$/,
+          loader: '@component-controls/loader/loader',
+          exclude: [/node_modules/],
+        },
+      ],
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    },
+  };
+};
diff --git a/core/webpack-configs/src/types.ts b/core/webpack-configs/src/types.ts
@@ -9,7 +9,10 @@ export type RuleType = string | RuleOptions;
 export type RuleTypes = RuleType[];
 
 export interface PresetOptions {
+  //output folder for static assets
   outputFolder?: string;
+  //dist folder where bundle is output
+  distFolder?: string;
 }
 
 export type PresetCallback = (options?: PresetOptions) => Configuration;