首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS文件不加载使用的是Webpack,Laravel Mix in Laravel 8

Webpack是一个现代JavaScript应用程序的静态模块打包工具。它主要用于将各种资源(如JavaScript文件、样式表、图片等)打包成静态文件,以便在浏览器中加载。Webpack提供了丰富的功能和插件,可以优化代码、拆分模块、处理依赖关系等。

Laravel Mix是Laravel框架中的一个前端构建工具。它基于Webpack,并提供了简化的API,使得在Laravel项目中使用Webpack变得更加容易。通过Laravel Mix,我们可以轻松地编译和打包前端资源,如JavaScript文件、CSS文件、图片等。

在Laravel 8中,可以使用Laravel Mix来处理前端资源。首先,需要安装Node.js和npm(或者使用yarn)。然后,在Laravel项目的根目录下,执行以下命令安装Laravel Mix:

代码语言:txt
复制
npm install

安装完成后,可以在项目根目录下找到一个名为webpack.mix.js的文件。在该文件中,可以配置前端资源的编译和打包规则。

例如,如果要编译和打包一个名为app.js的JavaScript文件,可以在webpack.mix.js中添加以下代码:

代码语言:txt
复制
mix.js('resources/js/app.js', 'public/js');

上述代码表示将resources/js/app.js文件编译为public/js/app.js文件。

除了JavaScript文件,Laravel Mix还支持处理CSS文件、Sass文件、Less文件、图片等。可以根据需要在webpack.mix.js中进行配置。

在执行编译和打包命令之前,可以使用Laravel Mix提供的一些方法对前端资源进行处理,如压缩、版本控制等。可以在webpack.mix.js中链式调用这些方法。

例如,可以使用minify()方法对JavaScript文件进行压缩:

代码语言:txt
复制
mix.js('resources/js/app.js', 'public/js').minify('public/js/app.js');

上述代码表示将public/js/app.js文件进行压缩。

在配置完成后,可以使用以下命令执行编译和打包:

代码语言:txt
复制
npm run dev

执行上述命令后,Laravel Mix会根据webpack.mix.js中的配置,将前端资源编译和打包到指定的目录中。

总结一下,JS文件不加载使用的是Webpack,Laravel Mix是Laravel框架中的一个前端构建工具,可以方便地处理前端资源的编译和打包。通过配置webpack.mix.js文件,可以定义前端资源的处理规则,并使用Laravel Mix提供的方法对资源进行处理。执行编译和打包命令后,前端资源会被编译和打包到指定的目录中,以供浏览器加载和使用。

推荐的腾讯云相关产品:腾讯云COS(对象存储服务),提供高可靠、低成本的云端存储服务,适用于存储和管理各种类型的文件和数据。产品介绍链接地址:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Laravel Mix 初探

