初始生产构建创建包代码，但所有后续构建都重用旧包

Question

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

起初我认为可能是 webpack 根本没有得到运行所以我在我的启动脚本中添加了一个特定的调用并将依赖项从 devDependencies 中移开。即使在我从服务器上看到 web pack 正在运行和构建之后，这最终也没有改变任何东西。下面是我在 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 文件。为此寻找长期解决方案。

Answer 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"
}

初始生产构建创建包代码，但所有后续构建都重用旧包

Initial production build creates bundle code, but all subsequent builds reuse old bundle

node.js

reactjs

webpack

sails.js

babeljs