介绍
这期内容当中小编将会给大家带来有关怎么在Laravel中自定义webpack.mix.js,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
<强> Laravel自定义webpack.mix。js
我们在使用<代码> laravel 构建项目时,经常会把<代码>后台管理及<代码>前台> laravel>
但是当这两个项目都需要用到<代码> laravel-mix 构建时,我们希望通过运行不同的<代码> npm 命令区分后台及前台。
考虑混合在一起的情况:
//webpack.mix.js
{const mix },=,要求(& # 39;laravel-mix& # 39;);
,,,//前台资源打包到,公共/js/index.js/mix.js(& # 39;资源/资产/js/app.js& # 39;,, & # 39; js/index.js& # 39;)
,,,//后台资源打包到,公共/js/admin/index.js
,,. js(& # 39;资源/资产/js/admin/index.js& # 39;,, & # 39; js/admin/& # 39;); 在<代码> webpack.mix。js代码中,我们把后台和前台资源文件写在同一个配置文件中,这样你只需运行<代码> npm dev>
但是当只你想更新前台资源文件时,后台资源文件不得不一起被动更新。
<强>解决方案
在根目录定义两个配置文件
<李> webpack.mix。js//默认已存在
<李> webpack.admin.js
更新<代码> webpack.mix。js> env 。
//webpack.mix.js
{const mix },=,要求(& # 39;laravel-mix& # 39;);
{const env },=,要求(& # 39;minimist& # 39;) (process.argv.slice (2));
if (env ,,, env.admin), {
,,,需要(“$ {__dirname} \ \ webpack.admin.js”);
,,,返回;
}
mix.js(& # 39;资源/资产/js/app.js& # 39;,, & # 39; js/index.js& # 39;);//其他前端资源 后端资源打包<代码> webpack.admin。js代码配置
//webpack.admin.js
{const mix },=,要求(& # 39;laravel-mix& # 39;);
mix.js(& # 39;资源/资产/js/admin/index.js& # 39;,, & # 39; js/admin/& # 39;);//其他后台资源配置 确认已安装完<代码> 节点依赖,并在根目录执行
npm run dev ——,——env.admin //打包后端资源
npm run dev ,,,,,,,,,,,,,,,//默认打包前端资源 若嫌每次都带参数太麻烦,可更新<代码>包。json代码文件,带上<代码> env> “scripts":, {
,,,“dev-admin":,“node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js ——progress ——hide-modules - config=node_modules/laravel-mix/设置/webpack.config.js ——env.admin"
} 接下来直接运行<代码> npm运行dev-admin>
<强>注意,
当<代码> webpack.mix.js 及<代码> webpack.admin.js> mix.setPublicPath(路径)时,默认的打包文件都会放到<代码>/公共代码目录下,这样每次打包都会覆盖<代码> mix-manifest。json代码的值。
最好的方法时前台及后台指定不同的目录,
server {
,,,server_name admin.domain.com;
,,,index index . php。
,,,root /数据/你/网站/public-admin;
,,,#,....
}
server {
,,,server_name domain.com;
,,,root /数据/你/网站/公众;
,,,index index . php。
,,,#,....
} 这样你只需要在<代码> webpack.admin.js> publicPath> mix-manifest。json> //webpack.admin.js
mix.setPublicPath (& # 39; public-admin& # 39;);//?/pre>
