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目前是前端構建工具的首選。