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

資訊專欄INFORMATION COLUMN

webpack4系列教程（四）：處理項(xiàng)目中的資源文件（一）

Taste / 1524人閱讀

摘要：在目錄下新建文件夾，新建組件編寫代碼修改標(biāo)題內(nèi)容底部此時(shí)執(zhí)行會報(bào)錯(cuò)無法解析文件，因此我們需要安裝對應(yīng)的并修改添加屬性再次執(zhí)行就不會報(bào)錯(cuò)了，打開可以看到我們的組件已經(jīng)成功渲染出來了。

?1. Loader的使用

之前的博文已經(jīng)介紹了Loader的概念以及用法，webpack 可以使用 loader?來預(yù)處理文件，這允許你打包除 JavaScript 之外的任何靜態(tài)資源，?甚至允許你直接在 JavaScript 模塊中 import?CSS文件。

在 src 目錄下新建 components 文件夾，新建 modal 組件：

?

編寫代碼：





// modal.js
import template from "./modal.ejs"

export default function modal () {
  return {
    name: "modal",
    template: template
  }
}

修改 main.js：

import Modal from "./components/modal/modal"

const App = function () {
  let div = document.createElement("div")
  div.setAttribute("id", "app")
  document.body.appendChild(div)
  let dom = document.getElementById("app")
  let modal = new Modal()
  dom.innerHTML = modal.template({
    title: "標(biāo)題",
    content: "內(nèi)容",
    footer: "底部"
  })
}

const app = new App()

?此時(shí)執(zhí)行 npm run build 會報(bào)錯(cuò)?：

?

webpack 無法解析 .ejs 文件，因此我們需要安裝對應(yīng)的 loader：

npm i ejs-loader -D

?并修改 webpack.config.js 添加 module 屬性：

module: {
    rules: [
      {
        test: /.ejs$/,
        use: ["ejs-loader"]
      }
    ]
  }

再次執(zhí)行 npm run build 就不會報(bào)錯(cuò)了，打開 dist/index.html ：

?

?

可以看到我們的 modal 組件已經(jīng)成功渲染出來了。?

2. 處理項(xiàng)目中的CSS文件

在 modal.css 中加入樣式代碼：

.modal-parent{
    width: 500px;
    height: auto;
    border: 1px solid #ffffd;
    border-radius: 10px;
}
.modal-title{
    font-size: 20px;
    text-align: center;
    padding: 10px;
    margin: 0;
}
.modal-body{
    border: 1px solid #ffffd;
    border-left: 0;
    border-right: 0;
    padding: 10px;
}
.modal-footer{
    padding: 10px;
}

安裝 css-loader 和 style-loader：

npm i css-loader style-loader -D

?修改webpack.config.js 中的 module.rules ，添加css-loader 和 style-loader：

module: {
    rules: [
      {
        test: /.ejs$/,
        use: ["ejs-loader"]
      },
      {
        test: /.css$/,
        use: [
          "style-loader",
          "css-loader"
        ]
      }
    ]
  },

在 modal.js 中引入 modal.css：

import "./modal.css"

再次執(zhí)行 npm run build ，打開 dist/index.html：

?

CSS樣式已經(jīng)通過 style 標(biāo)簽添加到頁面上了；

?

3. 處理項(xiàng)目中的圖片?

在src目錄下創(chuàng)建 assets/img ，放入兩張圖片

?

?

給 modal 添加一個(gè)背景圖的樣式：

.modal-body{
    border: 1px solid #ffffd;
    border-left: 0;
    border-right: 0;
    padding: 10px;
    background: url("../../assets/img/bg.jpg");
    color: #fff;
    height: 500px;
}

由于webpack無法處理圖片資源，所以也要安裝對應(yīng)的 loader

npm install --save-dev url-loader file-loader

在 webpack.config.js 中添加 loader?

