账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack的HMR模式配置问题
    32
    0

    我在网上看说配置里
    hot: true,
    inline: true
    ,有这两个参数就表示HMR模块启用了,不用再 new webpack.HotModuleReplacementPlugin()配置插件了。
    但是控制台还是报错HMR。只好两个都用上才好。高手帮我看下是那个配置有问题吗。

    var path = require('path');
    var webpack=require('webpack');
    var node_modules = path.resolve(__dirname, 'node_modules');
    var HtmlwebpackPlugin = require('html-webpack-plugin');
    
    var ROOT_PATH = path.resolve(__dirname);
    var SRC_PATH = path.resolve(ROOT_PATH, 'build');
    var BUILD_PATH = path.resolve(ROOT_PATH, 'app');
    module.exports = {
        entry: [path.resolve(__dirname, './app/components/components.jsx')],
    
        output: {
            path: path.resolve(__dirname, './build'),
            filename: '[name][hash:5].js'
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)?$/,
                    exclude: [               //exclude表示的是不用匹配的文件夹
                        path.resolve(__dirname, "node_modules")
                    ],
                    use: [                      //use的值是一个数组,它里面存放了我们处理test匹配到的文件需要加载的loader和loader的配置
                        {
                            loader: "babel-loader"        //这个就是需要加载loader的名字
    
                        }
                    ]
                },
                { test: /\.css$/, loader: "style!css"},
    
                { test: /\.(png|jpg)$/, loader: 'url?limit=8192'}
            ]
        },
        // 开启dev source map
        devtool: 'eval-source-map',
        // 开启 webpack dev server
        devServer: {
            historyApiFallback: true,
            hot: true,
            inline: true
            //progress: true
        },
        // 配置plugin
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new HtmlwebpackPlugin({
                title: 'react-webpack-demo',
                filename: 'index.html',
                template: path.resolve(SRC_PATH,'index.html'),
                minify: {
                    removeComments: true,
                    collapseWhitespace: true,
                    removeRedundantAttributes: true,
                    removeScriptTypeAttributes: true,
                    removeStyleLinkTypeAttributes: true,
                    removeAttributeQuotes: true
                }
            })
        ]
    };
    

    刚开始看webpack,大家顺便帮我看看哪些配置还有问题。好多都是直接从网上扒的。

    https://segmentfault.com/q/10...

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 想你ⁿ次方 普通会员 1楼

      HMR(Hot Module Replacement)模式是webpack提供的一种热更新机制,它可以在开发者不重启整个服务器的情况下更新代码。但是,如果你在webpack配置文件中使用了HMR模式,可能会遇到一些问题。以下是一些可能的配置问题:

      1. 使用import和export导入和导出的语法错误:在使用HMR模式时,你需要在每个模块中导入和导出一个模块。如果这两个模块之间有冲突,那么在HMR模式下,webpack将无法正确地识别并加载这两个模块。你需要确保这两个模块之间没有冲突。

      2. 使用import和export的语法错误:在使用HMR模式时,你需要在每个模块中导入和导出一个模块。如果这两个模块之间有冲突,那么在HMR模式下,webpack将无法正确地识别并加载这两个模块。你需要确保这两个模块之间没有冲突。

      3. 在打包后的文件中找不到模块:如果你在打包后的文件中找不到对应的模块,那么在HMR模式下,webpack将无法正确地加载模块。你需要确保你的模块名称正确,并且在打包后的文件中正确地添加了这个模块。

      4. 使用import和export的语法错误:在使用HMR模式时,你需要在每个模块中导入和导出一个模块。如果这两个模块之间有冲突,那么在HMR模式下,webpack将无法正确地识别并加载这两个模块。你需要确保这两个模块之间没有冲突。

      解决这些问题的方法包括:

      1. 避免使用import和export导入和导出的语法错误。

      2. 使用ES6的import和export语法。

      3. 在打包后的文件中正确地查找和导入模块。

      4. 在打包后的文件中正确地添加模块。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部