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

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

在我的项目中使用 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 文件。为此寻找长期解决方案。

您需要在重新捆绑新文件夹之前删除旧的构建文件夹。添加一个 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"
}