CODEWITHSUNDEEP
webpackproduction
DaffyDuck
DaffyDuck

Reputation: 192

Webpack 5 production mode result in a broken app

I have 2 modes:

  1. Development mode -> code works!
  2. Production mode -> code's broken.

The common code

var HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require("path");
module.exports = {
  entry: "./src/index.js",
  plugins: [new CleanWebpackPlugin(), new HtmlWebpackPlugin({
    template: "./src/template.html"
  })],
  module: {
    rules: [
      {
        test: /\.s?css$/i,
        use: [
          "style-loader", // Inject styles into DOM
          "css-loader", // Turns css into commonJS
          "sass-loader" // Turns sass into css
        ],
      }
    ]
  }
};

The production code

const path = require("path");
const common = require("./webpack.common");
const { merge } = require('webpack-merge');

module.exports = merge(common, {
  mode: "production",
  output: {
    filename: "main.[contenthash].js",
    path: path.resolve(__dirname, "dist")
  },
});

The console log error:

knockout-min.js:79 Uncaught ReferenceError: Unable to process binding "if: function(){return displayMessage }"
Message: Unable to process binding "event: function(){return { mouseenter:$parent.enableMarker,mouseleave:$parent.disableMarker,click:$parent.hoverClick} }"
Message: $parent is not defined
    at event (eval at parseBindingsString (knockout-min.js:74), <anonymous>:3:78)
    at e (knockout-min.js:75)
    at knockout-min.js:77
    at init (knockout-min.js:99)
    at knockout-min.js:79
    at Object.K (knockout-min.js:41)
    at knockout-min.js:79
    at Object.C (knockout-min.js:11)
    at q (knockout-min.js:78)
    at l (knockout-min.js:76)

All of the libraries are loaded externally from cdns.

Upvotes: 3

Views: 962

Answers (1)

DaffyDuck
DaffyDuck

Reputation: 192

I got it to work by adding minify: false, to HtmlWebpackPlugin. A solution with keeping production in minify will be great.

  plugins: [new CleanWebpackPlugin(), new HtmlWebpackPlugin({
    template: "./src/template.html",
    minify: false,
  })],

Upvotes: 3

Related Questions