Webpack Dev Server
| Do the following to reproduce: |
| 1. yarn |
| 2. node echo-server.js |
| 3. yarn start (in other shell) |
| 4. open Chrome and goto localhost:3000 |
| 5. open Chrome dev tools and issue multiple of the following requests in the console: fetch('/post', { method: 'POST', body: 'test'}) |
| 6. observe that every second request is a few hundred ms longer than every other |
| Note that this does not happen in Microsoft Edge and this does not happen if not proxying through webpack-dev-server. |
| constwebpack=require('webpack'); |
| constWebpackDevServer=require('webpack-dev-server'); |
| constconfig=require('./webpack.config'); |
| constserver=newWebpackDevServer(webpack(config),{ |
| publicPath: config.output.publicPath, |
| contentBase: './', |
| proxy: { |
| '/post': { |
| target: 'http://localhost:3001', |
| logLevel: 'debug', |
| } |
| } |
| }); |
| server.listen(3000,'localhost',(err)=>{ |
| if(err){ |
| returnconsole.log(err); |
| } |
| console.log('Listening at http://localhost:3000/'); |
| }); |
| varhttp=require('http'); |
| http.createServer(function(request,response){ |
| response.writeHead(200); |
| request.pipe(response); |
| }).listen(3001); |
| { |
| 'name': 'test-webpack-dev-server', |
| 'version': '1.0.0', |
| 'description': '...', |
| 'main': 'test.html', |
| 'license': 'MIT', |
| 'scripts': { |
| 'start': 'node dev-server.js' |
| }, |
| 'dependencies': {}, |
| 'devDependencies': { |
| 'webpack': '^4.29.6', |
| 'webpack-dev-server': '^3.3.1' |
| } |
| } |
- I like to have a single command to run as for development servers, ideally both rails server and./bin/webpack-dev-server would be launched in parallel. It seems the easiest and modern way to do so nowadays is to use a Procfile.dev and overmind.
- Webpack-dev-server # webpack-dev-server (WDS) is the officially maintained development server running in-memory, meaning the bundle contents aren't written out to files but stored in memory. The distinction is vital when trying to debug code and styles.
Table of Contents Ading Webpack-dev-serverSet up Webpack to monitor your project’s folder for changes and rebuild the bundle.Adding Hot Module Replacement plug-in. Ading Webpack-dev-server what is webpack–dev–server? Like it was said “The webpack–dev–server is a little Node.js Express server, which uses the webpack–dev-middleware to serve a webpack bundle. It also has a little. In your case, the script webpack-dev-server is already installed somewhere inside./nodemodules directory, but system does not know how to access it. So, to access the command webpack-dev-server, you need to install the script in global scope as well. $ npm install webpack-dev-server -g Here.
| constpath=require('path'); |
| module.exports={ |
| mode: 'development', |
| entry: './test.js', |
| output: { |
| path: path.resolve('output'), |
| filename: 'main.bundle.js' |
| }, |
| resolve: { |
| extensions: ['.ts','.tsx','.js','.json','.css'], |
| modules: [path.resolve('node_modules')] |
| }, |
| }; |
TIL how to configure webpack-dev-server (WDS) to both serve files from the publicPath and proxy APIs on different domains to avoid cross site request warnings in the browser.
This post will focus on setting up WDS and some of the configuration options I wound up using.
WDS works by holding your bundled files in memory on the dev server. This allows for the quick diffing and serving of changes to application assets as they change during development. WDS “stores” these files at the output.publicPath.
Webpack Dev Server Port Auto Change
The following gist contains the webpack config I will reference throughout this post. NOTE: I am using webpack 2 so the config might look slightly different if you’re used to webpack 1 config:
The devServer.contentBase Option
Yet another path related configuration option… what makes this one different from path and publicPath (which were covered in my last blog post)?
Per the documentation, the devServer.contentBase option tells the dev server where content should be served from. In other words, if there are any files that the devServer should reference from disk (like other generated code as part of your build steps) it should be located at the contentBase.
contentBase can be an array, so there can be multiple locations in your file system that make up the devServer’s contentBase if necessary.
In my case, I used contentBase to point my devServer to some static locale files that were generated during a build step for our app. Unlike the bundled files served from publicPath, the locale files served from contentBase do not change during development, and therefore do not need to be held in memory on the dev server. They can be referenced directly from disk at the contentBase.
A pro-tip I learned: if there aren’t any HTML files configured to be served from / on the devServer, if you access the base path directly you can see the files currently being stored at contentBase. If you want to see files being reference at publicPath (in other words, files held in memory on the dev server and not written to disk), navigate to /webpack-dev-server!
Also, a word of warning: It appears that if a file with the same path && name exists at both the contentBase and the publicPath, that the contentBase version will be preferentially served by the devServer. I discovered this when I had an old bundle.min.js at the contentBase while I was debugging my configuration, and changed the publicPath to be the same as my contentBase. Changes that I made to files in my bundle were not being reflected in the browser, even through a hard refresh of the page.
The devServer.proxy option
The whole reason I started this re-tooling process was to get to WDS proxies… the moment is finally here!
Webpack Dev Server Change Port
The proxy option allows you to specify a path that, when a request is made to WDS with that path, the server will forward the request to the target in the configuration.
So from my configuration example above: my devServer.proxy object contains a key '/api2', which itself contains a target mapping of https://new-api-domain.com. My dev server is configured to run at https://localhost:8445 NOTE: the devServer.https option is set to true in my configuration above, so my devServer will use a self-signed certificate to feign an https connection (you can also provide your own if needed).
Any requests made to https://localhost:8445/api2 will be proxied to https://new-api-domain.com/api2, which allows me to send requests to the domain where my app originated and get data from a different one. Pretty nifty!
You might also be asking yourself: what if my other domain doesn’t have a route of /api2? Well you’re in luck, because WDS allows you to pass a pathRewrite option to your proxy mapping, in which you can pass a regex to match on the mapped path and change it to a different one that makes sense for your new domain (see configuration above).
One final trick that proxy does, is it can proxy requests to https domains that have broken certificates! Just set the secure option to false, and your requests will resolve with no problem.
This wasn’t the end of my webpack learnings: I also worked on loader and plugin configuration to transpile our .jsx files to ES5 and extract our CSS from the main webpack bundles into their own files to reduce the main bundle size.