初始生产构建创建捆绑代码，但所有后续构建重用旧捆绑答案

【问题标题】：Initial production build creates bundle code, but all subsequent builds reuse old bundle初始生产构建创建捆绑代码，但所有后续构建重用旧捆绑
【发布时间】：2019-10-02 20:36:00
【问题描述】：

在我的项目中添加使用护照和 redux 的身份验证后，每当我将生产就绪代码推送到我的服务器时，它都会重用旧版本的捆绑文件。如果我使用具有更旧版本的项目的一次性服务器，它会创建一个新包，但任何后续推送都不会。

起初我认为可能是 webpack 根本没有运行，所以我在我的启动脚本中添加了一个特定的调用，并将依赖项从 devDependencies 中移开。即使在我从服务器上看到 webpack 正在运行和构建之后，这最终也没有改变任何东西。以下是我在 package.json 和 webpack.config 中设置的脚本。

//Package.json

"scripts": {
    "start": "npm-run-all --parallel build:prod lift",
    "dev": "webpack --mode development && sails lift",
    "start:debug": "npm-run-all --parallel open:client debug",
    "open:client": "webpack-dev-server --mode development --open",
    "build": "npm run build:prod",
    "build:dev": "webpack --mode development",
    "build:prod": "webpack --mode production"
}

//Webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: {
    entry: "./assets/src/index.js"
  },
  output: {
    path: __dirname + "/.tmp/public",
    filename: "bundle.js",
    publicPath: "/"
  },
  module: {
    rules: [
      {
        use: "babel-loader",
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        use: ["style-loader", "css-loader"],
        test: /\.css$/
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "assets/src/index.html"
    })
  ]
};

我知道我没有为生产 webpack 采用最佳实践，但现在我只想让它在我的服务器上运行。我的下一步是微调生产 webpack 以提供最小的捆绑文件，但现在我需要让 webpack 重新捆绑资产而不是使用旧文件。我是前端和后端 javascript 开发的新手，所以很多这对我来说都是新的，我最初只是尽快设置 webpack。

更新 - 已解决 看来我的问题是我的浏览器缓存了以前的 bundle.js 文件。寻找一个长期的解决方案。

【问题讨论】：

标签： node.js reactjs webpack sails.js babeljs

【解决方案1】：

您需要先删除旧的构建文件夹，然后才能重新捆绑新的构建文件夹。在打包之前添加一个prepare npm hook来执行脚本

"scripts": {
    "prepare": "rm -rf /.tmp/public",
    "start": "npm-run-all --parallel build:prod lift",
    "dev": "webpack --mode development && sails lift",
    "start:debug": "npm-run-all --parallel open:client debug",
    "open:client": "webpack-dev-server --mode development --open",
    "build": "npm run build:prod",
    "build:dev": "webpack --mode development",
    "build:prod": "webpack --mode production"
}

或

"scripts": {
    "clean": "rm -rf /.tmp/public",
    ...
    "build": "npm run clean && npm run build:prod",
    "build:dev": "webpack --mode development",
    "build:prod": "webpack --mode production"
}

【讨论】：