Comments (82)
@sompylasar this is a very late reply, but you can examine the generated assets if you visit your dev server under the /webpack-dev-server path. I.e. if you're running it on 9000, http://localhost:9000/webpack-dev-server.
from webpack-dev-server.
In webpack config:
{
...
devServer: { // https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-
writeToDisk: true,
},
}
from webpack-dev-server.
The webpack-dev-server doesn't write files to disk. You can use webpack --watch
which writes files to disk. But why would you need to access the generated assets? This shouldn't be required.
When using with an existing server you should thread the webpack assets as blackbox that exists at a special URL.
from webpack-dev-server.
I have released a plugin that forces webpack-dev-server to write to the file system.
https://github.com/gajus/write-file-webpack-plugin
from webpack-dev-server.
Writing to disk is not an option for the webpack-dev-server. Instead you can use webpack --watch
which does the same but writes files to disk + a static fileserver.
from webpack-dev-server.
+1 for writing to disk. Just adds confusion when starting out.
from webpack-dev-server.
@diurnalist I have two entry points, one of which I want served by webpack-dev-server for hot reloading (an admin page) and the other entry point I need compiled to disk so it can be loaded as part of a server generated React page.
@max-mykhailenko I need to see the results of my changes before committing ;-)
from webpack-dev-server.
But why would you need to access the generated assets?
Suppose you're writing a Chrome Extension. These aren't loaded from a server. The bundle file is needed to be loaded from disk. Not adding this option requires setting up a separate Grunt watch task just to call webpack. That's messy since for other bundles I do want to load from the "dev server".
from webpack-dev-server.
+1 for not only serving the compiled files, but also writing the compiled files to disk.
from webpack-dev-server.
Unfortunately, your plugin writes only bundle.js and skips other files (e.g. images, fonts). Although its not crucial. Using data-urls for this stuff will solve problem.
It writes the same what webpack
program would. If you have not configured webpack program to write whatever additional resources, it will not write them.
from webpack-dev-server.
@justinjdickow
I'll add my super random need for this as a +1.
https://github.com/gajus/write-file-webpack-plugin
from webpack-dev-server.
I've spent 20 minutes reloading and deleting node_modules
and reinstalling everything just to find out webpack-dev-server
doesn't write to disk. Usually I want to check what in the bundle is changing or sometimes I want to check how the code is generated (for technical purposes) That's why I think it's useful to have an option to write the generated files to disk so I can check them in my own editor to inspect changes.
from webpack-dev-server.
@sokra but that means you can't do hot-reloads...
from webpack-dev-server.
Another usecase:
- I have a Cordova app based on my mobile website
- I want to dev my mobile website with hot reloading in the browser
- To test my app on real device, all assets must be available in /cordova/www folder
Currently, whenever I'm working on the mobile app, I have to fallback to webpack --watch
, and doing so means I don't have anymore hot reloading when "previewing" my devs in the browser. I need both hot reloading + writing to disk
Will try plugin of @gajus thanks
from webpack-dev-server.
I have to stop the dev server every time, build, and watch again.
Just use https://github.com/gajus/write-file-webpack-plugin
from webpack-dev-server.
Working on an electron app. Would like to be able to serve the initial main from the filesystem, but have subsequent loads work via the server.
from webpack-dev-server.
I have released a plugin that solved this problem
https://github.com/euclid1990/write-assets-webpack-plugin
from webpack-dev-server.
Thank you for the plugin @gajus! For the record, my use case is I'm running selenium tests which expect a bundle to be there on the file system. Currently we're all running webpack dev server, but whenever someone wants to run a selenium test they need to remember to kill the dev server and run webpack --watch
instead.
from webpack-dev-server.
This feature is highly needed for HMR universal apps, when need re-bundle server and send changed client.bundle to the client
from webpack-dev-server.
I basically want the server auto refreshing when I make changes in the code, similar to how the ember-cli works.
from webpack-dev-server.
I'd like to add an argument for adding this option 😊. When using electron, in certain cases, you are only allowed to use files from a file:
path: https://github.com/atom/electron/blob/master/atom/renderer/lib/web-view/web-view-attributes.coffee#L201
@nickpresta As far as I know, not right now. You have to run a separate webpack -w
.
from webpack-dev-server.
There is a plugin for this. Whats everyone upset about? Just use it.
On Dec 9, 2015, at 21:59, Andrew McPherson [email protected] wrote:
A good solution is to just use Webpack, which actually writes to the disk, which you can pair with something like BrowserSync. It seems like WebpackDevServer is meant only for non-writing-to-disc development. :]
—
Reply to this email directly or view it on GitHub.
from webpack-dev-server.
My solution is putting "emit" hook into the build process.
const compiler = webpack(config)
compiler.plugin('emit', (compilation, callback) => {
const assets = compilation.assets
let file, data
Object.keys(assets).forEach(key => {
// if (key.match(/\.html$/)) {
file = path.resolve(__dirname, key)
data = assets[key].source()
fs.writeFileSync(file, data)
// }
})
callback()
})
app.use(devMiddleware(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}))
app.use(hotMiddleware(compiler))
from webpack-dev-server.
from webpack-dev-server.
But why would you need to access the generated assets? This shouldn't be required.
While debugging the build process (webpack build configuration, webpack loaders configuration, project file structure), you could have to look into the generated files to understand what has gone wrong.
BTW, webpack-dev-server does not reload webpack config file when it changes either. So we have to restart the server. Luckily, the browser-side waits for it and catches up (thanks for that!).
from webpack-dev-server.
A good solution is to just use Webpack, which actually writes to the disk, which you can pair with something like BrowserSync. It seems like WebpackDevServer is meant only for non-writing-to-disc development. :]
var webpack = require("webpack")
var browersync = require("browser-sync")
webpack({
watch: true,
//put your config here
}, function(error, stats) {
if(!!server && !!server.active) {
server.reload()
}
})
server = browersync({
server: "./build",
port: 8080
})
from webpack-dev-server.
@Kos You're right, might be a bit awkward in some cases. This also works for me:
"scripts": {
"start": "./node_modules/.bin/webpack-dev-server",
"start-disk": "./node_modules/.bin/webpack --watch"
}
Run 'npm start' first, then 'npm run start-disk' in a separate terminal window. You can develop with webpack-dev-server and bundle is automatically written to disk at the same time through webpack --watch... Might need to delete your bundle file to start.
from webpack-dev-server.
@KyleAMathews so, just to be clear (again, happy to discuss via email, these GH comment reply flows get a bit ridic after a certain point...) - does your generated HTML file need to include the script inlined? Or is it fine to include it as an external link? Obviously if the latter is true, you can simply link your script in:
<script src="http://localhost:9090/js/your-react-bundle.js"></script>
You'd just need to be able to change the host for when you deploy the app to a remote server, obviously.
If you need to actually inline your script... that's a different issue. But, I'd ask: why would you need to do that? For what it's worth, it's possible. I'm currently doing it to bootstrap some page-specific JSON into my app when it starts. The tricky part here is you need to understand what IDs webpack has assigned your modules. To do that, you need to parse the stats object webpack returns when a compilation completes. I have some code I could open-source that helps with this.
Basically, I have some script template that looks something like this:
webpackJsonp([], {
0: function (module, exports, require) {
var App = require(__APPLICATION_MODULE_ID__);
App.start(__BOOTSTRAP_DATA__);
}
});
And then when I'm generating my HTML page, I just read that template and replace the tokens with the webpack module id for the App module and the JSON string of bootstrap data. This works essentially by injecting a dummy webpack chunk on to the page that has no dependencies. You would need to ensure that you have loaded the main webpack library on the page before doing this, or else the webpackJsonp
function will not exist yet.
from webpack-dev-server.
@diurnalist ,@KyleAMathews can i have any single command which will able to create my bundle.js file in my app not with --watch and that should able to run webpack-dev-server also ?
combination of webpack --watch &
webpack-dev-server --content-base build/
from webpack-dev-server.
yes @gajus that works fine for me, not sure it's worth integrating in webpack core
(btw not sure it's very useful to write hot updates to disk by default)
from webpack-dev-server.
The core features are dictated by the mainstream use. This isn't a mainstream use case. Plugins are to support alternative use cases.
from webpack-dev-server.
Thanks @gajus. After a long search related to emit usecase i landed upto this thread and found your plugin a Savior. THanks. +1 for your plugin.
from webpack-dev-server.
But why would you need to access the generated assets? This shouldn't be required.
I would normally agree with you, but at this moment I am trying to use Visual Studio Code debugging tools to debug my app, and it only works if you provide it with the file location in disk. I used https://github.com/gajus/write-file-webpack-plugin to do the trick, and that worked fine.
Normally I would not want it to be written in the disk though, so I'll see if I can separate this in a different npm script or something like that!
from webpack-dev-server.
This would be useful when using webpack + BrowserSync to refresh when static assets (ie., CSS) change.
from webpack-dev-server.
Unfortunately, your plugin writes only bundle.js and skips other files (e.g. images, fonts). Although its not crucial. Using data-urls for this stuff will solve problem.
@wailorman This has been fixed in the latest release. gajus/write-file-webpack-plugin#14
from webpack-dev-server.
Very strange that this is not supported. I'm using webpack to write an electron app and since the main module can't really be hot-reloaded, this is a pain in the behind. I have to stop the dev server every time, build, and watch again.
from webpack-dev-server.
It doesn't seem right that I need a plugin for this.
Our use case is this: Some of our developers prefer webpack --watch
and some prefer webpack-dev-server
. We have a button in our app to switch between them. But because the dev server doesn't output files, I need to build with plain webpack first so that I can reach that button.
from webpack-dev-server.
@gajus great plugin, thanks!
That being said, I'm also of the opinion it should be integrated in the core project, as an optional flag. I don't even have a complicated user case, I just like to see what's being outputted right there in my ide whenever I want to. I don't believe I'm alone in that.
from webpack-dev-server.
Just wanted to chime in to say again what has already been said: Django + webpack --watch is annoying without the awesomeness of hot reloading. Haven't tried @gajus plugin. This should be a core feature, or at least mentioned somewhere in the webpack-dev-server documentation.
from webpack-dev-server.
I'd like to see an option like this as well. At least from my initial webpack experiments, it seems that being able to write the dev server output to disk would make working in parallel with another server much simpler. Right now I have a fairly complicated work-around of loading static assets from the dev server based on an environment variable, which works okay for a single bundle but breaks code-splitting.
from webpack-dev-server.
Right, it makes a bit more sense now that I've worked with webpack a little more - it just necessitates my server having some notion of that blackbox in development, rather than always just serving assets from disk.
from webpack-dev-server.
yesterday, a bad day, so I'll delete the things I wrote here.
Webpack works with WebStorm very well.
You have to set in remote urls the mapping of your sources starting from "webpack:///."
PS: and it worked only for a minute. now, back to nothing
from webpack-dev-server.
+1
from webpack-dev-server.
@diurnalist Sure, I know. This is how I do debugging in the browser. But I wanted to have the files in my text editor rather than in the browser's developer tools.
from webpack-dev-server.
@KyleAMathews how so? Nothing about hot reloads requires the assets be written to disk. I'm using it in a project right now without issue.
from webpack-dev-server.
@diurnalist sorry wasn't clear — I want assets written to the disk. I was the one who originally created this issue ;-)
Right now I have to run both webpack-dev-server
and webpack -w
.
from webpack-dev-server.
@KyleAMathews hmm, I'm still trying to understand why you need to run two webpack compilations. It seems irrelevant how the bundle is served. The only thing I can think is that somehow you need to do additional processing outside of webpack land on one of your output files? Feel free to send me an email (listed on my profile) - I've had to deal with a few weird things when integrating webpack into a big project, maybe my experience can be of use.
from webpack-dev-server.
@KyleAMathews you can try setup git hook and run webpack on commit, pull etc.
from webpack-dev-server.
I have two entry points
You should have two configurations, because the target
option differs: web
and node
.
from webpack-dev-server.
@sokra I was a bit unclear — the target for both entry points is the web — React is used to generate the initial html page that's sent but I still need the compiled js to animate the react app in the browser.
from webpack-dev-server.
I've tried to follow allow this thread and the linked threads, but I'm still unsure of my current options.
It is possible to run Webpack Dev Server in "hot reload" mode (to support React Hot Loader, etc) while still writing the files to disk?
from webpack-dev-server.
+1 for dev server writing to disk!
from webpack-dev-server.
We also needed it for node's native modules (.node
). They can't be loaded from web server.
from webpack-dev-server.
@gajus Thank you for that!
from webpack-dev-server.
@gajus thank you.
+1 Still hoping for an official resolution to be provided
from webpack-dev-server.
+1
from webpack-dev-server.
+1 Make it optional at least, please
from webpack-dev-server.
@gajus Drop a link, bro! :]
from webpack-dev-server.
from webpack-dev-server.
@gajus
Unfortunately, your plugin writes only bundle.js and skips other files (e.g. images, fonts). Although its not crucial. Using data-urls for this stuff will solve problem.
I was having a lot of problems with launching web-dev-server via gulp and writing right config for it. So, I've started using webpack-dev-server --content-base dist/
and all problems went out! Highly recommend to use this way. I don't need to write bundle to disk any more
from webpack-dev-server.
+1 for a flag that permits writing contents out to disk.
from webpack-dev-server.
@gajus Thank you very much! Your plugin is really awesome
from webpack-dev-server.
@gajus perfect! exactly what I needed. Thx!
from webpack-dev-server.
I'll add my super random need for this as a +1.
I am working on a proof of concept for a product that has an HTML5 UI on an embedded (vehicle) OS. The HTML talks to the embedded component over WebSocket and does not have any sort of internet access. There are points in the communication which the embedded component passes a path to the HTML5 app containing assets such as images for display. I am currently creating a tunnel so the app can grab the static files via ip + file path and running nginx on the embedded component to serve the static files (hack) while I run the web app from my mac on the same network. It would be ideal if I could run these on the same OS and launch the index.html file (referencing the compiled index.js file) into the web view so that its url is file:// instead of http:// so that it has access to the file system. To do this I need the compiled index.js (I think)
from webpack-dev-server.
@gajus I did end up finding that and it worked perfectly for my needs. Thank you!
from webpack-dev-server.
@gajus excelent plugin, thanks!
from webpack-dev-server.
It doesn't seem right that I need a plugin for this.
Whats the problem with using a plugin?
from webpack-dev-server.
Whats the problem with using a plugin?
I feel like this should be a built in behavior.
from webpack-dev-server.
I am writing a C# => TypeScript transpiler plugin. TypeScript editors / type checkers require hard files on disk. Currently detecting if I'm running in watch and using fs.writeFile
to emit assets, otherwise I use the assets object. It would be nice to be able to route assets to avoid less differences in dev / prod code paths.
from webpack-dev-server.
@anuja8275 @simon-paris @ashish-chopra What if you just use:
"start": "./node_modules/.bin/webpack-dev-server && ./node_modules/.bin/webpack"
in your package.json? Dev server runs first and you make your edits. When done you ctrl-c to close the terminal process and webpack will automatically start to create the file system bundle.
from webpack-dev-server.
@SteveGBanton I don't think that would provide good usability - most users expect Ctrl+C to be instantenous and a webpack run can easily take half a minute.
from webpack-dev-server.
I had some problems to get file bundled in dir that i want, the problem was because i run webpack in Windows, and i had to change the slash in paths.
Ex: context: __dirname + '/resources/assets/js', to context: __dirname + '\\resources\\assets\\js',
from webpack-dev-server.
@gajus Hey, thanks for the plugin. You may want to surround the fs.writeFileSync(relativeOutputPath.split('?')[0], assetSource);
in a try-catch since it can throw an exception.
from webpack-dev-server.
@gajus Hey, thanks for the plugin. You may want to surround the fs.writeFileSync(relativeOutputPath.split('?')[0], assetSource); in a try-catch since it can throw an exception.
PR welcome.
from webpack-dev-server.
@everyone I see at least two viable solutions provided here in this thread so let's make a couple things clear before we keep asking to add more stuff:
- ANY addition to webpack functionality is by nature a plugin. So if you think writing to disk should be an option and not a plugin, guess what, any way you slice it it will be a (internal) plugin.
- @gajus 's solution which I'm about to try out! https://github.com/gajus/write-file-webpack-plugin
- @chikara-chan 's super easy plugin which I will try first.
Now, the reason I want write-to-disk is b/c I need to be able to make server-side changes without having to re-compile the client from scratch when the server restarts. I am aware of chokidar
watching for require.cache deletion, but it didn't work at all in my case.
I've separated out the processes, but the only way I see the forked server process being able to get the references to the webpack assets in-memory is via node's IPC channels (someone correct me if I'm wrong!).
While probably the best/correct solution, I don't really want to mess with it when serving static files on disk is trivial in comparison. Being able to use HMR w/ that absolute path on-disk would be so easy I could eat an everything bagel with morning coffee, take a dump, and read the paper while still filling my daily quota of code lines. Let's see if this works...
from webpack-dev-server.
Alright the above doesn't really work because webpack-hot-client
does us the gracious service of updating browser assets via websocket and I was trying to cut that part out completely.
So! I still need a mechanism to have the server server and the client server as separate processes... more easily done by simply having two servers on two different ports.. pretty much negating the need to write anything to disk in dev. ciao
from webpack-dev-server.
Just my two cents: My project's backend is written in Python using Django. The Webpack HTTP Plugin just wouldn't cut it for my multiple-entry application, so I wrote a plugin to make Webpack write a file with all of the chunks it output and all of their required chunks. Django could then read that file and add the appropriate HTML tags. That blows up when Webpack doesn't spit out any files.
I will admit that the use case are few, but they do exist. @gajus plugin worked dandily. At least an official link in the README would be nice.
from webpack-dev-server.
Extremely late for the party, but my 2 cents on this:
You are correct that when you are busy in developing your page and components and styles and apis, this is somewhat redundant, but when you are configuring your environment, adding third party sdks, scripts, configurations, files (and god know what other requirements they have) all that while maintaining dev and prod (maybe also staging) configurations.. things gets complicated, and although I can just execute webpack instead of webpack-dev-server and see the results, I do prefer to catch as many bird in one run...
And since you refuse adding a flag to do it.. you force us, and I do believe most of us, to just use a plugin even if just to save us few seconds every time.. cause these few second pile up eventually, and personally I hate wasting my time for no god reason.
from webpack-dev-server.
But why would you need to access the generated assets?
Because I'm developing a library which I need to test in a browser, but I also need to import it from the file system in Node.js applications (f.e. other Electron apps that I'm also testing).
from webpack-dev-server.
Essentially webpack-dev-server
is designed to be used while developing apps, not while developing libraries.
from webpack-dev-server.
Facing same issue. @sokra @trusktr in my scenario I'm trying to write a library and in the meantime watch it in an app:
const pkg = require('./package.json');
const webpack = require('webpack');
const path = require('path');
module.exports = [{
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'dist.min.js',
library: pkg.name,
libraryTarget: 'umd'
},
watch: true,
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
}],
}],
},
externals: {
},
},{
entry: './demo/index.js',
output: {
publicPath: '/',
path: __dirname + '/demo',
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
}],
}],
},
resolve: {
alias: {
Form: path.resolve(__dirname, './dist/dist.min.js'),
},
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
devServer: {
contentBase: './demo',
hot: true
},
}];
The latter does not find the "resolved" => "Form" bundle on disk because it is not written.
If I trigger separated the build, subsequent changes to form bundle do not trigger dev-server "watch".
:(
from webpack-dev-server.
In webpack config:
{ ... devServer: { // https://webpack.js.org/configuration/dev-server/#devserverwritetodisk- writeToDisk: true, }, }
Hello friends,
I've been dealing with the problem for several weeks and look in vain for a sensible solution.
The one with the "writeToDisk: true" definitely doesn't work.
No matter what I did and how I tried every possible start, I could not write the "css" for the style on the disc.
Furthermore, the webpack-dev-server does not work at all with a multi-config. Here comes the mistake:
I don't understand why the "CSS" files are written into the memory. The developer must have really burned his brain. If you search the internet for this problem, you will find millions of complaints where people are looking for a solution. One should make the decision easy for a user.
Oh yes, why only "index.html" works here and not, for example: "index.php" is also questionable.
I urgently ask for help!
I thank you in advance.
from webpack-dev-server.
Related Issues (20)
- Jg
- Why writeToDisk cannot work in webpack-dev-server 3.1.9 HOT 1
- Overlay.runtimeErrors doesn't work HOT 1
- Deep unmet peerDependency warnings from `memfs` HOT 4
- 5.0 dev server requires 'unsafe-eval' script-src in CSP HOT 3
- Types in lib/Server referring to non-existing Request_1 and Response_1 interfaces HOT 1
- Webpack dev server HRM not update vuejs file after compile error HOT 3
- After the latest webpack-dev-server upgrade, not able to start the server HOT 3
- devServer.static can't be an array. HOT 2
- devServer proxy config outputs deprecation warning in http-proxy-middleware
- Error while running example general/config-array HOT 1
- Invalid options object: options has an unknown property 'running' (webpack-cli v4.10.0) HOT 1
- Consider editing repository setings to remove "Packages" section HOT 1
- Configuring dist/main.js to be included when dev server starts HOT 3
- Types of version 5.0.0 still allow `proxy` to be an object
- The server log is being spammed HOT 2
- K
- The memory usage during project runtime after upgrade is very high HOT 2
- Additional Assets emitted via `processAssets` hook do not invalidate the build
- Web Dev Server Inaccessible from Local Network Devices Despite Correct Configuration HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack-dev-server.