{"action":"created","issue":{"url":"https://api.github.com/repos/webpack/webpack/issues/1440","labels_url":"https://api.github.com/repos/webpack/webpack/issues/1440/labels{/name}","comments_url":"https://api.github.com/repos/webpack/webpack/issues/1440/comments","events_url":"https://api.github.com/repos/webpack/webpack/issues/1440/events","html_url":"https://github.com/webpack/webpack/issues/1440","id":106104974,"number":1440,"title":"Invalid chunk paths on using with target:atom to create electron app.","user":{"login":"gowravshekar","id":7001437,"avatar_url":"https://avatars.githubusercontent.com/u/7001437?v=3","gravatar_id":"","url":"https://api.github.com/users/gowravshekar","html_url":"https://github.com/gowravshekar","followers_url":"https://api.github.com/users/gowravshekar/followers","following_url":"https://api.github.com/users/gowravshekar/following{/other_user}","gists_url":"https://api.github.com/users/gowravshekar/gists{/gist_id}","starred_url":"https://api.github.com/users/gowravshekar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gowravshekar/subscriptions","organizations_url":"https://api.github.com/users/gowravshekar/orgs","repos_url":"https://api.github.com/users/gowravshekar/repos","events_url":"https://api.github.com/users/gowravshekar/events{/privacy}","received_events_url":"https://api.github.com/users/gowravshekar/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-09-11T22:20:47Z","updated_at":"2015-09-14T00:25:19Z","closed_at":null,"body":"Webpack chunk paths are improper when used to create electron app.\r\n**Compilation of the assets happens fine but the chunks are requested from invalid paths.**\r\n\r\nBelow are few examples:\r\n\r\n1. `url-loader` to load image referred in css: using `loaders: ['url?limit=8192']` , if the image is more than 8k the image is requested separately from the path `file:// + publicPath + image.ext` which obviously fails as the request url is relative to the root of the file system and not root of the app. The correct path should be `appRoot + publicPath +  image.ext`. As per the below config, the image is requested from `file:///a/j/image.ext`.\r\n\r\n2. `bundle-loader` to create separate chunks and load lazily: In this case the publicPath is ignored and the file is requested from the root of the app. As per the below config, the chunk is compiled and present in the path `../dist/a/j/[name].ext` but on running the app, webpack tries to request from the path `../dist/[name].ext`\r\n\r\nBelow is my webpack config file. The same configuration(without target) works fine for website.\r\n\r\n```javascript\r\nvar webpack = require('webpack');\r\nvar path = require('path');\r\nvar argv = require('yargs').argv;\r\n\r\n/*\r\n |--------------------------------------------------------------------------\r\n | Initialise webpack plugins\r\n |--------------------------------------------------------------------------\r\n */\r\n\r\nvar ExtractTextPlugin = require('extract-text-webpack-plugin');\r\n\r\nvar webpackPlugins = [\r\n    new ExtractTextPlugin('[name].css'),\r\n    new webpack.optimize.OccurenceOrderPlugin(),\r\n    new webpack.optimize.DedupePlugin(),\r\n    new webpack.ResolverPlugin(new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin('bower.json', ['main']))\r\n];\r\nif (argv.p) {\r\n    /* Production Mode */\r\n    webpackPlugins = webpackPlugins.concat([\r\n        new webpack.optimize.UglifyJsPlugin({\r\n            output: {\r\n                comments: false\r\n            },\r\n            compressor: {\r\n                warnings: false\r\n            }\r\n        })\r\n    ]);\r\n}\r\n\r\n/*\r\n |--------------------------------------------------------------------------\r\n | Initialise paths\r\n |--------------------------------------------------------------------------\r\n */\r\n\r\n/* Path to web assets folder containing js, sass, img */\r\nvar assetsPath;\r\n/* Path to javascript assets used to webpack */\r\nvar appModulesPath;\r\n/* Path to node modules and bower components */\r\nvar nodeModulesPath, bowerComponentsPath;\r\n/* Path to store webpacked assets */\r\nvar outputPath;\r\n\r\n\r\nassetsPath = path.join(__dirname, 'original_assets');\r\nappModulesPath = path.join(assetsPath, 'js');\r\nnodeModulesPath = path.join(__dirname, 'node_modules');\r\nbowerComponentsPath = path.join(__dirname, 'bower_components');\r\noutputPath = path.join(path.resolve('../dist'), 'a/j');\r\n\r\n/*\r\n |--------------------------------------------------------------------------\r\n | Webpack Configuration\r\n |--------------------------------------------------------------------------\r\n */\r\n\r\nvar config = {\r\n    cache: true,\r\n    /* The base directory (absolute path!) for resolving the entry option */\r\n    context: appModulesPath,\r\n    /* Multiple entry bundles are created. */\r\n    entry: {\r\n        fastrap: 'fastrap.js',\r\n        out: 'out.js',\r\n        in: 'in.js'\r\n    },\r\n    target: 'atom',\r\n    output: {\r\n        path: outputPath,\r\n        /*\r\n         * publicPath should start with / if the url is local.\r\n         * This makes the rewrite of url for extract-text-webpack-plugin\r\n         * to use /a/j for example which tell the browser to go to the\r\n         * root of the server\r\n         */\r\n        publicPath: '/a/j/', // The output.path from the view of the JavaScript\r\n        filename: '[name].js', // Template based on keys in entry above\r\n        chunkFilename: '[name].js'\r\n    },\r\n    module: {\r\n        loaders: [\r\n            {\r\n                test: /\\.css$/,\r\n                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')\r\n            },\r\n            {\r\n                test: /\\.scss$/,\r\n                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader')\r\n            },\r\n            /*\r\n             * Images\r\n             */\r\n            {\r\n                test: /\\.(png|jpg|jpeg|gif)$/,\r\n                // inline base64 URLs for <=8k images, direct URLs for the rest\r\n                loaders: ['url?limit=8192']\r\n            },\r\n            /*\r\n             * Fonts\r\n             */\r\n            {\r\n                test: /\\.woff($|\\?)|\\.woff2($|\\?)|\\.ttf($|\\?)|\\.eot($|\\?)|\\.svg($|\\?)/,\r\n                loader: 'url-loader'\r\n            }\r\n        ],\r\n        noParse: [\r\n            path.join(bowerComponentsPath, '/angular'),\r\n            path.join(bowerComponentsPath, '/jquery')\r\n        ]\r\n    },\r\n    resolve: {\r\n        root: [appModulesPath, nodeModulesPath, bowerComponentsPath],\r\n        extensions: ['', '.js', '.scss', '.css'],\r\n        alias: {\r\n            /*\r\n             * Paths\r\n             */\r\n            sassDir: path.join(assetsPath, 'sass'),\r\n            jsDir: path.join(assetsPath, 'js'),\r\n            angularDir: path.join(appModulesPath, 'angular'),\r\n            angularControllersDir: path.join(appModulesPath, 'angular/controllers'),\r\n            angularDirectivesDir: path.join(appModulesPath, 'angular/directives'),\r\n            angularFiltersDir: path.join(appModulesPath, 'angular/filters'),\r\n            angularServicesDir: path.join(appModulesPath, 'angular/services'),\r\n            oclazyDir: path.join(appModulesPath, 'oclazy'),\r\n        }\r\n    },\r\n    resolveLoader: {\r\n        root: [nodeModulesPath]\r\n    },\r\n    plugins: webpackPlugins\r\n}\r\nmodule.exports = config;\r\n````"},"comment":{"url":"https://api.github.com/repos/webpack/webpack/issues/comments/139930621","html_url":"https://github.com/webpack/webpack/issues/1440#issuecomment-139930621","issue_url":"https://api.github.com/repos/webpack/webpack/issues/1440","id":139930621,"user":{"login":"gowravshekar","id":7001437,"avatar_url":"https://avatars.githubusercontent.com/u/7001437?v=3","gravatar_id":"","url":"https://api.github.com/users/gowravshekar","html_url":"https://github.com/gowravshekar","followers_url":"https://api.github.com/users/gowravshekar/followers","following_url":"https://api.github.com/users/gowravshekar/following{/other_user}","gists_url":"https://api.github.com/users/gowravshekar/gists{/gist_id}","starred_url":"https://api.github.com/users/gowravshekar/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gowravshekar/subscriptions","organizations_url":"https://api.github.com/users/gowravshekar/orgs","repos_url":"https://api.github.com/users/gowravshekar/repos","events_url":"https://api.github.com/users/gowravshekar/events{/privacy}","received_events_url":"https://api.github.com/users/gowravshekar/received_events","type":"User","site_admin":false},"created_at":"2015-09-14T00:25:19Z","updated_at":"2015-09-14T00:25:19Z","body":"As per the example1 mentioned above, it prepends the `output.publicPath`. The publicPath in the webpack configuration is relative to the root of the application. In case of web app this works fine as you can provide a base href and the resource requested is relative to this. However, when using this with desktop app, the resource requested from webpack is relative to the root of the file system, which causes error.\r\n\r\nTo overcome this issue, I did few changes to my configuration.\r\n\r\nChange outputPath to\r\n\r\n```javascript\r\noutputPath = path.join(path.resolve('../dist'), 'a/j/');\r\n```\r\n\r\nChange the publicPath of ExtractTextPlugin from relative to the app to relative to the filesystem.\r\n\r\n```javascript\r\n{\r\n    test: /\\.css$/,\r\n    loader: ExtractTextPlugin.extract('style-loader', 'css-loader',{\r\n        publicPath: outputPath\r\n    })\r\n},\r\n{\r\n    test: /\\.scss$/,\r\n    loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader',{\r\n        publicPath: outputPath\r\n    })\r\n}\r\n```\r\n\r\nThank you @sokra to help me come up with this workaround.\r\n\r\nBut I didn't find any workaround for example2 above when using bundle loader with webpack. In this case `output.publicPath` is not prepended to the request url. I believe webpack should change the way chunks are requested when `target:atom` is used. Please let me know if you any solution to fix this."}}