phpwebpack

‘壹’ 前端vue与后端Thinkphp在服务器的部署

vue在服务端部署时，我们都知道通过npm run build 指令打包好的dist文件，通过http指定是可以直接浏览的，Thinkphp通过域名指向index.php文件才可以浏览。要使前端正常调用后端数据，有两种方法：1、前端跨域调用后端数据，2、前端打包文件部署在后端的服务器文件夹下（同域）。

web服务器： apache

一、跨域

在服务器配置站点：

在路径/home/www/  下创建test项目文件夹，用来放项目文件。  

找到httpd-vhosts.conf文件配置站点  

前端站点：  

    ServerName test.test.com  

    DocumentRoot "/home/www/test/dist"    

    DirectoryIndex index.html  

后端站点：  

    ServerName test.testphp.com  

    DocumentRoot "/home/www/test/php"    

    DirectoryIndex index.php  

将前端打包好的dist文件放在/home/www/test/ 文件夹下，运行http://test.test.com可浏览，当路径改变时，刷新会出现404错误。此时dist文件下创建一个.htaccess文件，当路径不存在时，路径指向http://test.test.com/index.html能解决此问题。

  RewriteEngine On  

  RewriteBase /  

  RewriteRule ^index\.html$ - [L]  

  RewriteCond %{REQUEST_FILENAME} !-f  

  RewriteCond %{REQUEST_FILENAME} !-d  

  RewriteRule . /index.html [L]  

在/home/www/test文件夹下创建项目根目录php文件夹，将thinkphp文件放在php下。TP5的入口文件在public文件下，在这将public下的入口文件index.php挪到php文件夹下（个人习惯将入口文件放在项目根目录）, 后端绑定Index模块。

前端调用后端接口，存在跨域，跨域解决方法有好几种，在这我将在后端php做配置，解决跨域问题，在公用控制器设置跨域配置：

class Common extends Controller  

{  

    public $param;  

    // 设置跨域访问  

    public function _initialize()  

    {  

        parent::_initialize();  

        isset($_SERVER['HTTP_ORIGIN']) ? header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']) : '';  

        header('Access-Control-Allow-Credentials: true');  

        header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');  

        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, authKey, sessionId");  

$param =  Request::instance()->param();  

$this->param = $param;  

    }  

}  

前端调用登录接口： this.axios.post('http://test.testphp.com/index.php/base/login', {user: '', password: ''})。

