Example using webpack@4

jouni-kantola · Nov 27, 2019 · 8c53993 · 8c53993
1 parent cd1386c
commit 8c53993
Show file tree

Hide file tree

Showing 4 changed files with 2,491 additions and 1,325 deletions.
diff --git a/example/templated-assets-config.js b/example/templated-assets-config.js
@@ -3,7 +3,7 @@ const path = require("path");
 module.exports = {
   rules: [
     {
-      name: ["app"],
+      test: /app.*\.js$/,
       output: {
         defer: true
       }
@@ -19,7 +19,7 @@ module.exports = {
       }
     },
     {
-      test: /vendor.*\.js$/,
+      name: ["vendor"],
       // in supported version of Node.js use:
       // template: (asset, callback, ...args) => {
       template: function customSourceProcessor(asset, callback) {
@@ -35,25 +35,14 @@ module.exports = {
       args: ["templated", "assets", "webpack", "plugin"]
     },
     {
-      name: "manifest",
+      name: "runtime",
       output: {
         inline: true,
         path: path.join(__dirname, "dist/custom/"),
         emitAsset: false
       },
       template: path.join(__dirname, "tmpl/inline.tmpl"),
       replace: "##HULAHULA##"
-    },
-    {
-      test: /manifest.json$/,
-      template: path.join(__dirname, "tmpl/chunk-manifest.tmpl"),
-      replace: "##MANIFEST##",
-      output: {
-        name: "chunk-manifest",
-        extension: "cshtml",
-        prefix: "__",
-        inline: true
-      }
     }
   ]
 };
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -1,8 +1,7 @@
 const path = require("path");
 
 const webpack = require("webpack");
-const ChunkManifestPlugin = require("chunk-manifest-webpack-plugin");
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const TemplatedAssetWebpackPlugin = require("../");
 const templatedAssetsConfig = require("./templated-assets-config.js");
@@ -20,7 +19,25 @@ module.exports = {
   output: {
     path: path.join(__dirname, "dist"),
     publicPath: publicPath,
-    filename: "[name].[chunkhash].js"
+    filename: "[name].[contenthash].js"
+  },
+  optimization: {
+    runtimeChunk: "single",
+    splitChunks: {
+      cacheGroups: {
+        common: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendor",
+          chunks: "all"
+        },
+        styles: {
+          name: "styles",
+          test: /\.css$/,
+          chunks: "all",
+          enforce: true
+        }
+      }
+    }
   },
   module: {
     rules: [
@@ -33,27 +50,24 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: ExtractTextPlugin.extract({
-          use: "css-loader"
-        })
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader
+          },
+          "css-loader"
+        ]
       }
     ]
   },
   plugins: [
-    new webpack.optimize.CommonsChunkPlugin({
-      name: ["vendor", "manifest"],
-      minChunks: Infinity
-    }),
-    new webpack.HashedModuleIdsPlugin(),
-    new ChunkManifestPlugin(),
     new webpack.SourceMapDevToolPlugin({
       filename: "[file].map",
       exclude: ["manifest"],
       append: `\n//# sourceMappingURL=${publicPath}/[url]\n`
     }),
-    new ExtractTextPlugin({
-      filename: "styles.[contenthash].css",
-      allChunks: true
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+      ignoreOrder: false
     }),
     new TemplatedAssetWebpackPlugin(templatedAssetsConfig)
   ]

diff --git a/package.json b/package.json
@@ -12,25 +12,24 @@
     "ava": "^0.23.0",
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.2",
-    "babel-loader": "^6.4.1",
+    "babel-loader": "^7.1.5",
     "babel-plugin-dynamic-import-webpack": "^1.0.1",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-polyfill": "^6.23.0",
     "babel-preset-env": "^1.3.2",
-    "chunk-manifest-webpack-plugin": "^1.0.0",
-    "css-loader": "^0.28.7",
+    "css-loader": "^3.2.0",
     "escope": "^3.6.0",
     "eslint": "^4.11.0",
     "eslint-plugin-prettier": "^2.3.1",
-    "extract-text-webpack-plugin": "2.1.2",
+    "mini-css-extract-plugin": "^0.8.0",
     "husky": "^0.14.3",
     "is-thirteen": "^2.0.0",
     "lint-staged": "^4.3.0",
     "mock-fs": "^4.4.2",
     "nyc": "^11.3.0",
     "prettier": "^1.8.2",
-    "webpack": "^2.3.3",
-    "webpack-chunk-hash": "^0.4.0"
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10"
   },
   "repository": {
     "type": "git",