CODEWITHSUNDEEP
javascriptnode.jswebpack
Batman
Batman

Reputation: 6373

How do I load my scripts into webpack

I've used webpack to bundle my npm dependencies in the past, like jquery, lodash, etc.

I'm having trouble figuring out how to bundle dependencies AND my own scripts?

Loader.js:

require('expose?$!expose?jQuery!jquery');
require('lodash');
require('react');
require('slider-component.js'); // my component in app folder

slider-component.js: 

class Slider extends React.Component {
  constructor() {
    super(props);
    this.state = { data: [] };
  };

  componentDidMount() {
    let data = [
      {
        title: "My Image 1",
        url: "www.facebook.com",
        img: "https://i.imgur.com/jrIXCSJ.jpg",
        caption: "Something important text"
      },
    ]

    setTimeout(function(){
      this.setState({data: data});
    }, 5000)
  };

  render() {
    let data = this.state.data
    let slides = data.map((slide, index)=> {
      return(<Slide
        key={index}
        title={slide.title}
        url={slide.url}
        img={slide.img}
        caption= {slide.caption}
      />)
    })
    return (
      <ul className="slides">
        {slides}
      </ul>
    )
  }
}

ReactDOM.render(
  <Slider />,
  document.getElementById('flexslider')
);

I get this error:

ERROR in ./app/loader.js Module not found: Error: Cannot resolve module 'slider-component.js' in C:\Users\Administrator\Dropbox\projects\sharepoint-projects\addin-slider\app @ ./app/loader.js 10:0-30

Upvotes: 0

Views: 1464

Answers (1)

nyrd
nyrd

Reputation: 498

You should read this document relating to how webpack resolve modules.

There are three types of module requests:

1) Absolute path require("/home/me/file") require("C:\Home\me\file")

2) Relative path require("../src/file") require("./file")

3) Module path require("module") require("module/lib/file")

Absolute path

We first check if the path points to a directory. For a directory we need to find the main file in this directory. Therefore the main field in the package.json is joined to the path. If there is no package.json or no main field, index is used as filename.

We have an absolute path to a file now. We try to append all extensions (configuration option resolve.extensions). The first existing file is used as result.

Relative path

The context directory is the directory of the resource file that contains the require statement. If there is no resource file the configuration option context is used as context directory. (This can occur for entry points or with loader-generated files).

The relative path is joined to the context directory and the resulting absolute file is resolved according to “Resolving an absolute path”.

Module path

For resolving a module we first gather all search directories for modules from the context directory. This process is similar to the node.js resolving process, but the search directories are configurable with the configuration option resolve.modulesDirectories. In addition to this the directories in the configuration option resolve.root are prepended and directories in the configuration option resolve.fallback are appended.

The module is looked up in each module directory and resolved according to “Resolving an absolute path”. If the first match has no success, the second is tried and so on.

The type of module request you want to use is a module path. So, in your webpack.config.js, you should add/edit the field resolve.modulesDirectories (which is an array of strings) and append the directories that contain your modules.

For example:

var path = require('path');

// ...
resolve: {
    modulesDirectories: [
        path.resolve('./src/my_components')
    ]
}

Also, as the document states, you may use resolve.root or resolve.fallback to specify these directories.

Upvotes: 2

Related Questions