rules: [
      {
        test: /.ejs$/,
        use: ["ejs-loader"]
      },
      {
        test: /.css$/,
        use: [
          "style-loader",
          "css-loader"
        ]
      },
      {
        test: /.(jpg|jpeg|png|gif|svg)$/,
        use: "url-loader"
      }
    ]

打包代碼之后，在瀏覽器打開 dist/index.html ，可見圖片已經(jīng)顯示出來了：

?

仔細(xì)查看這張圖片可以發(fā)現(xiàn)，它是通過 DataURL 加載出來的：

?

下面更改 url-loader 的配置，limit表示在文件大小低于指定值時(shí)，返回一個(gè)DataURL

{
        test: /.(jpg|jpeg|png|gif|svg)$/,
        use:  [
          {
            loader: "url-loader",
            options: {
              name: "[name]-[hash:5].[ext]",
              limit: 1024
            }
          }
        ]
      }

再次打包后，圖片會以文件形式展示出來：

?

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

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

相關(guān)文章

  • webpack4系列教程（十）：總結(jié)

    摘要：傳送門系列教程一初識系列教程二創(chuàng)建項(xiàng)目，打包第一個(gè)文件系列教程三自動生成項(xiàng)目中的文件系列教程四處理項(xiàng)目中的資源文件一系列教程五處理項(xiàng)目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開發(fā)環(huán)境和生產(chǎn)環(huán)境 在前端開發(fā)日益復(fù)雜的今天，我們需要一個(gè)工具來幫助我們管理項(xiàng)目資源，打包、編譯、預(yù)處理、后處理等等。webpack的出現(xiàn)無疑是前端開發(fā)者的福音，我的博文只...

    hqman 評論0 收藏0

  • webpack-demos：全網(wǎng)最貼心webpack系列教程和配套代碼

    摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個(gè)人技術(shù)博客。所以我花費(fèi)了個(gè)多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個(gè)人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開源教程(webpack、設(shè)計(jì)模式）、面試刷題（偏前...

    LMou 評論0 收藏0

  • webpack4系列教程（五）：處理項(xiàng)目中的資源文件（二）

    摘要：首先安裝在中引入并添加修改和的之后，可見中引入了一個(gè)文件也正是我們在和中的代碼可以幫助我們處理，如自動添加瀏覽器前綴。在根目錄下創(chuàng)建修改和的在中加入打包之后打開，可見瀏覽器前綴已經(jīng)加上了 1. 在項(xiàng)目中使用 less? 在 src/assets/ 下新建 common.less ： body{ background: #fafafa; padding: 20px; } show...

    Channe 評論0 收藏0

  • webpack4系列教程（一）：初識webpack

    摘要：當(dāng)處理應(yīng)用程序時(shí)，它會遞歸地構(gòu)建一個(gè)依賴關(guān)系圖，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè)。而可以將所有類型的文件處理成能夠識別的有效模塊，然后再對其進(jìn)行處理。 1. 什么是webpack 先來看看官網(wǎng)對webpack的介紹?： 本質(zhì)上，webpack是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack ...

    TigerChain 評論0 收藏0

  • webpack4系列教程（二）：創(chuàng)建項(xiàng)目，打包第一個(gè)JS文件

    摘要：對于大多數(shù)項(xiàng)目，建議本地安裝。打包第一個(gè)文件首先，我們在根目錄下創(chuàng)建一個(gè)文件和一個(gè)文件夾。而中的屬性，表示入口的名稱，此處就是。接下來打開文件，來編寫一條命令執(zhí)行的打包。 1. 創(chuàng)建項(xiàng)目 1.1 初始化一個(gè)項(xiàng)目 首先安裝nodejs，打開?nodeJs官網(wǎng)?直接下載安裝即可，安裝完畢后打開命令行工具，進(jìn)入你的項(xiàng)目文件夾，執(zhí)行 npm init 進(jìn)行項(xiàng)目的初始化： showImg(htt...

    waterc 評論0 收藏0

發(fā)表評論

0條評論

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