成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

BlackFlagBin / 2785人閱讀

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

webpack配置文件的理解

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


在我們的cmd命令行中，開發(fā)時：執(zhí)行npm run dev;將執(zhí)行我們的webpack.config.js文件；
最終上線時：執(zhí)行npm run build;將執(zhí)行我們的webpack.build.config.js文件；兩者的內(nèi)容有細微的差別。
這是對兩個配置文件的理解。
每次編譯代碼時，手動的npm run dev 就會變得有點麻煩。
webpack提供了幾個選項，可以幫助我們在代碼發(fā)生變化后自動編譯代碼：
1、webpack"s Watch Mode
2、webpack-dev-server
3、webpack-dev-middleware
多數(shù)場景中，使用webpack-dev-server。
參考官方文檔：https://doc.webpack-china.org...
在我的項目中使用的是webpack-dev-sever。提供了一個簡單的web服務器，并且能夠?qū)崟r重新加載（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"}, #以根‘/’開始，以根‘/’結(jié)尾的請求，重定向到‘/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的兩種不同模式之間的切換。默認啟用內(nèi)聯(lián)模式（
    inline mode）,處理實時重載的腳本被插入到你的包（bundle）中，并且構(gòu)建消息將會出現(xiàn)在瀏覽器控制臺。
    progress:boolen;用于命令行工具，將運行進度輸出到控制臺。
    port:number;指定要監(jiān)聽請求的端口號
    index:string;索引文件的文件名
    host:string;指定使用一個host.默認是localhost。ip地址
    proxy:object;代理配置,代理后端開發(fā)服務器API,并且希望在同域名下發(fā)送API請求。
    
    
}

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90711.html

相關(guān)文章

  • webpack搭建多頁面系統(tǒng)（三） 理解webpack.config.js的四個核心概念

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

    鄒強 評論0 收藏0

  • webpack從零開始搭建多頁面（一）:webpack起步到運行一個簡單的demo

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

    EsgynChina 評論0 收藏0

  • webpack搭建多頁面系統(tǒng)（一）：對webpack 構(gòu)建工具的理解

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

    Kaede 評論0 收藏0

  • webpack搭建多頁面系統(tǒng)（一）：對webpack 構(gòu)建工具的理解

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

    JinB 評論0 收藏0

  • 手動搭建vue+node單頁面（一）

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

    The question 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<