CODEWITHSUNDEEP
webpack
davidtheclark
davidtheclark

Reputation: 4676

Webpack bundle-loader trying to load non-existent file

I'm trying to use Webpack's bundle-loader to asynchronously load Pikaday for a datepicker component (I only want to load Pikaday on those pages that use it). It seems that I've managed to get the build working correctly -- an additional JS file is generated that includes Pikaday, and my base bundle does not -- but the code that bundle-loader generates to request the new file looks for an incorrect URL.

The relevant code looks like this:

My Datepicker component imports Pikaday with bundle-loader: import pikadayLoader from 'bundle!pikaday';. Then it uses that like so

pikadayLoader(Pikaday => {
  this.picker = new Pikaday({
    field: React.findDOMNode(this.refs.dummyInput)
  });
});

My Webpack config has an output that looks like this:

output: {
  path: path.join(__dirname, '../sandbox', 'dist'),
  filename: 'app.js'
},

So the JS files are being built into a dist directory within my sandbox project. The page that uses the scripts is sandbox/index.html.

When I actually build the code, the Pikaday bundle is indeed generated at sandbox/dist/2.app.js. BUT the Webpack-generated loader looks for it at sandbox/2.app.js -- without the dist -- and therefore doesn't find it. So the code doesn't work.

Can any Webpack experts help me out here?

(Because of my history with Webpack, I'm guessing that this is confusion related to unclear documentation, rather than a bug -- but if you do think it is a bug, let me know and I will file an issue.)

--- MORE ---

Looks like essentially the same thing is happening if I try to use Pete Hunt's method (require.ensure(..)) describe here instead of bundle-loader. Again, there is a request being made to /2.app.js instead of the intended /dist/2.app.js.

So it really seems like the problem is about how to tell the loaders to look in dist/.

Upvotes: 0

Views: 978

Answers (1)

Nish
Nish

Reputation: 547

publicPath is what you need.

output: {
    path: path.join(__dirname, '../sandbox', 'dist'),
    publicPath: '/dist', // absolute path to index.html
    ...
}

Upvotes: 1

Related Questions