webpack搭建多頁面系統（二）：對webpack.config.js配置文件的理解

BlackFlagBin 發布于2019-08-21 18:40 / 2777人閱讀

摘要：配置文件的理解的配置文件是沒有固定的命名的，在我的項目中建立了兩個配置文件，一個是開發的配置文件另一個是上線的配置文件。它們是怎么執行不同的配置文件的尼這才是重點。這是對兩個配置文件的理解。

webpack配置文件的理解

webpack的配置文件是沒有固定的命名的，在我的項目中建立了兩個配置文件，一個是開發的配置文件webpack.config.js;另一個是上線的配置文件webpack.build.config.js。兩者內容上的差別，在以后的文檔中解釋。它們是怎么執行不同的配置文件的尼？這才是重點。
在package.json文件中，有腳本的執行配置，如圖：

在我們的cmd命令行中，開發時：執行npm run dev;將執行我們的webpack.config.js文件；
最終上線時：執行npm run build;將執行我們的webpack.build.config.js文件；兩者的內容有細微的差別。
這是對兩個配置文件的理解。
每次編譯代碼時，手動的npm run dev 就會變得有點麻煩。
webpack提供了幾個選項，可以幫助我們在代碼發生變化后自動編譯代碼：
1、webpack"s Watch Mode
2、webpack-dev-server
3、webpack-dev-middleware
多數場景中，使用webpack-dev-server。
參考官方文檔：https://doc.webpack-china.org...
在我的項目中使用的是webpack-dev-sever。提供了一個簡單的web服務器，并且能夠實時重新加載（live reloading）
webpack.config.js

參考webpack-dev-server文檔：https://doc.webpack-china.org...

devServer:{
    contentBase:目錄文件所在的位置，
    historyApiFallback：任意的404響應都可能需要被替代為index.html.一般默認true.
    historyApiFallback:{
            rewrites:[
                {from:/^/$/,to:"/views/landing.html"}, #以根‘/’開始，以根‘/’結尾的請求，重定向到‘/views/landing.html’
                {from:/^/subpage/,to:"views/subpage.html"}, #以‘/subpage’開始的請求，重定向到‘views/subpage.html’
                {from:/./,to:"/views/404.html"} #不匹配上面的任意除了換行符之外的請求，重定向到‘/views/404.html’
            ]
        }
    inline:boolen;在dev-server的兩種不同模式之間的切換。默認啟用內聯模式（
    inline mode）,處理實時重載的腳本被插入到你的包（bundle）中，并且構建消息將會出現在瀏覽器控制臺。
    progress:boolen;用于命令行工具，將運行進度輸出到控制臺。
    port:number;指定要監聽請求的端口號
    index:string;索引文件的文件名
    host:string;指定使用一個host.默認是localhost。ip地址
    proxy:object;代理配置,代理后端開發服務器API,并且希望在同域名下發送API請求。
    
    
}

這是對webpack.config.js中對webpack-dev-server的解讀！！！可能存在一些不對的地方，希望指出！！！

GPU云服務器云服務器對python的理解談談對php的理解對人工智能的理解對云服務器的理解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90711.html

webpack搭建多頁面系統（三）理解webpack.config.js的四個核心概念

摘要：關于模板的有好幾種。一次安裝所有的大家可以了解一些的用法把編譯成。安裝參考文檔功能將源文件遷移到指定的目錄，返回新的文件路徑。安裝用法它會將所有的入口中引用的移動到和頁面對應的獨立分離的文件。 webpack是需要自己編寫自己需要的一個配置對象，取決你如何使用webpack,下面指定了所有的可用的配置選項。參考文檔：https://doc.webpack-china.org... we...

鄒強 2019-08-21 18:43 評論0 收藏0
webpack從零開始搭建多頁面（一）:webpack起步到運行一個簡單的demo

摘要：文件夾用來存放供瀏覽器讀取的文件，這個是打包成的文件。在文件下手動建立一個文件，并寫入下面的代碼。配置出口文件的地址在版本后，支持多出口配置。可以防止不同操作系統之間的文件路徑問題，并且可以使用相對路徑按照預期工作。搭建webpack_demo1項目，使其運行起來 webpack的強大就不介紹了，我們直接動手做起來，我們從零開始一步步搭建一個多頁面的系統，多參考webpack中文文檔...

EsgynChina 2019-08-26 11:39 評論0 收藏0
webpack搭建多頁面系統（一）：對webpack 構建工具的理解

摘要：前端模塊化開發的問題大家可以參照文獻對等文件的管理在頁面完成之后，一般要對進行打包壓縮，通常要借助于第三方的工具。是基于環境搭建的，首先自行安裝。為什么使用webpack構建工具？ 1、開發效率方面：在一般的開發過程中，分發好任務后，每個人完成自己單獨的頁面，如果有的人開發完成之后，接手別人的任務，就有可能造成開發時候的沖突。如果利用模塊化開發，就可以避免這一問題。前端模塊化開發...

Kaede 2019-08-01 18:20 評論0 收藏0
webpack搭建多頁面系統（一）：對webpack 構建工具的理解

摘要：前端模塊化開發的問題大家可以參照文獻對等文件的管理在頁面完成之后，一般要對進行打包壓縮，通常要借助于第三方的工具。是基于環境搭建的，首先自行安裝。為什么使用webpack構建工具？ 1、開發效率方面：在一般的開發過程中，分發好任務后，每個人完成自己單獨的頁面，如果有的人開發完成之后，接手別人的任務，就有可能造成開發時候的沖突。如果利用模塊化開發，就可以避免這一問題。前端模塊化開發...

JinB 2019-08-21 18:40 評論0 收藏0
手動搭建vue+node單頁面（一）

摘要：這里提供手動搭建單頁面開發生產環境，并使用寫后臺代碼，僅供小白參考代碼雖然沒多少，但牽扯的知識很多，需要逐個研究后續內容手動搭建單頁面二項目地址內容提要，這一章會從到開發環境，生產環境的搭建思路先實現單頁面的然后實現服務下的開發環境再實這里提供手動搭建vue單頁面開發生產環境，并使用node寫后臺代碼，僅供小白參考；代碼雖然沒多少，但牽扯的知識很多，需要逐個研究；后續內容《手動搭建...

The question 2019-08-22 16:17 評論0 收藏0