Running webpack-dev-server gives a blank page on iOS 10.3.

[ryanjaeb]

I think this is likely related to an existing webpack issue.

Would it be possible for this template to be updated to show how to work around that issue? After working through the introduction of the getting started guide, this template seemed like a good reference for a minimal webpack setup, but it doesn't work out of the box. I'll show what I did step-by-step. Hopefully it helps illustrate how it makes things confusing for someone that's trying to learn.

Initialize this template. Use the default answers for all prompts.

npm install -g vue-cli
vue init webpack-simple webpack-simple-1
cd webpack-simple-1
npm install

Run webpack-dev-server. Make sure it binds to all interfaces (--host 0.0.0.0).

./node_modules/.bin/webpack-dev-server --host 0.0.0.0

Now access the site from an iOS device. I get a blank page. There aren't any errors. Build the site with webpack.

npm run build

Run it with NGINX. The following command is assuming the use of PowerShell on Windows 10 with Docker for Windows. Using . instead of ${PWD} should work on Linux.

docker run -it --rm -p 8080:80 -v ${PWD}:/usr/share/nginx/html:ro nginx:alpine

Now access the site from an iOS device. It works for me. This is where I started to get confused. Please keep in mind I'm just starting to learn, so a large part of the problem for me is thinking I've misunderstood how something works or assuming I've done something wrong. The next paragraph is not intended to be correct. It's intended to show my thought process as a beginner.

The only difference I can see between the first attempt and the second is that ENV is set to production when running npm run build. The obvious difference I can see in the production config is the use of UglifyJS. That makes me think UglifyJS might be doing something I don't understand yet, but it doesn't make sense to have differences that impact (runtime) behavior depending on whether or not I'm building for development or production. Regardless, I spent time thinking I needed to add transpiling or polyfilling or something else I don't understand well enough yet.

I finally realized it might not be me misunderstanding or making a mistake when I tried to run the webpack-dev-server with the ENV set to production.

.\node_modules\.bin\cross-env NODE_ENV=production webpack-dev-server --host 0.0.0.0

That gives an error when the site is accessed.

ERROR in build.js from UglifyJs
Unexpected token: name (urlParts) [(webpack)-dev-server/client?http:/0.0.0.0:8081:24,0][build.js:325,4]

Googling for that error gets me to the webpack issue I linked. I downgrade to webpack-dev-server version 2.7.1.

npm uninstall webpack-dev-server
npm install -D [email protected]

And try again.

./node_modules/.bin/webpack-dev-server --host 0.0.0.0

Now the template works as expected. Downgrading webpack-dev-server isn't a good long term solution and having a noticeable difference between development and production environments isn't tolerable IMO, so I think it would be useful if this template could demonstrate a better alternative.

[chasebank]

My issue outlined here appears to be related.

I was not encountering any problems in iOS 10, but 8 and 9 both render a blank page as described.

Testing these in browserstack.com, I did get a console error. As far as I can tell, Browserstack devtools console needs to be open on load, or it won't show errors. After a refresh though, I get

SyntaxError: Unexpected keyword 'const'. Const declarations are not supported in strict mode.

A lot of my research trying to debug that error was showing Typescript related stuff, which seemed weird to me. Also a lot of suggestions to update Node also, which I did to no effect.

Downgrading webpack-dev-server did the trick though!

[LinusBorg]

With version 2.8.0, the client that the dev-server injects into the client-side bundle contains ES6 code:

https://github.com/webpack/webpack-dev-server/blob/a968d706e347c4ec76dc82ad6be17153b3822342/client/index.js

and that code does not get transpiled because we don't transpile anything from /node_modules.

A solution would probably be do include a path to webpack-dev-server:

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          __dirname + 'src',
         /node_modules\/webpack-dev-server\/client/
       ]
      },

[ryanjaeb]

Thanks for that link. I didn't have a proper understanding of how things work. My comment about there being an intolerable difference between development and production environments was misguided. I thought my code was getting bundled differently depending on the environment.

I don't see a great way to make things work by default for this use case, so it might be better to leave the template as is with a warning or hint for users that might try to connect with old browsers. IMHO there are at least two decent options:

transpile

Use the solution suggested above, but replace the regex with path.resolve so it works on both Linux and Windows.

{
  test: /\.js$/,
  loader: 'babel-loader',
  include: [
    __dirname + 'src',
    path.resolve(__dirname, 'node_modules/webpack-dev-server/client')
  ]
},

However, since webpack-dev-server binds to localhost by default, I don't think there's much being gained without binding to 0.0.0.0 and that breaks the --open functionality.

webpack --watch

Since development on a desktop PC with a modern browser is the most common case, I don't personally have a problem with using an alternate server to connect with browsers that don't support ES6, especially since Docker makes it trivial.

Linux

I like to run the processes in the foreground so I can see stdout, so, from the project directory in one terminal:

./node_modules/.bin/webpack --watch

Then from the project directory in another terminal:

sudo docker run -it --rm -p 8081:80 -v ${PWD}:/usr/share/nginx/html:ro nginx:alpine

Windows

.\node_modules\.bin\webpack --watch

docker run -it --rm -p 8081:80 -v ${PWD}:/usr/share/nginx/html:ro nginx:alpine