title: Webpack: Uncaught ReferenceError: require is not defined
body: <p>In my <code>PHP</code> project - I am trying to build my <code>js</code> files using webpack and babel. There are 3 <code>js</code> files - <code>config.js helper.js script.js</code>. They have dependency on each other. <code>helper.js</code> is dependent on <code>config.js</code> and <code>script.js</code> is dependent on <code>helper.js</code>.</p>
  
  <pre><code>config.js:
  
  module.exports = {
    const DG_GRAPH_TYPE = 'line';
  
    const DG_XAXIS_TICKS = 4;
  
    const DG_SINGLE_POST_GRAPH_CANVAS_HEIGHT = 250;
    ......
  
  
  
  helper.js:
  
  const config = require('./config');
  
  module.exports = {
  ......
  
  
  
  script.js:
  
  const helper = require('./helper');
  
  jQuery(document).ready(function ($) {
  ......
  </code></pre>
  
  <p>Here is my <code>wepack.config.js</code> file where I configured with following code:</p>
  
  <pre><code>const path = require('path');
  
  module.exports = {
      entry: {
          script: [
              './assets/js/script.js'
          ]
      },
      output: {
          filename: '[name].bundle.min.js',
          path: path.resolve(__dirname, 'build'),
      },
      resolve: {
          extensions: ['.js', '.css']
      },
      module: {
          rules: [
              {
                  test: /\.js/,
                  exclude: /node_modules/,
                  use: {
                      loader: 'babel-loader',
                      options: {
                          presets: ['@babel/preset-env'],
                          plugins: [require('@babel/plugin-proposal-object-rest-spread')]
                      }
                  },
                  parser: {
            amd: false, // disable AMD
            commonjs: false, // disable CommonJS
            system: false, // disable SystemJS
            harmony: true, // disable ES2015 Harmony import/export
            requireInclude: false, // disable require.include
            requireEnsure: false, // disable require.ensure
            requireContext: false, // disable require.context
            browserify: true, // disable special handling of Browserify bundles
            requireJs: true, // disable requirejs.*
            node: false, // disable __dirname, __filename, module, require.extensions, require.main, etc.
          }
              }
          ],
      }
  };
  </code></pre>
  
  <p>Everything works fine except when I add the built script file within project, I get following browser console error -</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: require is not defined at Object.
    (script.bundle.min.js?ver=4.9.8:1)
        at a (script.bundle.min.js?ver=4.9.8:1)
        at Object. (script.bundle.min.js?ver=4.9.8:1)
        at a (script.bundle.min.js?ver=4.9.8:1)
        at script.bundle.min.js?ver=4.9.8:1
        at script.bundle.min.js?ver=4.9.8:1</p>
  </blockquote>
  
  <p>What I was expecting <code>require.js</code> should solve the issue. But it doesn't.</p>
  
  <p>Can you please suggest me the appropriate way to solve the issue?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>The main concept of the work is just to build multiple <code>js</code> files in one place also adding babel to make it browser friendly if I have to add ES6/ES7.</p>
  
  <p>My main <code>js</code> file is <code>script.js</code> which its has two dependencies <code>config.js</code> and <code>helper.js</code>. So, I was to build only <code>script.js</code> where I wanted to <code>import/require</code> dependencies file there.</p>
  
  <p>At first I tried to entry all <code>js</code> files, but all I got <code>script.js</code> was built not others. -</p>
  
  <pre><code>entry: {
          script: [
              './assets/js/config.js'
              './assets/js/helper.js'
              './assets/js/script.js'
          ]
      },
  </code></pre>
  
  <p>Here is the <code>package.json</code> -</p>
  
  <pre><code>{
    "name": "GRAPH",
    "version": "1.0.0",
    "description": "Graph plugin",
    "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" &amp;&amp; exit 1",
      "build": "webpack"
    },
    "author": "ABC",
    "license": "ISC",
    "devDependencies": {
      "@babel/core": "^7.1.0",
      "@babel/polyfill": "^7.0.0",
      "@babel/preset-env": "^7.1.0",
      "babel-loader": "^8.0.4",
      "jquery": "^3.3.1",
      "mini-css-extract-plugin": "^0.4.3",
      "requirejs": "^2.3.6",
      "webpack": "^4.20.2",
      "webpack-cli": "^3.1.1",
      "webpack-dev-server": "^3.1.9"
    }
  }
  </code></pre>
  
  <p>Also, yes. I was adding the built <code>js</code> file in <code>&lt;script&gt;</code> tag.</p>
  
  <p><strong>END EDIT</strong></p>
  
  <p>Thanks in advance!</p>