Webpack 5 生产模式导致应用程序损坏答案

【问题标题】：Webpack 5 production mode result in a broken appWebpack 5 生产模式导致应用程序损坏
【发布时间】：2020-12-19 17:27:49
【问题描述】：

我有两种模式：

开发模式 -> 代码有效！
生产模式 -> 代码损坏。

通用代码

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
        ],
      }
    ]
  }
};

生产代码

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")
  },
});

控制台日志错误：

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)

所有的库都是从 cdns 外部加载的。

【问题讨论】：

标签： webpack production

【解决方案1】：

我通过将 minify: false, 添加到 HtmlWebpackPlugin 使其工作。将生产保持在 minify 中的解决方案会很棒。

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

【讨论】：

非常感谢您。我有一个类似的问题，没有错误的生产构建，但代码没有进入主入口点。难倒了好几个小时。原来是这个选项。
必须为使用 html-loader (webpack.js.org/loaders/html-loader/#minimize) 加载的 HTML 禁用最小化，因为 Knockout cmets 已被删除。