think-webpack 1.0.0 发布

最新推荐文章于 2022-05-21 16:24:54 发布
最新推荐文章于 2022-05-21 16:24:54 发布
阅读量176 收藏
点赞数
文章标签： webpack php json ViewUI
原文链接：https://my.oschina.net/sfk/blog/3044187
版权

think-webpack

在 ThinkPHP5.1/6中使用 webpack

https://github.com/kuange/think-webpack

使用了 symfony 的 encore, 更多使用请参考

https://symfony.com/doc/current/frontend/encore/installation.html

https://symfony.com/doc/current/frontend.html

环境需求

  • php >= 5.6
  • thinkphp >= 5.1/6

 

安装

  • 执行命令 composer require kuange/think-webpack
  • 依赖于 @symfony/webpack-encore , 安装 yarn add @symfony/webpack-encore --dev
  • 复制文件到项目根目录 cp -r vendor/kuange/think-webpack/copy_files/* ./
  • 复制之后, 将会在根目录下生成以下文件:
|____webpack.config.js
|____assets
| |____css
| | |____app.css
| |____js
| | |____app.js

 

使用

yarn encore

# 开发环境
yarn encore dev
# 实时编译, 刷新浏览器即可查看最新变更
yarn encore dev --watch
# 生产环境
yarn encore production

以上命令将会在 `pubic` 下生成 `build` 目录, 目录中是编译好的文件

|____build
| |____entrypoints.json
| |____runtime.js
| |____app.css
| |____manifest.json
| |____app.js

 

在模板中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>think-webpack</title>
    {:encore_link_tags('app')}
</head>
<body>
    <h1>think-webpack</h1>
    {:encore_script_tags('app')}
</body>
</html>

转载于:https://my.oschina.net/sfk/blog/3044187

chunao4404
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
think-webpack-hot-middleware:适用于ThinkJS的Webpack热中间件
05-27
think-webpack-hot-middleware 适用于ThinkJS的Webpack热中间件 安装 $ npm install think-webpack-hot-middleware --save-dev 枫树 $ git clone https://github.com/lizheming/think-webpack-hot-middleware $ cd think-webpack-hot-middleware/example $ npm install $ npm start 如何在ThinkJS 2.x中使用 think-webpack-hot-middleware应该与think-webpack-dev-middleware $ npm install think-webpack-dev-middleware --save-dev 在src/common/c
Thinkphp6 框架中部署vue项目
weixin_51224282的博客
12-20 4084
如何在thinkphp 框架中 部署vue 项目，无需子域名
分享：ThinkPHP和Webpack前后端结合构建SEO多页应用的一个思路
彭世瑜的博客
05-21 1192
有时候遇到的需求是这样的： 部分页面，如详情页，需要做SEO优化，而部分页面需要实现复杂的交互，如用户后台，可发布信息。 之前采用过一次，Nuxt.js 等前后端同构的方案。 优点就是一套js代码，就可以实现后端渲染。 使用后发现开发环境性能要求较高，经常出现启动慢，打包慢，有时候还进程自动退出 编写代码的时候发现，Vue生命周期把控不好，会出现一些奇怪的报错，不能很好的区分代码在服务端执行还是客户端执行，需要写一些判断。 上图的方案，采用了ThinkPHP作为服务端，使用他的Active Records.
使用webpack打包ThinkPHP的资源文件
weixin_34081595的博客
12-25 484
使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站，全是一个人在弄，由于只租得起虚拟空间，所以后台采用了简单方便的ThinkPHP反正主要也是做一些CURD操作ThinkPHP还是挺好用的，帮我提前做好了好多功能。 本人并不擅长前端，但是开始开发这个小网站发现，基本的功能全部要通过前端javascript来实现。一...
vue+webpack+thinkphp多页应用配置
dd的博客
03-23 9961
vue+webpack+thinkphp多页应用配置介绍
web-webpack-plugin：替代html-webpack-plugin
02-03
web-webpack-plugin 想全面学习Webpack？试试它： 不错替代品，可以使webpack将HTML用作条目并处理多页。 安装 npm i web-webpack-plugin --save-dev const { WebPlugin , AutoWebPlugin } = require ( 'web-...
html-webpack-externals-plugin：与html-webpack-plugin一起使用以使用预先打包的供应商捆绑包的Webpack插件
02-06
html-webpack-externals-plugin :police_car_light: 已淘汰 :police_car_light: 抱歉，该模块已不再维护，其功能已由jharris4， 和。 您可能会遇到问题，并且最近的Webpack项目尚未使用它。 与一起使用以使用...
monaco-editor-esm-webpack-plugin
05-30
monaco-editor-esm-webpack-plugin 它依赖于 。 如果你想复制一个带有本地化的 monaco 编辑器，你可以看到 用于 monaco 编辑器的 webpack 插件，用于编译工作程序并处理本地化。 安装 npm install monaco-editor-...
terser-webpack-plugin：Terser插件
02-06
terser-webpack-plugin 该插件使用来缩小JavaScript。入门如果您使用的是webpack v5或更高版本，则无需安装此插件。 Webpack v5随附了最新的terser-webpack-plugin 。 使用Webpack v4，您必须安装terser-webpack-...
think-webpack-dev-middleware:适用于ThinkJS的webpack开发中间件
05-27
think-webpack-dev-中间件 适用于ThinkJS的webpack开发中间件 安装 $ npm install think-webpack-dev-middleware 如何在ThinkJS 2.x中使用 在src/common/config/hook.js添加钩子 export default { resource: ['webpack-dev'] } 在src/common/bootstrap/middleware.js添加钩子src/common/bootstrap/middleware.js import webpackDevMiddleware from 'think-webpack-dev-middleware'; import webpack from 'webpack'; import config from '../../../webpack.c
webpack-encore-bundle:Symfony与Webpack Encore集成！
05-13
WebpackEncoreBundle：与Webpack Encore的Symfony集成！ 该捆绑包允许您通过阅读entrypoints.json文件并帮助您呈现所需的所有动态script和link标签，来使用的splitEntryChunks()功能。 使用以下方法安装捆绑软件： composer require symfony/webpack-encore-bundle 配置 如果您使用的是Symfony Flex，那就大功告成！ 该食谱将在config/packages/webpack_encore.yaml文件中预配置您需要的所有内容： # config/packages/webpack_encore.yaml webpack_encore : # The path where Encore is building the assets - i.e. Encore
nodejs - webpack - ReactJS - AntDesign 项目搭建环境并运用到thinkphp5框架代码中
Wu_shuxuan的博客
12-05 3994
webpack_React_antDesign的安装参考 React / Ant Design 安装 ; 在webstorm的Terminal中输入npm run build； 利用webpack打包之后，项目目录中自动会生成一个build文件夹； 把这个文件夹放到tp5的public的static目录下，把index.html拷贝进application里某个模块的view中去。 这里注意模块中h
前端vue与后端Thinkphp在服务器的部署
tomato的博客
01-06 2万+
vue在服务端部署时，我们都知道通过npm run build 指令打包好的dist文件，通过http指定是可以直接浏览的，Thinkphp通过域名指向index.php文件才可以浏览。要使前端正常调用后端数据，有两种方法：1、前端跨域调用后端数据，2、前端打包文件部署在后端的服务器文件夹下（同域）。 web服务器： apache 一、跨域 在服务器配置站点： 在路径/home/www/
使用ThinkPHP框架快速开发网站(多图)
热门推荐
ruby97的专栏
05-17 32万+
使用ThinkPHP框架快速搭建网站          这一周一直忙于做实验室的网站，基本功能算是完成了。比较有收获的是大概了解了ThinkPHP框架。写一些东西留作纪念吧。如果对于同样是Web方面新手的你有一丝丝帮助，那就更好了挖。        以前用PHP做过一个很蹩脚的网站，为什么这么说呢，因为写的全是死代码。做完以后觉得实在是累，前端要div+css,js 后端要php,mysql
thinkphp---静态前端页面与TP框架整合
GQ_cyan的博客
05-09 7519
1，引入网页静态源代码； 将网页源代码复制到Home->view->对应静态文件中； 2，引入css,js,img文件； 在Home文件下新建public文件，public下建立css,js,img文件，将对应的源码加入对应文件中； 3，在入口文件（index.php）下定义css,js,img的路径常量： define("SITE_URL","http://127.0.0
thinkphp5 简单API接口开发
heyuqing32的博客
07-09 3757
ThinkPHP5开发Api接口简单实例这个实例实现这样一个功能： 前端提交学生学号（sno）给Api Api接口返回此学生的基本信息API接口端&lt;?php namespace app\index\controller; use think\Controller; use app\index\model\Student; class User { public function...
thinkPHP打包下载
thinkPHP打包下载部分代码
05-14 629
//备课打包下载public function download(){ $row_key=session("row_key");$teacher_info=M('teacher_info');$newlesson_info=M('newlesson_info');$chapter_info=M('chapter_info');$newlesson_scort=M('newlesson_scor...
terser-webpack-plugin与uglifyjs-webpack-plugin
最新发布
05-02
terser-webpack-plugin与uglifyjs-webpack-plugin是两个用于压缩JavaScript代码的插件，都可以用于Webpack。 uglifyjs-webpack-plugin是一个旧的插件，它使用UglifyJS进行压缩。它已经被广泛使用了很长一段时间，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值