laravel5.5下 npm run hot 的使用

开篇常规絮絮叨叨

断断续续在琢磨hot模式的开发,持续了挺长时间,均不成功。
github上有人说有laravel-mix有bug,需要修改。勉强运行起来后发现vue页面懒加载的时候不成功,遂放弃。
最近又开始琢磨。
目前看来应该是运行起来了,所以做下记录,试用后再有问题再来补充。

环境

OS win10
laravel 5.5
laravel-mix 1.7.2

配置

参考在这里

//webpack.mix.js
//需要在webpack.mix.js中加入以下代码
Mix.listen('configReady', (webpackConfig) => {
        if (Mix.isUsing('hmr')) {
            // Remove leading '/' from entry keys
            webpackConfig.entry = Object.keys(webpackConfig.entry).reduce((entries, entry) => {
                entries[entry.replace(/^\//, '')] = webpackConfig.entry[entry];
                return entries;
            }, {});

            // Remove leading '/' from ExtractTextPlugin instances
            webpackConfig.plugins.forEach((plugin) => {
                if (plugin.constructor.name === 'ExtractTextPlugin') {
                    plugin.filename = plugin.filename.replace(/^\//, '');
                }
            });
        }
    });

此时,报错:Invalid Host/Origin header
需在配置文件中继续加入:【或根据github laravel-mix的issues里其他大牛提供的方法做些尝试】

//webpack.mix.js
mix.webpackConfig({
    devServer:{
        disableHostCheck: true,
    }
});

后来发现的问题

项目vue文件做了懒加载,修改懒加载文件的时候没有问题,但是修改主/入口页面的时候,hot会挂掉,所以还需要:

//这里是报错
...binding.open(pathModule._makeLong(path), stringToFlags(flags), mode) ...

//修改
if(mix.inProduction()){
    mix.version();
}

hot模式下和version()不兼容,只能在prod的时候运行version()

此时就可以正常访问啦~

接着补充homestead下的使用

运行时静态资源默认指向localhost:8080,而localhost默认指向本机而非虚拟机,这里需要把host更换成自己的测试域名。
可以再webpack.mix.js中配置

if(Mix.isUsing('hmr')){
    mix.options({
        hmrOptions: {
            host: '自定义域名',
        },
    })
}

同时,由于虚拟机中需要通过poll的方式来监控文件变化,同时参考watch-poll的配置

if(Mix.isWatching()){ //hot、watch都是isWatching
    mix.webpackConfig({
        watchOptions:{
            ignored : /node_modules/,
            poll : 1000
        },
    })
}

发表评论

电子邮件地址不会被公开。 必填项已用*标注