Merge pull request #199 from sporto/webpack-5

Update for Webpack 5. Change compiler.options.watch to compiler.watching

Author: lukewestby

README.md

@@ -2,7 +2,7 @@
 
 [Webpack](https://webpack.js.org/) loader for the [Elm](http://elm-lang.org/) programming language.
 
-It is aware of Elm dependencies and tracks them. This means that in `--watch`
+It is aware of Elm dependencies and tracks them. This means that in watch
 mode, if you `require` an Elm module from a Webpack entry point, not only will
 that `.elm` file be watched for changes, but any other Elm modules it imports will
 be watched for changes as well.
@@ -227,6 +227,10 @@ in the example.
 
 ## Revisions
 
+### 7.0.2
+
+- Fix watching when using the dev server. Use `compiler.watching` instead of `compiler.options.watch` as the latter doesn't work with the dev server.
+
 ### 7.0.0
 
 - Logs build output directly to stdout to retain formatting.

example/elm.json

@@ -1,13 +1,13 @@
 {
     "version": "0.0.0",
     "type": "application",
-    "summary": "Example using webpack 4",
+    "summary": "Example using webpack 5",
     "repository": "https://github.com/elm-community/elm-webpack-loader.git",
     "license": "BSD-3-Clause",
     "source-directories": [
         "src"
     ],
-    "elm-version": "0.19.0",
+    "elm-version": "0.19.1",
     "dependencies": {
         "direct": {
             "elm/browser": "1.0.0",

example/package-lock.json

@@ -6,14 +6,15 @@
   "scripts": {
     "build": "webpack --mode production",
     "watch": "webpack --mode development --watch",
-    "dev": "webpack-dev-server --mode development --port 3000",
+    "dev": "webpack serve --mode development --port 3000",
     "errors": "webpack --mode development --display-error-details"
   },
-  "dependencies": {
+  "dependencies": {},
+  "devDependencies": {
     "file-loader": "1.1.10",
-    "loader-utils": "1.1.0",
-    "webpack": "4.0.1",
-    "webpack-cli": "2.0.9",
-    "webpack-dev-server": "3.9.0"
+    "loader-utils": "2.0.0",
+    "webpack": "^5.20.0",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "^3.11.0"
   }
 }

example/package.json

@@ -1,7 +1,7 @@
 module Main exposing (..)
 
-import Html exposing (text)
 import Hello.World exposing (hello)
+import Html exposing (text)
 
 
 main : Html.Html a

example/src/Main.elm

@@ -8,7 +8,7 @@ module.exports = {
     rules: [{
         test: /\.html$/,
         exclude: /node_modules/,
-        loader: 'file-loader?name=[name].[ext]'
+        loader: 'file-loader'
       },
       {
         test: /\.elm$/,
@@ -21,7 +21,8 @@ module.exports = {
   },
 
   devServer: {
-    inline: true,
+    contentBase: path.join(__dirname, "src"),
     stats: 'errors-only'
-  }
+  },
+
 };

example/webpack.config.js

@@ -97,10 +97,9 @@ module.exports = function() {
 
     var promises = [];
 
-
     // we only need to track deps if we are in watch mode
     // otherwise, we trust elm to do it's job
-    if (compiler.options.watch) {
+    if (compiler.watching) {
         // we can do a glob to track deps we care about if cwd is set
         if (typeof options.cwd !== "undefined" && options.cwd !== null){
             // watch elm.json

index.js

@@ -25,7 +25,7 @@
   },
   "homepage": "https://github.com/elm-community/elm-webpack-loader",
   "dependencies": {
-    "loader-utils": "^1.4.0",
+    "loader-utils": "^2.0.0",
     "node-elm-compiler": "^5.0.0"
   },
   "devDependencies": {