配置 Laravel Mix 现在在根目录下就应该可以看到一个webpack.mix.js文件,他 Laravel Mix 配置文件,和我们平时看到 webpack.config.js 长得不太一样...| package.json webpack.mix.js 接下来写一个简单 Laravel Mix 配置文件, webpack.mix.js let mix = require('laravel-mix...常用case 版本控制和清理缓存 开发者经常会使用在编译后资源文件名加上时间戳或者唯一token作为版本号,强迫浏览器加载全新资源文件,而不是缓存文件。...每次都要手动打版本号确实让人不太爽,但是你可以使用 Laravel Mix de version() 它会自动为所有编译文件文件名附加一个唯一哈希值,从而实现更方便缓存清除功能: mix.js('...因此,你应该在你视图中使用 Laravel 全局辅助函数 mix 来正确加载名称被哈希后文件

4.3K60

让 F5 歇一会儿——laravel-mix 自动刷新之道

安装依赖 yarn add -D browser-sync browser-sync-webpack-plugin 在 webpack.mix.js 文件中调用 mix.browserSync() 启动...修改相关文件关保存,webpack 将会自动编译修改文件,完成之后页面将自动刷新。(如果修改后端文件,则直接刷新) ?...打开页面,修改页面引用前端资源(如 js,css)并保存,页面将自动刷新 因为使用 laravel-mix 编译,一般修改 resource/ 目录下文件,但实际上直接修改 public/ 目录中文件也是可以触发刷新...files 规则所包含前后端文件 前端模块(即 webpack 加载模块) 浏览器当前页面所加载前端文件 速度 修改 css 时较快,其它文件时一般 快,特别是热替换时 一般 可靠性 可靠 存在...但同时需要注意 laravel-mix 环境下使用 hmr 也存在一些问题(当前最新版本 4.0.15 中仍存在),例如与 mix.extract() 没法同时使用( 见 Issue ) 以及在windows

2.3K20

Laravel 项目中使用 Bootstrap 框架

/bootstrap'); 这样我们在编译前端资源时候就会将 Bootstrap 相关 js 文件加载进来。...Laravel Mix Webpack 进行封装后提供给 Laravel 项目使用前端打包工具,Webpack 目前最新、广泛使用前端资源打包工具(之前还有 Grunt、Gulp 等),能够以模块方式处理所有前端资源...,Laravel Mix 对其提供功能进行了封装从而避免后端开发人员大量编写 Webpack 配置命令,大多数时候我们需要在 resources/js/app.js 和 resources/sass/...后面我们会专门讲一下 Laravel Mix 各种使用,现在你只需要知道它是怎么回事就好了。...Laravel Mix 配置文件就是项目根目录下 webpack.mix.js: const mix = require('laravel-mix'); mix.js('resources/js/

3.4K31

Laravel 项目中使用 webpack-encore

看过我之前写过博客应该知道我一直 laravel-mix 死忠粉,有好几篇文章都是关于它。每每提到 laravel-mix 时更是不吝溢美之词。...至于为什么放弃 laravel-mix,主要是因为它维护状况堪忧,不仅更新节奏缓慢,许多 Issue 久悬未决,更重要,作者似乎将很多 bug 完全寄希望于 webpack5,哪怕有热心人士 PR...而我迁移这个项目,一个 Laravel 项目,所以下面就分享下,如果在 Laravel 项目中使用 webpack-encore 替代 laravel-mix。...安装依赖 首先当然安装依赖 yarn add -D @symfony/webpack-encore 需要注意webpack-encore 没有像 laravel-mix 那样在自己内部依赖 vue-tempplate-compiler...配置 webpack 在项目根目录下新建一个 webpack.config.js 文件并在其中配置 webpack-encore 功能(实际上它最终也是一个标准 webpack 配置文件),以最基本玩法为例

2.1K20

laravel + passport + vue安装过程中遇到麻烦

不修改vue首页时候不会出现‘跳登录、再加载前端’问题 关键加载了app.js文件。 也就是说这个登录界面已经vuejs版本登录界面了,甚至vuejs使用方式一个优秀样例。...关键加载了app.js文件。也就是说:这个登录界面必须设置为vuejs首页,那其想要真正首页要用vue-router来设置? 还是再装一个app.js?...(好像对,文件太大一个都够慢了) 那登录界面不加载spp.js,在其他真正首页加载不就OK了?但是为啥删掉app.js就没有好看样式了呢?...---- 样式(丑丑)取决于css/app.css文件 app.js应该是vue.jslaravel使用时候,必须这样做一个打包文件(囊括了普通vue项目的所有文件)吧!...--config=node_modules/laravel-mix/setup/webpack.config.js sh: node_modules/webpack/bin/webpack.js:

1.4K20

引入 Laravel Mix 管理前端资源

引言 到目前为止,我们还是使用很原始方式引入前端资源文件 —— 在特定目录下存放完整 CSS、JavaScript 文件,然后在 HTML 文档中静态引入。...如果要完整介绍并构建这样一套前端开发环境,需要引入很多额外篇幅和前端知识,好在 Laravel 生态提供了一个 Laravel Mix 组件,该组件对 Webpack 构建步骤做了封装,提供了一套非常简单流式...虽然该项目针对 Laravel 框架开发,不过,由于是一个纯前端项目,因此可以适用于所有 Web 前端项目,现在,我们就来在博客项目中引入 Laravel Mix 管理前端资源。...安装 Laravel Mix 开始之前,需要先安装 Laravel Mix 组件需要前端相关依赖,假设你系统上已经安装过 Node 和 NPM 包管理器,如果没有安装的话前往 Node.js 官方下载页面.../webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" },

1.6K20

Homestead + laravel-mix 环境下 hmr 两种玩法

1.vagrant ssh 连接虚拟机,进入项目目录后安装前端依赖 yarn install 2.在 webpack.mix.js 中调整相关配置 使用 mix.Webpack() 配置 devServer...devServer 默认 watch 选项,对于虚拟机环境无效(见 webpack 文档[2]) 调整 hmrOptions mix.options({ hmrOptions:...在虚拟机终端中执行yarn run hot,然后在浏览器中使用绑定测试域名(如:laravel.test)访问 34.修改 JS 等,自动编译后浏览器中页面即自动更新 玩法二:使用宿主机中 Node...1.从宿主机终端进入项目目录并安装前端依赖 yarn install 2.webpack.mix.js使用 webpackConfig 进行配置 mix.webpackConfig({ devServer...就我个人而言,通常使用第二种,主要原因有二: 一出于性能/延迟方面的考虑,因为在虚拟机中使用轮询(poll)方式来监听文件变化,当 poll 设置间隔较大时可能会出现一定延迟,而设置太小轮询太频繁则又可能造成一定性能压力

1.6K10

前后端分离探索——MVC 项目升级一个过渡方案

传统项目大多数 MVC 架构,直接使用 PHP 等后端语言渲染 HTML 模板,返回给浏览器 现在,前后端分离不需要后端渲染模板,而是交由浏览器 Javascript 渲染,后端只需要返回前端渲染所需要数据即可...v={{ time() }}"> 1 2 3 4 5 6 暂时找不到很好解决缓存方案,所以统一缓存 新建前端控制器 public/mix/resources/js/test/index.js...Laravel Mix 工具,这会节省大量前端配置时间 根目录新建文件 webpack.mix.js const fs = require('fs'); const mix = require('laravel-mix...Yarn 前端编译,此时,PHP 模板中已正确引入 Vue 访问路由,PHP 渲染模板,返回给浏览器 浏览器加载 Vue,交由 Vue 渲染页面 # 局限 不能做到全局自动加载组件 编译后文件大小可能会很大.../js 文件夹可以删掉了,编译后文件大小约 2.5 M 至此,优化完成,完美解决了开发流程痛点 # 后记 目前仍在不断地探索中

1.2K20

页面布局(下):引入 Tailwind CSS 框架构建博客应用 UI 界面

基于 Laravel Mix 引入 Tailwind 在 Laravel 项目中,我们可以基于 Lavavel Mix 快速引入 Tailwind CSS 框架,开始之前,先安装 laravel-mix-tailwind...这个前端依赖包: npm install laravel-mix-tailwind --save-dev 安装完成后,需要在项目根目录下 webpack.mix.js 中引入它: const mix...= require('laravel-mix'); require('laravel-mix-tailwind'); ......(); 由于 laravel-mix-tailwind 依赖 tailwind.js,所以还需要通过如下命令初始化 Tailwind: npx tailwindcss init 如果上述命令运行报错...推荐一个不错 Tailwind 组件素材库 —— Tailwind Components,在这里,你可以按需搜索自己想要组件: 相应源代码都可以免费拷贝过来使用(不同于 Bootstrap,Tailwind

2.6K20

将博客主题替换成 Clean Blog

2、下载相关依赖库 这里,我们选择使用 Clean Blog 作为博客主题,这是一个基于 Bootstrap 框架免费主题,不同于以往下载主题包及关联前端资源文件到本地再引入,我们现在可以直接通过 NPM...js 文件变成最终可以引入到 HTML 文档文件,还需要在 blog 根目录下新建 webpack.mix.js,通过 Laravel Mix 来编译打包这些预处理 js 文件: const mix...= require('laravel-mix') mix.js('resources/js/app.js', 'public/js'); 上述代码含义引入 Laravel Mix,然后通过它提供...js 方法将 resources/js/app.js 进行编译打包,然后将处理后 app.js 文件分发到 public/js 目录下。...然后在 webpack.mix.js 中补充对应处理逻辑: const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public

72520

webpack构建优化:bundle体积从3M到400k之路

--hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", //开发环境生成 app.js及页面js...=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", //生成环境打包 app.js...因为vue和vue-router在cdn上都提供了min版js,已经压缩精简版,而vue-i18n.js官方网站也建议使用cdn方式引入,没必要将都打包到app.js中。...效果十分明显 image.png c、除了拆分依赖包,另一个重要优化就是压缩代码,这里使用uglifyjs-webpack-plugin,同样在webpack.app.config.jsplugin...比如UglifyJsPlugin删除生产环境里console.log选项drop_console死活生效,最后只能通过vue-loader中preLoader预加载选项,利用strip-loader

4K50

Laravel 前端资源配置教程

最近在学Laravel,遇到前端资源加载问题,记录一下。 一、前端共用资源配置 1. webpack.mix.js //一般不太更动,透过以下两个档案讲所需资源加载。...mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css...// vue所有页面共用,可以在app.js初始/启用 6. npm编译 npm run dev #resource档案夹下资源需要编译才会生效 二、各页面私有资源 1....-- 在适当位置加入以上两条语句,建议@stack('styles'放在<head 中, @stack('scripts')放在<body 内底部(部分JS需要等DOM加载完成方可使用)。...</div @endsection 以上这篇Laravel 前端资源配置教程就是小编分享给大家全部内容了,希望能给大家一个参考。

1.2K52

创建并运行一个新 Laravel 项目

推荐使用第一种方式,比较简单,而执行这两种方式之前,都需要系统已经安装过 PHP 和 Composer(如果使用 Valet 或 Laragon 的话,则应该已经安装过了,如果使用 Homestead...laravel/laravel blog --prefer-dist 效果和上面使用安装器安装一样,使用这个方式安装一个好处可以安装旧版本 Laravel 项目,比如要安装 5.6 版本项目...资源文件,如视图模板、语言文件、待编译 Vue 模板、Sass、JS文件 routes:项目的所有路由文件都定义在这里 storage:用于存放缓存、日志、上传文件、已经编译过视图模板等 tests...:Composer 配置文件 webpack.mix.jsLaravel Mix Webpack 配置文件,用于编译和打包前端资源 package.json:配置前端资源依赖和脚本(类似于 composer.json...(每个环境有自己独立 .env 文件使用不同配置值,提高了代码复用性和灵活性。

6.8K30

基于 Vue 测试套件引入 Mocha + Expect 测试 Vue 组件

在 Vue 框架中编写单元测试基本流程和学院君之前在 Laravel 框架和 Go-Micro 微服务框架中编写单元测试时一模一样,只是使用测试框架和语法有所区别罢了,Laravel 中我们使用测试框架...PHPUnit,Go-Micro 中我们使用测试框架 GoConvey,而在 Vue 框架中,我们将使用 Vue 生态 Vue 测试套件并引入 Mocha 测试框架进行 BDD 风格单元测试。...你可以参照Vue 官方文档通过 NPM 安装相应依赖包,不过这里为了方便后端程序员快速入门,我们绕过 Webpack 繁琐配置,直接基于 Laravel Mix 引入 Vue 测试套件和 Mocha...JavaScript/setup.js tests/JavaScript/**/*.spec.js" } 自定义 Webpack 配置文件 其中 --webpack-config 用于指定了该测试使用...Webpack 配置文件,这里为了方便对其进行自定义,我们在 component-test 根目录下新建了一个 webpack.config.js,并初始化配置代码如下: let path = require

1.4K40

Laravel系列7.8】广播系统

pusher 官方文档上推荐,但是,注意这里有但是了哦。这玩意需要去它官网上注册之后拿到 key 了才能使用。而在这们日常使用中,其实更多使用 redis+socket.io 这种搭配。...注意,这个 laravel-echo-server 一个 npm 工具哦,也就是说,它是一个 node.js 服务器。...在初始化时选项内容都是很简单英文啦,相信各位大佬英文水平没问题。然后我们找到在当前目录下生成 laravel-echo-server.json 文件,修改 devMode 为 ture 。...安装完成之后,需要去修改一下 resources/assets/js/bootstrap.js 。在这个文件中,已经包含了一套注释 Echo 配置,我们需要打开注释并修改成下面这样。...修改完成之后,我们需要使用 Laravel 默认 mix 工具来编译一下前端代码,最后需要加载文件实际上 public/js/app.js ,直接使用下面的命令行进行编译即可。

2.2K20

引入 SB Admin 2 作为后台管理系统主题

最终后台界面效果图如下(依次专辑列表页、发布文章页、消息列表页): ? 专辑列表页 ? 新增文章页 ?...-2/scss/sb-admin-2"; 通过 Laravel Mix 编译前端资源 做好以上准备工作后,就可以在 webpack.mix.js 中将上述资源文件编译打包为对应 JavaScript...和 Css 代码了: const mix = require('laravel-mix') // 编译前台资源 ... // 编译后台资源 mix.js('resources/js/admin.js...为了简化操作和演示流程,我们直接拷贝 SB Admin 2 仪表盘视图 HTML 代码(位于 node_modules/startbootstrap-sb-admin-2/index.html),然后将其中前端资源文件调整为本博客项目的资源文件路径...在项目根目录下运行 composer dump-auto 让新增文件和命名空间可以被自动加载到。

4.1K10
领券