webpack-dev-server 使用 hash

最新推荐文章于 2022-08-29 17:59:53 发布

雾里看花叹朦胧

最新推荐文章于 2022-08-29 17:59:53 发布

阅读量1k

点赞数

分类专栏： webpack 文章标签： webpack devserver hash

本文链接：https://blog.csdn.net/hsl0530hsl/article/details/78474026

版权

webpack 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

步骤如下：

注意：这里只列出差异的地方，全部配置请参照另一篇文章
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 脚本，就可以在页面上查看具体的效果。

这里写图片描述

雾里看花叹朦胧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack-dev-server 使用 hash

在 webpack-dev-server 中使用 hash 需要借助 html-webpack-plugin 工具。步骤如下：注意：这里只列出差异的地方，全部配置请参照另一篇文章 http://blog.csdn.net/hsl0530hsl/article/details/78419693首先，在项目的根目录下，新建一个 temp html 文件，之前的 index.html 可以删
复制链接

扫一扫