Laravel Mix 中文文档热模块替换
热模块替换
Laravel Mix 可为热模块更换提供无缝支持。
热模块替换（或热加载）不仅使您在更改 JavaScript 时自动刷新页面，还可以在浏览器中维护组件的当前状态。例如，一个简单的计数器组件，当你按下按钮的时候计数器增加。想象一下，当你多次点击这个按钮，然后去更改这个组件的文件，完成后，网页将自动刷新来响应您的更改，但是计数将不会改变，仍然是之前的数值。这就是热加载的魅力！
在 Laravel 里的用法
Laravel 和 Laravel-Mix 一起工作, 来抽象出热加载的复杂性。看一下 laravel 里的 package.json 文件，在 scripts 模块，你可以看到：
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --progress --hide-modules",
"watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules",
"hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot",
"production": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}注意一下 hot 选项，这个地方就是你所需要的，在命令行执行 npm run hot 会启动一个 Node 服务器并且监听你的 bundle 文件，接下来，在浏览器打开你的 Laravel 应用，一般应该是 http://my-app.test。
在 Laravel 应用里使用热加载很重要的一点是要保证所有的脚本资源引用的是前面启动的 Node 服务器的 url：http://localhost:8080 。
现在你可以手动更新你的 HTML\Blade 文件了:
<body>
<div id="app">...</div>
<script src="http://localhost:8080/js/bundle.js"></script>
</body>假设你有一些组件，尝试在浏览器里更改他们的状态，然后更新他们的模板文件，你可以看到浏览器会立刻反应出你的更新，但是状态并没有被改变。
然而手动去改 URL 是一种负担。因此 Laravel 提供了 mix() 函数，他将动态的构建你的脚本和样式并导入到代码中显示。因此上面的代码可以更改为：
<body>
<div id="app"></div>
<script src="{{ mix('js/bundle.js') }}"></script>
</body>通过这个更改，Laravel 将自动帮你完成之前的工作。如果你运行 npm run hot 命令来启动热加载，那么该方法需要设置 http://localhost:8080 为基础 URL。相反，如果你使用 npm run dev 或 npm run production，那么将使用你的域名作为基础 URL。
HTTPS上的用处
如果你用 HTTPS 连接开发你的 APP，你的热模块替换脚本和样式必须由 HTTPS 服务，在 package.json 里的 hot 命令上加上 --https 标记 即可。
"scripts": {
"hot": "NODE_ENV=development webpack-dev-server --inline --hot --https",
}设置好了以后， webpack-dev-server 会生成一张自签名证书。 如果你需要用其他的证书，你需要加入以下的设置：
"hot": "NODE_ENV=development webpack-dev-server --inline --hot --https --key /path/to/server.key --cert /path/to/server.crt --cacert /path/to/ca.pem",然后，在你的 HTML 或者 Blade 文件里，加入以下代码即可：
<script src="https://localhost:8080/js/bundle.js"></script>或者：
<script src="{{ mix('js/bundle.js') }}"></script>单页应用 (SPA) 的运用
Laravel Mix 自带了 vue-loader 包，也就是说，单页运用你无需做任何其他步骤！生下来就会跑！
本译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：