(可在webpack.base.conf.js文件下可定义接口：http://test.testphp.com/index.php/)

二、同域

后端配置同上，公共配置器中的header配置注释。将前端的dist文件下的所有文件（包含.htaccess），放在php文件夹下。将后端index控制器的index方法的路径重定向php下的index.html文件：

namespace app\index\controller;  

use think\Controller;  

class Index extends Controller  

{  

    public function index() {  

$this->redirect('/index.html');  

    }  

}  

前端调用登录接口： this.axios.post('/index.php/base/login', {user: '', password: ''})

转自：https://blog.csdn.net/qq_35465132/article/details/78986675

‘贰’ web前端开发常用又好用的几个软件

可以网上看看

‘叁’ webpack使用HtmlWebpackPlugin进行cdn配置

其中build文件夹中的webpack.prod.conf.js是我们主要注意的文件,我们在该文件中动态设置不需要被打包的模块并构建出合适的链接。

在webpack项目中，所引入的第三方资源会被统一打包进vender文件中，我们通过webpack的 externals 属性可以设置打包时排除该模块，详情说明见 外部扩展(externals) 。

在前面的步骤中，我们创建的项目包括vue、vue-router，在正式开发在还会有ui库，如element-ui，为了方便演示，我们再安装element-ui和axios两个模块，并实现在构建是把这是个模块以cdn的形式引入。

注意安装时记得-S，它的作用是安装完后在package.json项目文件中插入记录，后续操作需要读取已安装模块

对于cdn，我们可以自己搭建，也可以使用专业的cdn服务商，这里使用免费的cdn bootcdn 。选用免费cdn有很多好处，但毕竟有隐患，那就是服务有可能会奔溃。

依次搜索出前面模块，结果如下

按照规律，得出cdn资源路径规则为

使用cdn其实也就是在webpack热启动和打包项目的时候动态插入script和style链接，为了方便维护，我们通过在build/utils.js文件上添加几个方法，将来在webpack.dev.conf.js和webpack.prod.conf.js上可以使用。

如果没有build/utils.js，可以在其他文件上添加，只要在后续步骤中能操作到就行

1.添加兄正粗cdn根地址

2.添加cdn模块 按照需要删改

这里特别注意scope，它是webpack配置的external参数下的信息，比如vue的作用域命名是Vue，vue-router的作用域命名是VueRouter，element-ui的作用域命名是ELEMENT，同理，jq的作用域命名是JQuery，具体做法是先引入该资源，然后在控制台依次输入近似的值，一个个匹配(目前没找到更好的做法)。

3.添加获取版本号方法

4.导出不需要被打包的cdn模块配置重点

在webpack热启动本地调试的时候，我们可以使用cdn。

在build/webpack.dev.conf.js中，默认已经引入了utils.js，所以可以直接调用相关方法，如果是自定义的文件，记得引入。

紧接着我们在该文件下找到devWebpackConfig下的plugins下的HtmlWebpackPlugin插件，它的作用是动态构建html页面，原始配置如下：

我们可以往里面添加点自定义属性，方便在index.html中调用。，修改如下：

其中cdnConfig和onlyCss自定义属性，在html上通过htmlWebpackPlugin.options可以读取到。
更多html-webpack-plugin配置情况官网，这里暂时不需要更多。

webpack.prod.conf.js添加cdn配置和忽略模块
在打包的时候，我们使用cdn，配置和前面dev的差不多，只不过需要做多一步。

注意此处的externalMoles，后面用到，也就是比dev多的步骤。

externals代表构建时不需要被处理的模块，也就是前面说的scope需要注意的地方。

和dev一样，我们修改webpackConfig下的plugins下的HtmlWebpackPlugin插件配置 (这里的默认配置比dev的多，主要是css压缩和js压缩相关)

加入和dev一样的两个配置，不过需要把onlyCss改为true，因为我们希望打包时不单单使用css。

webpack配置清宴已经完成，在html-webpack-plugin中已经添加了相关参数，我们再在页面上可以直羡镇接使用，使用语法是ejs，和asp.net，jsp，php类似。

‘肆’ 怎么理解webpack中的output.filename 和output.chunkFilename

filename应该比较好理解，就是对应于entry里面生成出来的文件名。比如：

{
entry: {
"index": "pages/index.jsx"
},
output: {
filename: "[name].min.js",
chunkFilename: "[name].min.js"
}
}

生成出来的文件名为index.min.js。
chunkname个人的理解是未被列在entry中，却又需要被打包出来的文件命名配置。什么场景需要呢？咱们项目就遇到过，在按需加载（异步）模块的时候，这样的文件是没有被列在entry中的，脊芦档如使用CommonJS的方式异步加载模块：

require.ensure(["moles/樱乱tips.jsx"], function(require) {
var a = require("moles/tips.jsx");
// ...
}, 'tips');

异步加载的模块是要以文件形式加载哦，所以这时生成的文件名是以chunkname配置的，生成出的文件名就是tips.min.js。
（require.ensure() API的第三哗拦个参数是给这个模块命名，否则 chunkFilename: "[name].min.js" 中的[name] 是一个自动分配的、可读性很差的id，这是咱在文档很不起眼的地方发现的。。。）

‘伍’ Web前端开发需要哪些工具

前端开发中需要掌握最基础的技能就是HTML、CSS，javaScript。春差前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互，在进行开发前，需要对这些概念弄清楚，才能进行合理的开发。

在网页建设的过程中，为了避免代码的繁琐杂乱，更高效快速地完成任务，就会使用到一些有代码高亮提示和弯森慧语法提示等便捷功能的前端开发工具。

1，Dreamweaver：中文名“梦想编织者”。是集网页制作和管理网站于一身的所见即所得网页代码编辑器。它可以使用所见即所得的接口，亦有HTML编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。访问代码提示，即可快速了解 HTML、CSS 和其他Web 标准。 使用视觉辅助功能减少错误并提高网站开发速度。

2，Sublime：Sublime Text 是一个代码编辑器，也是HTML和散文先进的文本编辑器。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。

3，HBuilder：是DCloud,推出的一款支持HTML5的Web开发IDE。 HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。

有了工具，接下来还得靠我们人来操作。你必须熟悉三种语言，把埋答这些概念弄明白，才能开发出好的作品。

‘陆’ 如何让webstorm识别php代码有什么插件吗

1、物老点击 File -> settings -> File Types 这时候右侧有袭渣俩个框, 在上面的框 选中 PHP FILES
然后在下方的框 点击 绿色小加号 , 在弹出的框中 输入 *.php

2、这样做的目的, 是把以 .php 结尾的文件用 PHP FILES所定义的渲染方拍蚂悄式渲染文档, 不过很可惜, 这个语法高亮基本上没什么用。

3、JetBrains 发布了其最受欢迎的 WebStorm IDE 的 2017.1 版本，毫不例外地增加了对 Vue.js 的支持。WebStorm 现在会识别 .vue 文件并在模板中增加代码补全功能。当引用其他视图组件时，WebStorm 也将能够自动补全代码并自动增加 import 声明。

4、在构建基于 Webpack 的前端工作流时，CommonsChunkPlugin 是常用的公共代码提取插件。而本文则是 Webpack 开发团队对于社区反馈的CommonsChunkPlugin 使用过程中的一些误区与同步/异步公共代码块提取的实践进行总结与分析。

‘柒’ web前端开发需要用到的工具有哪些

最常仔厅用的就是dreamweaver，一般是dreamweaver cs6,cs6目前是功能比较强大,问题比较少的了,dw有一个比较方便的就是可视化编程,可以边看效果边敲代码,还有自动提示 代码的功能.
还有就是ediplus,这个其实就相当于一个字体有颜色的记事本,因为dw占用内存太多了,搞的电脑卡,所以我直接用 ediplus写代码,还有就是eclipse可以写java、php还有 上面的各种代码!Zend Studio 是专门写php的,但是上面这2种工念握隐具比较专业,是我们专业开发人员用皮行的,所以大家自己看着办.Photoshop这个就不用说了。

‘捌’ Web前端现在主要用哪些技术

web前端开发包括的技术：
1、学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。
2、div布局：DIV元素是用来为HTML文档内大块的内容提供结构和背景的元素。
2、学习JavaScript的基本语法，以及如何使用。JavaScript编程将会提高开发人员的个人技能。
3、了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。
4、html5+css3：移动端的网页制作。在移动设备开发HTML5应用只有两种方法，要不就是全使用HTML5的语法，要不就是仅使用JavaScript引擎，现在也是前端的一个趋势。
5、一些框架的应用：angular.js，node.js，bootsttap等框架的应用。
6、了解Web服务器对Apache的基本配置，并且掌握htaccess配置技巧
7、web前端开发技术，还需要学习一些seo优化技术，因为前端是经常会和网站接触的。
8、掌握web前端开发技术的同时，适当的学习一些后台开发语言（java，php等）也是一个不错的选择。

‘玖’ fis3和webpack有什么区别

fis/fis3是grunt、gulp之后兴起的一个比较优秀的前端工程解决方案。它的本质是基于静态资源标记+动态解析静态资源表，在模板、js里边使用特殊的标记方法引用前端资源，构建的时候生成一张资源依赖表，浏览器或者后端模板语言在解析的过程中通过查表得到某个静态资源在不同环境下的引用路径，所以不管是纯前端渲染（标记方法已经转换成浏览器能识别的了）还是后端（php、node、java）渲染，都很容易支持到，这样可以做到非常精细化的控制资源的按需加载。可以说fis真正做到了静态资源动态按需加载。
再来说说webpack，段纯其实本质上是静态打包，生成chunk需要手动配置entry，虽然可以使用CommonsChunkPlugin、dll等插件辅助提取公共代码，以及采用code split切割进行懒加载，但这个粒度十分难把握，配置起来也比较困难（fis是自动生成依赖关系和自动处理懒加载）。
单从原理上来讲，fis比webpack要先进好多好多。但是fis先进的稿燃坦理念也成为它的一个缺陷，就是自定义的一套标记语言，大量自定义的资源标记语法并不能被浏览器直接接解析或者被社区流行的工具（browserify/babel）转换，比如fis依赖自家定制的mod.js来解析`require()`函数（即定位资源）以及资源base64内嵌语法`__include()`等。这一点直接导致了fis无法和后来的强大的npm社区对接，大量的npm前端模块在fis用不了，笔者认为这是导致各公司在选择前端统一的构建工具标准时不考虑fis的最大原因吧。
fis的作者
曾经说过，webpack只差一步——生成支持静态资源表，就完美了，深以为然！目前，webpack好像有生成sourcemap的插件，但是缺少配套的解析sourcemap的工具，后端的模板引擎貌似也没有支持sourcemap。
webpack现有的懒加载手段不完美，但是基本够用，主要是它直接支持commonjs规范的require语法，再配置babel等还可键桐以直接解析ES6语法（当然，fis也可以通过插件支持ES6的），加上可以直接使用npm模块这一点，依托npm社区强大红利来搭建公司级公共组件化规范。所以综合考虑，webpack目前是前端构建工具的首选。