Switch to webpack-dev-server (close #964) by LinusBorg · Pull Request #975 · vuejs-templates/webpack

LinusBorg · 2017-10-11T22:03:56Z

Why?

The reasons for this change are laid out in #964

What changed?

/config/dev-server.js and /config/dev-client.js are gone
webpack.dev.conf.js now returns a promise. This was necessary to keep the recently added portfinder feature working without writing a new dev-server.js file that wraps webpack-dev-server
That file now also has all the webpack-dev-server configuration, but most of the usually used options can be configured from /config/index.js
/test/e2e/runner.js was changed quite a bit to make it work with webpack-dev-server, but it works just fine.

What was added?

This PR also has a few goodies, all otpional changes are reachable through /config/index.js

The host&port are now shown in the console after each build with a nice message
build progress is shown in the console during each build in development (already worked in npm run build).
You can now optionally receive a notification from your OS when the build fails, this can be activated with the notifyOnErrors option:
You can deactivate eslint-loader. This is useful if you already have eslint support in your editor/IDE and don't want the warnings /errors shown by webpack
If you do use eslint-loader, it usually shows its errors in the error overlay in the browser and halts the build. You can now opt out of this, so eslint errors & warnings are only shown in the console.
General restructuring of /config/index.js:
- moving all dev options to the top since these are the ones you use first/more often
- added more comments and links to relevant webpack docs where I deemed it useful.
- and tried to group the options into more logical blocks

Testing this PR

@vuejs-templates/collaborators and anyone interested: Please take this for a test-ride with:

vue init webpack#feature/webpack-dev-server(#964)

Edit: Appearantly the branch name breaks vue-cli, so you will have to check out the branch locally and then run vue init . nameForTestDirectory to test it

And report any and all problems in this PR thread. Thanks!

yyx990803 · 2017-10-11T22:09:29Z

Looks good to me on first glance - good to merge with one additional person testing it locally to make sure it works as intended.

grakic · 2017-10-12T17:07:48Z

Package "node-notifier" is missing in the list of dependencies in generated packages.json and it is now used in utils.js

LinusBorg · 2017-10-12T17:10:31Z

Thanks. Weird, no idea how that got lost but it's easy to fix :)

LinusBorg · 2017-10-13T08:12:23Z

@grakic I just checked, it's not missing?

But anyway, I realized that I fixed a specific version which is not necessary, so I will push a small fix.

posva · 2017-10-13T08:54:39Z

template/build/utils.js

+    if (severity !== 'error') {
+      return
+    }
+    console.log('it should notify!!')


I think you forgot to remove this log 🙂

posva · 2017-10-13T08:56:29Z

template/package.json

    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^2.0.2",
    "mocha": "^3.2.0",
+    "node-notifier": "^5.1.2",


You should move this line outside of unit so it always gets installed

Oh, right. thanks!

This file is not transpiled, so we should stick to ES5

posva · 2017-10-22T16:35:50Z

template/package.json

  "private": true,
  "scripts": {
-    "dev": "node build/dev-server.js",
+    "dev": "webpack-dev-server --inline --hot --progress --config build/webpack.dev.conf.js",


We need to remove line 38 and 39 from build/webpack.dev.conf.js

// https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(),

The --hot is the only one needed

nelsonjchen · 2017-10-23T23:43:42Z

template/build/webpack.dev.conf.js

+      // Add FriendlyErrorsPlugin
+      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
+        compilationSuccessInfo: {
+          messages: [`You application is running here http://${config.dev.host}:${port}`],


s/You/Your/

…ules.

…e webpack config. Reasoning: thosen file imports are not configuration, so they don't belong inside of config/index.js

posva

💯

Tirke · 2017-11-09T20:53:11Z

I don't know what is going on, but I wanted to try the dev branch with the switch to webpack-dev-server and I had an issue right out of the box. npm run dev was complaining about a missing dependency :

These dependencies were not found:

* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!postcss-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0&bustCache!./App.vue in ./src/App.vue
* !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!postcss-loader!../../node_modules/vue-loader/lib/selector?type=styles&index=0&bustCache!./HelloWorld.vue in ./src/components/HelloWorld.vue

To install them, you can run: npm install --save !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!postcss-loader!../node_modules/vue-loader/lib/selector?type=styles&index=0&bustCache!./App.vue !!vue-style-loader!css-loader?{"minimize":false,"sourceMap":false}!../../node_modules/vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!postcss-loader!../../node_modules/vue-loader/lib/selector?type=styles&index=0&bustCache!./HelloWorld.vue

I added postcss-loader because it's not in package.json : npm install postcss-loader --save-dev

After that the dev server is up and running but with annoying warnings :

PostCSS Loader

Previous source map found, but options.sourceMap isn't set.
In this case the loader will discard the source map entirely for performance reasons.
See https://github.com/postcss/postcss-loader#sourcemap for more

Maybe I wasn't suppose to add postcss-loader ?

LinusBorg · 2017-11-10T06:43:12Z

Hey, thanks for reporting. That may very well. Be the case, it's the dev branch. Some PRe that I merged probably need some refinement, I plan to look into this at the weekend

LinusBorg · 2017-11-10T08:47:11Z

@Tirke postcss-loader was just added via #1038 and I opened a small PR to fix the sourcemap situation #1039

I can't test the PR right now, but you might take it for a spin if you want to :)

Frondor · 2017-11-14T18:31:55Z

To be honest, this is quite annoying:

It messes up my own debugging workflow with logs. Is there any way to disable those messages? @LinusBorg

LinusBorg · 2017-11-14T19:00:17Z

I think clientLogLevel should be the setting you are looking for.

I probably should set this to something more reasonable, thanks for the pointer.

Frondor · 2017-11-14T19:09:18Z

Switched it to "error" and worked just fine!

…ates#975) * Finished testable version. * close vuejs-templates#960 * fix node-notifier version * remove console.log * moved general dependency out of unit test-only dependency block. * fix typo * ignore /test folder * make HMR work correctly. * improve console messages for HMR - now show filenames of replaced modules. * fix typo in eslint-loader config * move imports for the env files from /config/index.js directly into the webpack config. Reasoning: thosen file imports are not configuration, so they don't belong inside of config/index.js * fix wrong overlay config

See vuejs-templates/webpack#975

LinusBorg added 2 commits October 11, 2017 23:45

Finished testable version.

3183cd5

close #960

7a6c554

fix node-notifier version

dfbc195

LinusBorg added intend to implement PR:Review required labels Oct 13, 2017

posva reviewed Oct 13, 2017

View reviewed changes

LinusBorg added 2 commits October 13, 2017 12:02

remove console.log

6800a9d

moved general dependency out of unit test-only dependency block.

fb89911

LinusBorg referenced this pull request Oct 13, 2017

fix Es6 code issue.

9937176

This file is not transpiled, so we should stick to ES5

LinusBorg self-assigned this Oct 16, 2017

This was referenced Oct 16, 2017

Rewrite vue-loader configs #989

Open

Make eslint errors in overlay optional #960

Closed

Running build configuration from parent folder? #919

Closed

posva suggested changes Oct 22, 2017

View reviewed changes

nelsonjchen reviewed Oct 23, 2017

View reviewed changes

LinusBorg added this to the 1.2.0 milestone Nov 1, 2017

LinusBorg mentioned this pull request Nov 1, 2017

Avoid no default ip error #809

Closed

LinusBorg added 4 commits November 1, 2017 16:16

fix typo

e0e884f

ignore /test folder

9891c86

make HMR work correctly.

afe56e6

improve console messages for HMR - now show filenames of replaced mod…

302e841

…ules.

LinusBorg added 3 commits November 1, 2017 17:00

fix typo in eslint-loader config

11122cb

move imports for the env files from /config/index.js directly into th…

505446d

…e webpack config. Reasoning: thosen file imports are not configuration, so they don't belong inside of config/index.js

Merge branch 'develop' into feature/webpack-dev-server(#964)

6d943ac

fix wrong overlay config

430406e

posva approved these changes Nov 1, 2017

View reviewed changes

LinusBorg mentioned this pull request Nov 8, 2017

fix for (#546) Make public path the app's context #1032

Closed

LinusBorg merged commit aba0f9c into develop Nov 8, 2017

LinusBorg mentioned this pull request Nov 9, 2017

How can I submit an improvement for build/dev-server.js? #1037

Closed

LinusBorg mentioned this pull request Nov 14, 2017

Set clientLogLevel to a more reasonable setting #1063

Closed

bauer01 mentioned this pull request Nov 16, 2017

WebpackOptionsValidationError: configuration misses the property 'entry' Tarrask/sails-generate-new-webpack-vue#6

Open

qkdreyer mentioned this pull request Nov 26, 2017

Switch to webpack-dev-server vuejs-templates/pwa#118

Open

LinusBorg deleted the feature/webpack-dev-server(#964) branch December 12, 2017 15:18

PanJiaChen mentioned this pull request Dec 15, 2017

refactor[core]: use webpack-dev-server now PanJiaChen/vue-element-admin#355

Merged

NicoCevallos mentioned this pull request Jan 13, 2018

Merge from vuejs-templates/webpack#develop preserving PWA configuration vuejs-templates/pwa#150

Closed

mednabouli pushed a commit to mednabouli/v-chacheli that referenced this pull request May 20, 2018

Switch to webpack-dev-server

0b49f91

See vuejs-templates/webpack#975

Conversation

LinusBorg commented Oct 11, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why?

What changed?

What was added?

Testing this PR

Uh oh!

yyx990803 commented Oct 11, 2017

Uh oh!

grakic commented Oct 12, 2017

Uh oh!

LinusBorg commented Oct 12, 2017

Uh oh!

LinusBorg commented Oct 13, 2017

Uh oh!

posva Oct 13, 2017

Choose a reason for hiding this comment

Uh oh!

LinusBorg Oct 13, 2017

Choose a reason for hiding this comment

Uh oh!

posva Oct 13, 2017

Choose a reason for hiding this comment

Uh oh!

LinusBorg Oct 13, 2017

Choose a reason for hiding this comment

Uh oh!

posva Oct 22, 2017

Choose a reason for hiding this comment

Uh oh!

nelsonjchen Oct 23, 2017

Choose a reason for hiding this comment

Uh oh!

posva left a comment

Choose a reason for hiding this comment

Uh oh!

Tirke commented Nov 9, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LinusBorg commented Nov 10, 2017

Uh oh!

LinusBorg commented Nov 10, 2017

Uh oh!

Frondor commented Nov 14, 2017

Uh oh!

LinusBorg commented Nov 14, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Frondor commented Nov 14, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

LinusBorg commented Oct 11, 2017 •

edited

Loading

Tirke commented Nov 9, 2017 •

edited

Loading

LinusBorg commented Nov 14, 2017 •

edited

Loading