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

資訊專欄INFORMATION COLUMN

文章3：webpack（3）

RyanQ / 3478人閱讀

摘要：中的會自動的替換中的，也即最后生成的文件叫做。基礎(chǔ)路徑后面介紹。都需要依賴模塊，我也裝啦。我將完整的復(fù)制一份，當(dāng)我在打開的時候，它又讓我重新在裝，以及，后來我全局安裝。

備注：說明（第一次寫的文章還沒有寫好就提交啦，這里我接著上篇文章繼續(xù)寫））
上編文章說道安裝webpack的順序不能改變  
下面繼續(xù)：
一：webpack的目錄結(jié)構(gòu)

附上本人webpackdemo01的代碼

下面介紹此時如果安裝成功之后的文件基本的目錄結(jié)構(gòu)

圖片都不知道有沒有顯示出來（寫的我一臉蒙）介紹目錄結(jié)構(gòu)

   -asset
    -dev
     -index.bundle.js
   -node_modules
   -src
    -index
     -config.json
     -greeter.js
     -index.js
   -views
    -index.html
   -package-lock.json
   -package.json
   -webpack.config.jsasset
    -dev
     -index.bundle.js
   -node_modules
   -src
    -index
     -config.json
     -greeter.js
     -index.js
   -views
    -index.html
   -package-lock.json
   -package.json
   -webpack.config.js
   //(以上就是基本目錄結(jié)構(gòu))

目錄結(jié)構(gòu)詳解

解釋上方的目錄結(jié)構(gòu)

asset/dev:（出口文件地址）該目錄是執(zhí)行webpack打包后生成文件的項目，其中包含打包后圖片，以及js文件

node_modules:模塊依賴文件，本人經(jīng)驗分享，這個文件通常占用的內(nèi)存比較大，通?？梢詫⑵浞旁诋?dāng)前目錄的上一級或者根目錄，但是在webpack里面只能放在與webpack.config.js同一級目錄，否則找不到該文件，自己寫node服務(wù)器的時候就可以放在上一層，具體自己也不太清楚，總之，放在該目錄就對啦

src：（入口文件地址）放入每一個生成文件的入口地址，我在網(wǎng)上找了許多的目錄結(jié)構(gòu)，我覺得這個目前在我看來最好，比如說我們最后生成index.bundel.js文件，而入口文件index.js所有的依賴我們都放在index文件夾中，而且只放與index.js相關(guān)的依賴文件，更體現(xiàn)出模塊化，當(dāng)然肯定有更好的目錄結(jié)構(gòu)，還望告之

views：最后生成的視圖（即HTML文件），里面只需引index.bundle,js文件即可，這種目錄結(jié)構(gòu)也是為webpack打包多頁面設(shè)計的

package-lock.json:該文件存儲的是所有依賴模塊的文件名，只需要執(zhí)行npm install 就可以為項目安裝所需模塊

package.json：基本配置（直接放圖啦）

//解釋：注意
 "script":{
   "start":"webpack"
  }
 /*
   這條指令還是很好的，當(dāng)你執(zhí)行打包操作時，你只需npm start就可以進行打包操作啦，
   npm start是一個特殊指令，了解更多可以參考官方手冊，如果是其他的指令，則需要
   使用 npm run [server/build/dev] 等，你還可以自定義其他的腳本（script）指令
   隨你高興 哈哈?。?！   
 */

webpack.config.js:(重要的目錄)，后面這個目錄會越來月豐富，內(nèi)容越來越多，基本配置直接看圖

解釋：圖中包含配置了打包過程中入口文件與出口文件entry（入口），output（出口）entry可以是鍵-值對（形如："key":"value"）語法，也可以是對象語法(形如："key":{"key":"value"})，我這里直接使用對象語法，方便后面的多頁面，注意：這里必須使用絕對路徑，使用__dirname或者使用path對象。"filename"："[name].bundle.js"中的[name]會自動的替換entry中的index，也即最后生成的文件叫做index.bundle.js。"publicPath":""基礎(chǔ)路徑 后面介紹。

npm官方文檔地址

二、webpack的基本使用步驟

前言
????前面已經(jīng)安裝了webpack以及解釋了webpackdemo的基本目錄結(jié)構(gòu)啦，下面就是使用webpack啦，最終的目的我們是生成一個index.bundle.js文件，然后引入html文件就可以啦

