webpack4系列教程（四）：处理项目中的资源文件（一）

Taste 发布于2019-08-23 14:41 / 1523人阅读

摘要：在目录下新建文件夹，新建组件编写代码修改标题内容底部此时执行会报错无法解析文件，因此我们需要安装对应的并修改添加属性再次执行就不会报错了，打开可以看到我们的组件已经成功渲染出来了。

1. Loader的使用

之前的博文已经介绍了Loader的概念以及用法，webpack 可以使用 loader 来预处理文件，这允许你打包除 JavaScript 之外的任何静态资源，甚至允许你直接在 JavaScript 模块中 import CSS文件。

在 src 目录下新建 components 文件夹，新建 modal 组件：

编写代码：




    
        <%= title %>
    
    
        <%= content %>
    
    
        <%= footer %>

// 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: "标题",
    content: "内容",
    footer: "底部"
  })
}

const app = new App()

此时执行 npm run build 会报错：

webpack 无法解析 .ejs 文件，因此我们需要安装对应的 loader：

npm i ejs-loader -D

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

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

再次执行 npm run build 就不会报错了，打开 dist/index.html ：

可以看到我们的 modal 组件已经成功渲染出来了。

2. 处理项目中的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"

再次执行 npm run build ，打开 dist/index.html：

CSS样式已经通过 style 标签添加到页面上了；

3. 处理项目中的图片

在src目录下创建 assets/img ，放入两张图片

给 modal 添加一个背景图的样式：

.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无法处理图片资源，所以也要安装对应的 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 ，可见图片已经显示出来了：

仔细查看这张图片可以发现，它是通过 DataURL 加载出来的：

下面更改 url-loader 的配置，limit表示在文件大小低于指定值时，返回一个DataURL

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

再次打包后，图片会以文件形式展示出来：

云服务器 GPU云服务器 webpack4教程系列一 a系列处理器gpu linux系列教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100985.html

webpack4系列教程（十）：总结

摘要：传送门系列教程一初识系列教程二创建项目，打包第一个文件系列教程三自动生成项目中的文件系列教程四处理项目中的资源文件一系列教程五处理项目中的资源文件二系列教程六使用分割代码系列教程七使用系列教程八使用审查代码系列教程九开发环境和生产环境在前端开发日益复杂的今天，我们需要一个工具来帮助我们管理项目资源，打包、编译、预处理、后处理等等。webpack的出现无疑是前端开发者的福音，我的博文只...

hqman 2019-08-26 13:29 评论0 收藏0
webpack-demos：全网最贴心webpack系列教程和配套代码

摘要：全网最贴心系列教程和配套代码欢迎关注个人技术博客。所以我花费了个多月整理了这份教程，一共分成节，每节都有讲解，并且准备了配套代码。奈何深感水平不够，只有一腔热情，所以直接开放了教程和源码。 webpack-demos：全网最贴心 webpack 系列教程和配套代码欢迎关注个人技术博客：godbmw.com。每周 1 篇原创技术分享！开源教程(webpack、设计模式）、面试刷题（偏前...

LMou 2019-08-23 12:25 评论0 收藏0
webpack4系列教程（五）：处理项目中的资源文件（二）

摘要：首先安装在中引入并添加修改和的之后，可见中引入了一个文件也正是我们在和中的代码可以帮助我们处理，如自动添加浏览器前缀。在根目录下创建修改和的在中加入打包之后打开，可见浏览器前缀已经加上了 1. 在项目中使用 less 在 src/assets/ 下新建 common.less ： body{ background: #fafafa; padding: 20px; } show...

Channe 2019-08-23 14:42 评论0 收藏0
webpack4系列教程（一）：初识webpack

摘要：当处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个。而可以将所有类型的文件处理成能够识别的有效模块，然后再对其进行处理。 1. 什么是webpack 先来看看官网对webpack的介绍：本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack ...

TigerChain 2019-08-23 14:37 评论0 收藏0
webpack4系列教程（二）：创建项目，打包第一个JS文件

摘要：对于大多数项目，建议本地安装。打包第一个文件首先，我们在根目录下创建一个文件和一个文件夹。而中的属性，表示入口的名称，此处就是。接下来打开文件，来编写一条命令执行的打包。 1. 创建项目 1.1 初始化一个项目首先安装nodejs，打开 nodeJs官网直接下载安装即可，安装完毕后打开命令行工具，进入你的项目文件夹，执行 npm init 进行项目的初始化： showImg(htt...

waterc 2019-08-23 14:40 评论0 收藏0