How do entrypoints work?

[johannes-z]

Description

I want to make the switch to brunch but can't figure out how entryPoints are supposed to work. I already looked at the issue here #1349, but it didn't help me much.

Expected behavior

I want to get two files, proj1.js and proj2.js and a vendor.js file that contains all the node_module dependencies of the two other files.

Actual behavior

Console output:

$> brunch build
18:29:49 - warn: 'vendor.js' is already used by another entry point, can't add it to config.files.javascripts.entryPoints for 'app/proj2/index.js'
18:29:52 - warn: app/initialize.js compiled, but not written. Check your javascripts.joinTo config
18:29:52 - warn: app/proj1/initialize.js compiled, but not written. Check your javascripts.joinTo config18:29:52 - warn: app/proj2/initialize.js compiled, but not written. Check your javascripts.joinTo config
18:29:52 - warn: app/proj1/components/App.vue compiled, but not written. Check your templates.joinTo config
18:29:52 - warn: app/proj2/components/App.vue compiled, but not written. Check your templates.joinTo config
18:29:52 - info: compiled 4 files into 4 files, copied index.html in 3.9 sec

Environment

1. Brunch: 2.10.12
2. Node.js: 9.11.1
3. NPM: 5.6.0
4. Operating system: windows 10 build 1709
5. Code editor: vs code

package.json contents

  "dependencies": {},
  "devDependencies": {
    "auto-reload-brunch": "^2",
    "babel-brunch": "~6.1",
    "babel-eslint": "^8.2.3",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-latest": "^6",
    "brunch": "^2",
    "clean-css-brunch": "^2",
    "uglify-js-brunch": "^2",
    "vue": "^2.5.16",
    "vue-brunch": "^2.0.1"
  }

brunch config contents

exports.files = {
  javascripts: {
    entryPoints: {
      'app/proj1/index.js': {
        'proj1.js': /^app/,
        'vendor.js': /^(?!app)/,
      },
      'app/proj2/index.js': {
        'proj2.js': /^app/,
        'vendor.js': /^(?!app)/,
      }
    }
  },
  stylesheets: {joinTo: 'app.css'}
};

exports.plugins = {
  babel: {presets: ['latest']}
};

Other useful files, when present (log, bower.json etc.)

Project structure:

[tarciozemel]

From the docs:

two entry points can't write to the same file

[thedanbob]

This config might work, though I haven't tried it:

exports.files = {
  javascripts: {
    entryPoints: {
      'app/proj1/index.js': {
        'proj1.js': /^app/
      },
      'app/proj2/index.js': {
        'proj2.js': /^app/
      }
    },
    joinTo: {
      'vendor.js': /^(?!app)/
    }
  },
  // ...
};

[urosgruber]

How did you manage to get this to work anyways. I tried entryPoints a couple of times without success.

[JosephShering]

I'm also having issues with entrypoints, I just get this vague error

21:41:16 - warn: The correct use of entry points is: `'entryFile.js': 'outputFile.js'`. You are trying to use 'js/map.js' as an entry point, but it is probably an output file.

module.exports = {
    files: {
        javascripts: {
            entryPoints: {
                'js/map.js': 'map.js'
            }
        },
        stylesheets: {
            joinTo: {
                'map.css': /map/,
                'home.css': /home/
            }
        }
    },
    paths: {
        watched: ['frontend'],
        public: './static'
    }
}

[thedanbob]

Assuming your source file is frontend/map.js and your output file is static/js/map.js, the configuration you want is

module.exports = {
    files: {
        javascripts: {
            entryPoints: {
                'frontend/map.js': 'js/map.js'
            }
        },
        stylesheets: {
            joinTo: {
                'map.css': /map/,
                'home.css': /home/
            }
        }
    },
    paths: {
        watched: ['frontend'],
        public: 'static'
    }
}