webpack-dev-server 使用 hash

￡神魔★判官ぃ 2022-06-06 11:42 140阅读 0赞

在 webpack-dev-server 中使用 hash 需要借助 html-webpack-plugin 工具。

步骤如下：

> 注意：这里只列出差异的地方，全部配置请参照另一篇文章  
> [http://blog.csdn.net/hsl0530hsl/article/details/78419693][http_blog.csdn.net_hsl0530hsl_article_details_78419693]

首先，在项目的根目录下，新建一个 temp html 文件，之前的 index.html 可以删除了。

index.temp.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test webpack</title>
    </head>
    <body>
        <h3>This is my first test.</h3>
    </body>
    </html>

然后，在 package.json 中引入这个 plugin:

> “html-webpack-plugin”: “^2.30.1”

其次，修改 webpack 的配置文件：  
（主要是引入这个 Plugin，然后 new 出来）  
webpack.config.js

/** * Created by DreamCatcher on 2017/11/1. * 如果没有这个配置文件，需要使用如下命令手动打包：node_modules\.bin\webpack js\requireAddDiv1.js dist\bundle.js * 如果有这个配置文件，只需要使用如下命令就可以了：node_modules\.bin\webpack */
    var webpack = require("webpack");
    var HtmlWebpackPlugin = require("html-webpack-plugin");
    module.exports = {
        devtool: "eval-source-map",//生成Source Maps
        entry: "./js/requireAddDiv1.js",
        output: {
            path: __dirname + "/dist",
            filename: "bundle-[hash].js"
        },
        devServer: {
            contentBase: "./",//本地服务器所加载的页面所在的目录
            historyApiFallback: true,//不跳转
            inline: true,//实时刷新
            hot: true
        },
        module: {
            /*在webpack2.0版本已经将 module.loaders 改为 module.rules 为了兼容性考虑以前的声明方法任然可用， 　　　　　　同时链式loader(用!连接)只适用于module.loader， 　　　　　　同时-loader不可省略 　　　　　　*/
            /*loaders: [ { test: /(\.jsx|\.js)$/, loader: "babel-loader" }, { //test: /\.\/css\/*\.css$/,//这种方式精确定位 test: /\.css$/, loader: "style-loader!css-loader" } ],*/
            rules: [
                /*{ test: /(\.jsx|\.js)$/, use: { loader: "babel-loader" }, exclude: /node-modules/ //注意这里没有使用引号 },*/
                {
                    test: /\.css$/,
                    use: [ //引入多个loader的方法
                        "style-loader",
                        {
                            loader: "css-loader",
                            options: {
                                // modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules
                            }
                        },
                        /*{ loader: 'postcss-loader', // 在这里进行配置，也可以在postcss.config.js中进行配置，详情参考https://github.com/postcss/postcss-loader options: { plugins: function () { return [ require('autoprefixer') ]; } } }*/
                    ]
                }
            ]
        },
        plugins: [
            new webpack.BannerPlugin('版权所有，盗版必究！'),
            new HtmlWebpackPlugin({
                template: __dirname + "/index.temp.html"//new 一个这个插件的实例，并传入相关的参数
            })
        ]
    };

最后运行 package.json 中的 start 方法，可以在 output 目录中看到三个文件：  
boudle.js 和 index.html 以及一个带有 hash 值的 boudle.\[hash\].js

运行 package.json 中的 server 脚本，就可以在页面上查看具体的效果。

![这里写图片描述][SouthEast]

[http_blog.csdn.net_hsl0530hsl_article_details_78419693]: http://blog.csdn.net/hsl0530hsl/article/details/78419693
[SouthEast]: /images/20220606/59864a6d4ce14031b0d247a2304eb589.png