執(zhí)行操作
????npm start
????解釋：該操作相當(dāng)與執(zhí)行了webpack這條命令，官方手冊有好幾種執(zhí)行方式，但這種最簡單，其他集中直接去參考webpack手冊吧。webpack4.*都需要依賴webpack-cli模塊，我也裝啦。這里我遇到個問題。我將webpackdemo01完整的復(fù)制一份，當(dāng)我在打開的時候，它又讓我重新在裝webpack，以及webpack-cli，后來我全局安裝。發(fā)現(xiàn)還是不行，這不影響其他操作，只是我自己挖坑?。。?/p>

生成文件
????執(zhí)行完上面的操作，就會生成一個index.bundle.js文件在asset/dev/下，怎樣引入
直接上圖

三、style-loader/css-style/file-loader的加入

同時安裝style-loader css-loader file-loader三項的命令

    cnpm i style-loader css-style file-loader --save-dev
    /*
    使用cnpm裝模塊更快，效果與npm一樣，這是一個淘寶鏡像npm（推薦使用）
    不知道file-loader可不可以跟這兩個同時裝，反正另外兩個是可以的
    style-loader:
    css-loader:
    file-loader:
    */

四、webpack-dev-server的加入 五、未完待續(xù)

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

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

相關(guān)文章

  • webpack入門學(xué)習(xí)手記（二）

    摘要：例如現(xiàn)在的入門學(xué)習(xí)手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學(xué)習(xí)手記一，主要是介紹了的核心概念，是整個學(xué)習(xí)過程的基礎(chǔ)知識。新生成的類似如下入門學(xué)習(xí)手記因為生成的內(nèi)容過多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號：前端修煉之路，歡迎關(guān)注。 最近開始想要維護一個個人的公眾...

    Joyven 評論0 收藏0

  • vue-cli中配置webpack系列文章八 ------ 工程常用配置

    摘要：根據(jù)模板插入等生成最終生成的存放路徑，相對于的路徑模板路徑插入的位置，路徑設(shè)置屬性，屬性值是所在的路徑。配置后，在使用時將不再需要和進行引入，直接使用即可。 一 webpack.base.conf.js 1. entry 為入口文件 1.1 在此可以綁定 babel 墊片 處理ie兼容 1.2 我們大部分為單頁面應(yīng)用（SPA），配置多頁面也可以在此配置 2. resol...

    netScorpion 評論0 收藏0

  • 一個現(xiàn)代化的webpack工程初建

    摘要：一前言文章介紹了一個現(xiàn)代化的項目的環(huán)境是什么樣的。其中一個就是引用路徑的問題。擴展將單獨打包詳細(xì)介紹見這是一個插件，可以簡化創(chuàng)建文件以便為包提供服務(wù)。兩種環(huán)境的配置在中都支持的配置具體的默認(rèn)配置查詢可以移步這里的默認(rèn)設(shè)置。 一 前言 文章介紹了一個現(xiàn)代化的項目的webpack4環(huán)境是什么樣的。這里只是介紹了基礎(chǔ)的功能，如果需要詳細(xì)的相關(guān)只是可以去webpack官網(wǎng)去查閱。代碼地址：gi...

    MyFaith 評論0 收藏0

  • Webpack 4.0 發(fā)布:有哪些新特性？（譯）

    摘要：有哪些新特性有哪些改進學(xué)著使用這個新版本，來構(gòu)建更快的應(yīng)用吧。繼版本之后，花了將近八個月的時間來發(fā)布。的創(chuàng)始人之一，，建議用戶使用，以便使用最優(yōu)的性能，是因為源代碼使用了新特性。全新的插件系統(tǒng)配備了全新整改的插件系統(tǒng)。 本文原文地址：https://auth0.com/blog/webpac...第一次翻譯，不當(dāng)之處，歡迎指正 官方已經(jīng)發(fā)布了Webpack 4.0。有哪些新特性？有哪些...

    HitenDev 評論0 收藏0

  • webpack v2升級踩坑筆記

    摘要：從再到目前當(dāng)紅明星，前端模塊打包技術(shù)日新月異，在今年月份和月份左右接連更新了和版本為了減少冗余模塊，縮減文件大小，中也加入了關(guān)于的特征，可以查看知乎如何評價新引入的代碼優(yōu)化技術(shù)的討論。 從Grunt->gulp->webpack,再到目前當(dāng)紅明星rollup，前端模塊打包技術(shù)日新月異，webpack在今年1月份和6月份左右接連更新了v2和v3版本,為了減少冗余模塊，縮減bundle文件...

    JayChen 評論0 收藏0

發(fā)表評論

0條評論

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