Question

我正在尝试通过在每个javascript文件的末尾添加哈希来使用webpack进行缓存清除。我的webpack配置文件如下：

const AssetsPlugin = require('assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
//const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./js/main.js",
    output: {
        path: __dirname + '/static/',
        publicPath: '',
        filename: "bundle-[hash].js",
    },
    resolveLoader: {
    moduleExtensions: ['-loader']
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015', 'stage-0']
                }
            },
            {
                test: /\.css$/,
                loader: 'style-loader',
            },
            {
                test: /\.css$/,
                loader: 'css-loader',
                query: {
                    modules: true,
                    localIdentName: '[name]__[local]___[hash:base64:5]'
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['static/bundle*.js'], {watch: true}),
        new AssetsPlugin({
                filename: 'static/webpack.assets.json',
                prettyPrint: true
        }),
    ]
};

为webpack创建的javascript文件提供的index.html文件如下：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" >
            $.getJSON('webpack.assets.json', function(data){
                <!--
                var bundleScript = "<script src=" + data['main']['js'] + "></script>";
                var div = document.getElementById('app');
                div.innerHTML = bundleScript;
                $(bundleScript).appendTo('#app');
                //!-->
            });
        </script>
    </head>

    <body>
        <div id="app"></div>
    </body>
</html>

当我对代码进行更改时，我必须硬刷新浏览器才能看到更改，而不仅仅是简单的刷新，如果缓存清除工作，我会期望。任何帮助表示赞赏;谢谢！

Answer 1

Webpack缓存破坏仍然在这里工作。如果更改代码，webpack将使用不同的哈希值（https://webpack.js.org/guides/caching）

重新创建文件

您想要的是热重载。您可以在https://webpack.js.org/concepts/hot-module-replacement/

中详细了解相关信息

要使用热重新加载，您应该创建新配置：

const AssetsPlugin = require('assets-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
entry: "./js/main.js",
output: {
    path: __dirname + '/static/',
    publicPath: '',
    filename: "bundle.js", // remove hash
},
resolveLoader: {
moduleExtensions: ['-loader']
},
module: {
    loaders: [
        {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel',
            query: {
                presets: ['react', 'es2015', 'stage-0']
            }
        },
        {
            test: /\.css$/,
            loader: 'style-loader',
        },
        {
            test: /\.css$/,
            loader: 'css-loader',
            query: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]'
            }
        }
    ]
},
plugins: [
    // new CleanWebpackPlugin(['static/bundle*.js'], {watch: true}), comment it
    // new AssetsPlugin({
    //        filename: 'static/webpack.assets.json',
    //        prettyPrint: true
    // }), and this 
],
devServer: {
  contentBase: path.join(__dirname, "static"),
  compress: true,
  port: 9000
}
};

使用：webpack-dev-server -c 'your new config' --hot

运行

Answer 2

这是我的配置文件

中的示例

安装babel hmre插件

npm install --save-dev babel-preset-react-hmre


module.exports = {
  // entry and output options

  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel",
      include: __dirname,
      query: {
        presets: [ 'es2015', 'react', 'react-hmre' ]
      }
    }]
  }
}

并在package.json中编辑您的启动脚本以启用热选项：

"start": "webpack-dev-server --progress --inline --hot",

Answer 3

index.html仅向浏览器提供一次。在此html文件中编写的用于加载资源的代码也仅在浏览器中运行一次。在您的代码中进行更改后，webpack可以使用新的哈希名称创建新的捆绑包，但您的浏览器并不知道这一点，并且不会自行下载新的资产文件。这就是您的更改未在浏览器中反映的原因。缓存清除通常用于生成构建。对于开发环境，使用热模块重新加载。以下是hmr的示例。

webpack.config.dev.js

/**
 * Created by ishan.trivid on 28-06-2016.
 */
import webpack from "webpack";
import path from "path";

export default {
debug: true,
devtool: "cheap-module-eval-source-map",
noInfo: true,
entry: [
    "eventsource-polyfill", // necessary for hot reloading with IE
    "webpack-hot-middleware/client?reload=true", //note that it reloads the page if hot module reloading fails.
    "./src/index"
],
target: "web",
output: {
    path: __dirname + "/dist", // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: "/",
    filename: "bundle.js"
},
devServer: {
    contentBase: "./src"
},
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
],
module: {
    loaders: [
        {test: /\.js$/, include: path.join(__dirname, "src"), loaders: ["babel"]},
        {test: /(\.css)$/, loaders: ["style", "css"]},
        {test: /\.(png)$/, loader: "url-loader?limit=1000000"},
        {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},
        {test: /\.(woff|woff2)$/, loader: "url?prefix=font/&limit=5000"},
        {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
        {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml"}
    ]
}
};

srcServer.js

import express from "express";
import webpack from "webpack";
import path from "path";
import config from "./webpack.config.dev";
import open from "open";

const port = 3000;
const app = express();
const compiler = webpack(config);

app.use(require("webpack-dev-middleware")(compiler, {
    noInfo: true,
    publicPath: config.output.publicPath
}));

app.use(require("webpack-hot-middleware")(compiler));

app.get("*", function(req, res) {
    res.sendFile(path.join( __dirname, "../src/index.html"));
});

app.listen(port, function(err) {
    if (err) {
        console.log(err);
    } else {
        open(`http://localhost:${port}`);
    }
});

现在在package.json

的脚本部分添加以下命令

开始：＆＃34; babel-node srcServer.js＆＃34;

现在运行＆＃34; npm run start＆＃34;终端中的命令

Webpack缓存破坏哈希不起作用

3 个答案: