I am learning Webpack and going through it again and again. In the latest build, there is something very strange going on. CLI reports everything is well & the output file dress_aphrodite.js
is emitted
, yet its nowhere to be found in the folder.
Here are the logs: From CLI:
http://localhost:8080/webpack-dev-server/
webpack result is served from /app/
content is served from ./app
Hash: 5334867c12acfa65ba90
Version: webpack 1.12.9
Time: 1966ms
Asset Size Chunks Chunk Names
dress_aphrodite.js 390 kB 0 [emitted] main
dress_aphrodite.js.map 479 kB 0 [emitted] main
chunk {0} dress_aphrodite.js, dress_aphrodite.js.map (main) 354 kB [rendered]
[0] multi main 52 bytes {0} [built]
[1] ./~/babel-polyfill/lib/index.js 209 bytes {0} [built]
[2] ./~/core-js/shim.js 4.31 kB {0} [built]
[3] ./~/core-js/modules/es5.js 10.2 kB {0} [built]
...
[263] ./~/ansi-regex/index.js 135 bytes {0} [built]
webpack: bundle is now VALID.
So everything looks good above. Yet, there is no dress_aphrodite.js
file in the main folder or ./app
folder.
Here is the webpack.config.js file:
var path = require ('path');
var webpack = require ('webpack');
module.exports = {
entry : [
'babel-polyfill',
'./app/da',
'webpack-dev-server/client?http://localhost:8080'
],
resolve : {
extension : ['', '.js', '.jsx', '.json']
},
output : {
publicPath : '/app/',
filename : 'dress_aphrodite.js'
},
debug : true,
devtool : 'source-map',
devServer : {
contentBase : './app'
},
module: {
loaders: [
{
test : /\.js$/,
include : path.join (__dirname, 'app'),
loader : 'babel-loader',
query : {
presets : ["es2015"]
}
}
]
}
};
And finally, incase, anyone needs the package.json file, here it is:
{
"name": "dress_aphrodite",
"version": "1.0.0",
"description": "",
"main": "dress_aphrodite.js",
"scripts": {
"start": "node_modules/webpack-dev-server/bin/webpack-dev-server.js"
},
"author": "",
"license": "ISC"
}
Any help as to why the output file is not being emitted / rendered?
Thanks
Edit: Tried without the Output.publicPath
(as suggested by YuWu), still no change. Changed it to path
property & still no change as well.
Edit 2: As a test, I added the html-webpack-plugin
into the webpack.config.js
file to see if it would be emitted by webpack and yes, apparently that too has been emitted and yet I cannot see.
Edit 3: (Post generous conversation with YuWu) : The webpack-dev-server
is running fine and displaying the window.alert in the js file along with the dynamic html file created via html-webpack-plugin
. I recall installing the webpack-dev-server
globally. Could that be where the html & the js emitted files are being stored? Where can i locate the global directory in Ubuntu 15.1?
(It shouldn't be the case as package.json is pointing towards the local directory path in reference to the 'start' property...)
Edit 4: Here is the question I posted on webpack github issues section. My further investigation findings are also noted there in the comments. https://github.com/webpack/webpack/issues/1736
It's expected that you won't see anything output to disk with this configuration.
You've defined webpack-dev-server
as one of your entry points, and have started to set up the dev server via the devServer
property in the project
webpack-dev-server
works by running webpack, and storing the contents of the compilation in memory. This way, when you make a change to one of your files and webpack-dev-server
recompiles the changes, it can do so quickly.
By storing these files in memory, we remove I/O latency allowing webpack to complete recompilations quickly and serve files to your browser quickly.
If you want files to be output onto disk, you should run webpack
instead of webpack-dev-server
and remove webpack-dev-server/...
from the entry point in your config.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With