мой пакет не обновляется, всегда показывает старую версию сайта - PullRequest
Новая
       1

мой пакет не обновляется, всегда показывает старую версию сайта

0 голосов
/ 24 апреля 2019

Webpack не обновляет мой пакет, и я всегда получаю одну и ту же старую версию своего сайта при использовании npm run build.

Мой каталог:

---- MyProject
-------------- src
------------------ index.js
------------------ index.html
-------- webpack.config.js
-------- package.json

Я пыталсяпереустановка webpack, он помог один раз, но после не обновляется снова, независимо от того, сколько раз я переустановил его.

webpack.config.js 

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js",
    publicPath: "/"
  },


  devServer: {
    historyApiFallback:true
    },


  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ]
      },
      {
        test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[path][name]-[hash:8].[ext]"
            }
          }
        ]
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

package.json 

{
  "name": "webpack-babel-react-starter",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "7.2.2",
    "@babel/plugin-proposal-class-properties": "7.2.3",
    "@babel/plugin-transform-runtime": "7.2.0",
    "@babel/preset-env": "7.2.3",
    "@babel/preset-react": "7.0.0",
    "autoprefixer": "9.4.3",
    "babel-loader": "8.0.4",
    "css-loader": "2.1.0",
    "file-loader": "3.0.1",
    "html-webpack-plugin": "3.2.0",
    "mini-css-extract-plugin": "0.5.0",
    "node-sass": "4.11.0",
    "postcss-loader": "3.0.0",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.1",
    "webpack": "^4.30.0",
    "webpack-cli": "3.1.2",
    "webpack-dev-server": "^3.3.1"
  },
  "scripts": {
    "start": "node server.js --hot",
    "dev": "webpack-dev-server --mode production --hot",
    "build": "webpack --config webpack.config.js",
    "heroku-postbuild": "npm run build"
  },
  "dependencies": {
    "@babel/runtime": "7.2.0",
    "bootstrap": "^4.3.1",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.8",
    "react-bootstrap-webpack": "^1.0.4",
    "react-dom": "^16.8.6",
    "react-router": "^5.0.0",
    "react-router-dom": "^4.3.1",
    "react-router-transition": "^1.3.0"
  },
  "browserslist": [
    "> 0.2%",
    "last 15 versions",
    "not dead"
  ]
}

1 Ответ

0 голосов
/ 24 апреля 2019

Ваша проблема связана с тем, что браузер кэширует bundle.js в течение неопределенного периода времени.

Традиционный способ разработки - использование devserver, и сделанные изменения должны автоматически перезагружаться в зависимости от изменения содержимого исходных файлов.

Для производства вы захотите добавить contenthash к имени выходного файла, например, 

output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.[contenthash].js",
    publicPath: "/"
  }

Это приведет к тому, что файл будет иметь имя, похожее на bundle.3f2b48a634975adb9b7e.js, что снова предложит браузеру перезагрузить пакет при следующей загрузке веб-сайта, поскольку имя файла пакета не совпадает с именем кэшированного пакета.

Я рекомендую прочитать документацию по кэшированию в Webpack для получения более подробной информации

...