HMR Webpack/Laravel Mix/AdonisJS
HMR with Webpack/Laravel Mix/AdonisJS
我很难让 Webpack 的热模块替换 (HMR) 为我的应用程序堆栈工作,即:
- Adonisjs v4.0.28
- Laravel Mix v2.1.11
- Webpack v3.11.0
- Vue v2.5.16
前端应用程序资产全部从 webpack-dev-server 加载,而不是像这样从 Adonis 的应用程序服务器加载:
<script src="http://localhost:8080/js/manifest.js" />
<script src="http://localhost:8080/js/vendor.js" />
<script src="http://localhost:8080/js/app.js" />
我的应用程序加载并成功执行,当 运行 webpack-dev-server 和我进行源更改时,它通过添加 "hot-update" 正确更新 mix-manifest.json 文件可通过其 URL 访问的所有文件。
{
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css",
"/js/vendor.js": "/js/vendor.js",
"/js/manifest.js": "/js/manifest.js",
"/0.e28262e7e8d825cfaa1a.hot-update.js": "/0.e28262e7e8d825cfaa1a.hot-update.js",
"/0.1a35d37d2386038f6c78.hot-update.js": "/0.1a35d37d2386038f6c78.hot-update.js"
}
我不确定如何进一步排除故障或我做错了什么才能使 HMR 正常工作。
配置
npm 脚本:
node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --config=node_modules/laravel-mix/setup/webpack.config.js
webpack.mix.js:
const Env = require('@adonisjs/framework/src/Env');
const mix = require('laravel-mix');
const webpack = require('webpack');
const env = new Env(__dirname);
const appUrl = JSON.stringify(env.get('APP_URL'));
mix.webpackConfig({
plugins: [
new webpack.DefinePlugin({ APP_URL: appUrl }),
],
devServer: {
inline: true,
quiet: false,
},
});
mix
.setPublicPath('public')
.js('resources/assets/js/app.js', 'public/js')
.extract(['vue', 'vue-router', 'axios'])
.sass('resources/assets/sass/app.scss', 'public/css')
.sourceMaps()
.disableNotifications();
由 Laravel Mix:
生成的完整 Webpack 配置
https://gist.github.com/jarodhayes/3e2accb996f6884321671bcd4cc2b690
这似乎是 Laravel Mix v2 的问题。 laravel-mix 模块的以下代码更改为我修复了问题:
https://github.com/JeffreyWay/laravel-mix/issues/1437#issuecomment-365484126
我很难让 Webpack 的热模块替换 (HMR) 为我的应用程序堆栈工作,即:
- Adonisjs v4.0.28
- Laravel Mix v2.1.11
- Webpack v3.11.0
- Vue v2.5.16
前端应用程序资产全部从 webpack-dev-server 加载,而不是像这样从 Adonis 的应用程序服务器加载:
<script src="http://localhost:8080/js/manifest.js" />
<script src="http://localhost:8080/js/vendor.js" />
<script src="http://localhost:8080/js/app.js" />
我的应用程序加载并成功执行,当 运行 webpack-dev-server 和我进行源更改时,它通过添加 "hot-update" 正确更新 mix-manifest.json 文件可通过其 URL 访问的所有文件。
{
"/js/app.js": "/js/app.js",
"/css/app.css": "/css/app.css",
"/js/vendor.js": "/js/vendor.js",
"/js/manifest.js": "/js/manifest.js",
"/0.e28262e7e8d825cfaa1a.hot-update.js": "/0.e28262e7e8d825cfaa1a.hot-update.js",
"/0.1a35d37d2386038f6c78.hot-update.js": "/0.1a35d37d2386038f6c78.hot-update.js"
}
我不确定如何进一步排除故障或我做错了什么才能使 HMR 正常工作。
配置
npm 脚本:
node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node node_modules/webpack-dev-server/bin/webpack-dev-server.js --hot --config=node_modules/laravel-mix/setup/webpack.config.js
webpack.mix.js:
const Env = require('@adonisjs/framework/src/Env');
const mix = require('laravel-mix');
const webpack = require('webpack');
const env = new Env(__dirname);
const appUrl = JSON.stringify(env.get('APP_URL'));
mix.webpackConfig({
plugins: [
new webpack.DefinePlugin({ APP_URL: appUrl }),
],
devServer: {
inline: true,
quiet: false,
},
});
mix
.setPublicPath('public')
.js('resources/assets/js/app.js', 'public/js')
.extract(['vue', 'vue-router', 'axios'])
.sass('resources/assets/sass/app.scss', 'public/css')
.sourceMaps()
.disableNotifications();
由 Laravel Mix:
生成的完整 Webpack 配置https://gist.github.com/jarodhayes/3e2accb996f6884321671bcd4cc2b690
这似乎是 Laravel Mix v2 的问题。 laravel-mix 模块的以下代码更改为我修复了问题:
https://github.com/JeffreyWay/laravel-mix/issues/1437#issuecomment-365484126