Add custom asset folders

Author: Salama Ashoush

src/index.jsx

@@ -3,4 +3,3 @@ import ReactDOM from 'react-dom';
 import App from './App.jsx';
 
 ReactDOM.render(<App />, document.getElementById('app'));
-module.hot.accept();

webpack/paths.js

@@ -5,4 +5,8 @@ module.exports = {
   outputPath: path.resolve(__dirname, '../', 'build'),
   entryPath: path.resolve(__dirname, '../', 'src/index.jsx'),
   templatePath: path.resolve(__dirname, '../', 'src/template.html'),
+  imagesFolder: 'images',
+  fontsFolder: 'fonts',
+  cssFolder: 'css',
+  jsFolder: 'js',
 };

webpack/webpack.common.js

@@ -11,6 +11,9 @@ module.exports = {
         test: /\.(js|jsx)$/,
         loader: 'eslint-loader',
         exclude: /(node_modules)/,
+        options: {
+          emitWarning: process.env.NODE_ENV !== 'production',
+        },
       },
       {
         test: /\.(js|jsx)$/,
@@ -22,6 +25,9 @@ module.exports = {
         use: [
           {
             loader: 'file-loader',
+            options: {
+              outputPath: commonPaths.imagesFolder,
+            },
           },
         ],
       },
@@ -30,6 +36,9 @@ module.exports = {
         use: [
           {
             loader: 'file-loader',
+            options: {
+              outputPath: commonPaths.fontsFolder,
+            },
           },
         ],
       },

webpack/webpack.prod.js

@@ -5,7 +5,7 @@ const CleanWebpackPlugin = require('clean-webpack-plugin');
 module.exports = {
   mode: 'production',
   output: {
-    filename: '[name].[hash].js',
+    filename: `${commonPaths.jsFolder}/[name].[hash].js`,
     path: commonPaths.outputPath,
     chunkFilename: '[name].[chunkhash].js',
   },
@@ -18,9 +18,11 @@ module.exports = {
     ],
   },
   plugins: [
-    new CleanWebpackPlugin(['dist'], { root: commonPaths.root }),
+    new CleanWebpackPlugin([commonPaths.outputPath.split('/').pop()], {
+      root: commonPaths.root,
+    }),
     new MiniCssExtractPlugin({
-      filename: '[name].css',
+      filename: `${commonPaths.cssFolder}/[name].css`,
       chunkFilename: '[id].css',
     }),
   ],