title: Building a webpack project with a local sub module
body: <p>I've developing a react component and for demo purpose I've created a react app so that I could test out the module I'm developing. So I've got a separate module which is a react module and I've used <code>npm link</code> to link the module to my project. following is the package json of the module.</p>
  
  <p><strong>package json</strong></p>
  
  <pre><code>{
    "name": "sample-module",
    "version": "1.0.0",
    "description": "",
    "main": "build/index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "build": "webpack",
      "start": "webpack --watch"
    },
    "author": "Imesh Chandrasiri",
    "license": "Apache-2.0",
    "devDependencies": {
      "babel-core": "^6.26.3",
      "babel-loader": "^7.1.5",
      "babel-plugin-transform-object-rest-spread": "^6.26.0",
      "babel-plugin-transform-react-jsx": "^6.24.1",
      "babel-preset-env": "^1.7.0",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "css-loader": "^1.0.0",
      "extract-text-webpack-plugin": "^4.0.0-beta.0",
      "html-webpack-plugin": "^3.2.0",
      "node-sass": "^4.9.3",
      "sass-loader": "^7.1.0",
      "style-loader": "^0.22.1",
      "webpack": "^4.17.1",
      "webpack-cli": "^3.1.0"
    },
    "dependencies": {
      "file-loader": "^2.0.0",
      "prop-types": "^15.6.2",
      "react": "^16.4.2",
      "react-dom": "^16.4.2",
      "react-router-dom": "^4.3.1",
      "semantic-ui-css": "^2.3.3",
      "semantic-ui-react": "^0.82.2",
      "url-loader": "^1.1.1"
    },
    "peerDependencies": {
      "react": "^16.4.2",
      "react-dom": "^16.4.2"
    }
  }
  </code></pre>
  
  <p><strong>webpack config</strong></p>
  
  <p>const path = require('path');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');</p>
  
  <pre><code>module.exports = {
      mode: 'development',
      entry: './src/index.js',
      devtool: 'inline-source-map',
      output: {
          path: path.resolve(__dirname, 'build'),
          filename: 'index.js',
          libraryTarget: 'commonjs2'
      },
      module: {
          rules: [{
              test: /\.(js)$/,
              exclude: /node_modules/,
              use: {
                  loader: 'babel-loader',
                  options: {
                      presets: ['es2015', 'react'],
                  }
              }
          },{
              test: /\.(css|less)$/,
              use: ["style-loader", "css-loader"]
          },{
              test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
              loader: require.resolve("url-loader"),
              options: {
                  limit: 10000,
                  name: "static/media/[name].[hash:8].[ext]",
              },
          },{
              test: /\.(png|jpg|svg|cur|gif|eot|svg|ttf|woff|woff2)$/,
              use: ['url-loader'],
          }]
      },
      plugins: [
          new ExtractTextPlugin({filename: 'style.css'})
      ],
      externals: {
          'react': 'commonjs react'
      }
  };
  </code></pre>
  
  <p>Using this config I've npm linked the module to my project which have the following package json and webpack config.</p>
  
  <p><strong>package json</strong></p>
  
  <pre><code>{
    "name": "sample-project",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
      "start": "webpack-dev-server",
      "build": "webpack"
    },
    "author": "Imesh Chandrasiri",
    "license": "Apache-2.0",
    "babel": {
      "presets": [
        "env",
        "react",
        "stage-2"
      ]
    },
    "devDependencies": {
      "babel-core": "^6.26.3",
      "babel-loader": "^7.1.5",
      "babel-preset-env": "^1.7.0",
      "babel-preset-react": "^6.24.1",
      "babel-preset-stage-2": "^6.24.1",
      "extract-text-webpack-plugin": "^4.0.0-beta.0",
      "react-hot-loader": "^4.3.4",
      "webpack": "^4.17.1",
      "webpack-cli": "^3.1.0",
      "webpack-dev-server": "^3.1.5"
    },
    "dependencies": {
      "css-loader": "^1.0.0",
      "react": "^16.4.2",
      "react-dom": "^16.4.2",
      "style-loader": "^0.22.1"
    }
  }
  </code></pre>
  
  <p><strong>webpack config</strong></p>
  
  <pre><code>const webpack = require('webpack');
  var path = require('path');
  module.exports = {
      entry: './src/index.js',
      devtool: 'inline-source-map',
      module: {
        rules: [
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: ['babel-loader']
          },{
              test: /\.(css|less)$/,
              use: ["style-loader", "css-loader"]
          }
        ]
      },
      output: {
          path: path.resolve(__dirname, 'build'),
          filename: 'index.js',
      },
      plugins: [
          new webpack.HotModuleReplacementPlugin()
      ],
      devServer: {
        contentBase: './dist',
        hot: true
      }
    };
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>So this setup works fine and when I change a file in the module, it re compiles the in the project and reflects the change. The question is, the project gives me warnings in the console and the recompile time is so high. </p>
  
  <pre><code>WARNING in configuration
  The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
  You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
  
  WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
  This can impact web performance.
  Assets:
    index.js (16.3 MiB)
    0.5721d2929929bd15755f.hot-update.js (15 MiB)
  
  WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
  Entrypoints:
    main (31.3 MiB)
        index.js
        0.5721d2929929bd15755f.hot-update.js
  
  
  WARNING in webpack performance recommendations:
  You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
  For more info visit https://webpack.js.org/guides/code-splitting/
  </code></pre>
  
  <p>What is the reason for such a warning? Is there anything I could do to improve the build time and avoid the warnings which is shown in the console.?</p>