Entry module not found: Can't resolve './assets/app.js'

Question

I'm trying to use webpack but i get an error

$ node_modules/.bin/webpack
Hash: d1aee5dc037997fae5a6
Version: webpack 3.4.1
Time: 31ms

ERROR in Entry module not found: Error: Can't resolve './assets/app.js' in 'D:\template\src'

It's my first time using webpack.

here is my script

const path = require('path');
const webpack = require('webpack');
module.exports = {
  context: path.resolve(__dirname, './src'),
  entry: {
    app: './assets/app.js',
  },
  output: {
    path: path.resolve(__dirname, './node_modules'),
    filename: '[name].bundle.js',
  },
};

My folder structure

I think i get the error here context: path.resolve(__dirname, './src'), I just don't know with what i replace that part.

I already read this https://webpack.github.io/docs/tutorials/getting-started and already try searching with google about how to use webpack. Any solutions ?.

  "devDependencies": {
    "buefy": "",
    "bulma": "",
    "vue": "^2.1.10",
    "webpack": "^3.4.1"
  },

Answer 1

The context option defines the base directory that is used to resolve anything in the webpack config. You are using ./src/ as the base directory, so ./assets/app.js is resolved inside the src directory (it would technically be ./src/assets/app.js ).

If no context is provided, webpack will use the current directory, which is what you want. You can remove context entirely from your config. You probably also want to output the bundle into a directory such as ./dist instead of into ./node_modules . Your config would be as follows.

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './assets/app.js',
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].bundle.js',
  },
};

You were looking at the webpack 1 docs, but you should use the newer docs, which are significantly better: Webpack - Getting Started .