国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack基本應(yīng)用

Jackwoo / 783人閱讀

摘要：介紹官網(wǎng)入門(mén)文檔本質(zhì)上，是一個(gè)現(xiàn)代應(yīng)用程序的靜態(tài)模塊打包器。當(dāng)處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè)模塊。

介紹

官網(wǎng)：https://www.webpackjs.com/
入門(mén)文檔：http://www.runoob.com/w3cnote...
本質(zhì)上，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴關(guān)系圖，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) bundle（模塊）。

簡(jiǎn)言之就是把各個(gè)JS CSS IMG 都進(jìn)行打包合并，最終項(xiàng)目只需引用一個(gè)build.min.js文件即可

安裝

打開(kāi)控制器，進(jìn)入到項(xiàng)目根目錄：

npm install webpack -g （-g是全局安裝）

npm init （初始化項(xiàng)目）

npm install webpack -g （安裝webpack）
npm install webpack-command -g （安裝webpack的依賴項(xiàng)）

最簡(jiǎn)單實(shí)例

創(chuàng)建mydemo目錄,并在該目錄下創(chuàng)建如下結(jié)構(gòu)：
mydemo
--dist
--src
----js
------index.js
----css
------app.css
----img
------1.jpg
--webpack.config.js
--index.html

index內(nèi)容:
webpack.config.js內(nèi)容： 
module.exports = {
    mode: "production",
    entry: [
        "./src/js/index.js"
    ],
    output: {
        filename: "build.min.js"
    },
}
src/js/index.js： 
document.write("It works.");
運(yùn)行：

webpack

瀏覽器訪問(wèn)index.html

CSS加載打包

這里需要用到webpack的加載器
npm install -g css-loader style-loader

src/css/app.css:

src/js/index.js:

webpack.config.js文件配置：

運(yùn)行：webpack

CSS中引入IMG加載打包

用到兩個(gè)加載器
npm install url-loader -g
npm install file-loader -g

CSS中引入圖片要注意從根目錄寫(xiě)了，而不能用../

src/css/app.css:

webpack.config.js文件配置：

運(yùn)行webpack:

這里的圖片資源路徑可以搭配CDN使用

HTML中引入IMG加載打包

npm install html-withimg-loader -g

webpack.config.js文件配置：

index.html:

運(yùn)行webpack:

實(shí)施刷新（監(jiān)聽(tīng)）

npx webpack --mode development --watch

一旦修改源文件，會(huì)看到控制臺(tái)顯示

此時(shí)再刷新瀏覽器就會(huì)看到新的修改

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/95989.html

相關(guān)文章

  • Webpack基本功能理解以及使用

    摘要：在這個(gè)過(guò)程中，會(huì)用到一些解析工具用來(lái)預(yù)處理一些模塊以及拓展語(yǔ)言例如這些工具的配置使用都是在中完成的。屬性，表示進(jìn)行轉(zhuǎn)換時(shí)，應(yīng)該使用哪個(gè)。插件接口功能極其強(qiáng)大，可以用來(lái)處理各種各樣的任務(wù)。 對(duì)于前端工程化，webpack一個(gè)神奇的工具，既然是個(gè)神奇的工具。那我們保留我們的好奇心，來(lái)聊一聊它，首先我們要搞清楚webpack到底是用來(lái)解決什么問(wèn)題的，然后我們來(lái)看看它到底是怎么做的，最后來(lái)看看...

    KnewOne 評(píng)論0 收藏0

  • Webpack的坑位整理

    摘要：在尋找相對(duì)路徑的文件時(shí)會(huì)以為根目錄，默認(rèn)為執(zhí)行啟動(dòng)時(shí)所在的當(dāng)前目錄。在文件被添加到依賴圖中時(shí)，將其轉(zhuǎn)換稱為了模塊。配置中的兩個(gè)目標(biāo)。僅限高級(jí)用途，默認(rèn)情況下自動(dòng)生成生成文件的文件名。webpack webpack現(xiàn)在是主要的打包工具了，現(xiàn)在網(wǎng)絡(luò)上也有很多資料可以學(xué)習(xí)了。這里主要整理了一些基礎(chǔ)概念，但沒(méi)有所有的寫(xiě)，只是把之前遇到的問(wèn)題記錄了一下。 本文的原文在我的博客中：github.com...

    lidashuang 評(píng)論0 收藏0

  • webpack配合vue.js實(shí)現(xiàn)完整的單頁(yè)面demo

    摘要：本篇文章主要是我在開(kāi)發(fā)前研究了的單頁(yè)面應(yīng)用，因?yàn)樾枰玫降模源_保安裝了，建議官網(wǎng)安裝最新的穩(wěn)定版本。本文章只是和大家探討怎么利用配合做一個(gè)單頁(yè)面應(yīng)用，具體關(guān)于里面的內(nèi)容怎么寫(xiě)并不在本篇文章的介紹范圍。 本篇文章主要是我在開(kāi)發(fā)前研究了webpack+vue.js的單頁(yè)面應(yīng)用，因?yàn)樾枰玫絥ode的npm，所以確保安裝了node，建議官網(wǎng)安裝最新的穩(wěn)定版本。并且在項(xiàng)目中需要加載一些np...

    2450184176 評(píng)論0 收藏0

  • 【譯】一個(gè)小時(shí)搭建一個(gè)全棧Web應(yīng)用框架（上）

    摘要：初始項(xiàng)目設(shè)置我們將使用包管理器來(lái)處理依賴項(xiàng)。使用包管理器可以使您的項(xiàng)目依賴項(xiàng)保持最新?tīng)顟B(tài)，并能夠獲取和安裝最新的包。是小型應(yīng)用的最佳選擇之一。 翻譯：瘋狂的技術(shù)宅英文標(biāo)題：Creating a full-stack web application with Python, NPM, Webpack and React英文原文：https://codeburst.io/creating....

    wizChen 評(píng)論0 收藏0

  • 【譯】一個(gè)小時(shí)搭建一個(gè)全棧Web應(yīng)用框架（上）

    摘要：初始項(xiàng)目設(shè)置我們將使用包管理器來(lái)處理依賴項(xiàng)。使用包管理器可以使您的項(xiàng)目依賴項(xiàng)保持最新?tīng)顟B(tài)，并能夠獲取和安裝最新的包。是小型應(yīng)用的最佳選擇之一。 翻譯：瘋狂的技術(shù)宅英文標(biāo)題：Creating a full-stack web application with Python, NPM, Webpack and React英文原文：https://codeburst.io/creating....

    Doyle 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<