webpack4系列教程(四):处理项目中的资源文件(一)

栏目: JavaScript · 发布时间: 5年前

内容简介:在 src 目录下新建 components 文件夹,新建 modal 组件:

1. Loader的使用

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

在 src 目录下新建 components 文件夹,新建 modal 组件:

webpack4系列教程(四):处理项目中的资源文件(一)

编写代码:

<!--modal.ejs-->

<div class="modal-parent">
    <div class="modal-header">
        <h3 class="modal-title"><%= title %></h3>
    </div>
    <div class="modal-body">
        <%= content %>
    </div>
    <div class="modal-footer">
        <%= footer %>
    </div>
</div>

// 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 会报错 :

webpack4系列教程(四):处理项目中的资源文件(一)

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 :

webpack4系列教程(四):处理项目中的资源文件(一)

webpack4系列教程(四):处理项目中的资源文件(一)

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

2. 处理项目中的CSS文件

在 modal.css 中加入样式代码:

.modal-parent{
    width: 500px;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 10px;
}
.modal-title{
    font-size: 20px;
    text-align: center;
    padding: 10px;
    margin: 0;
}
.modal-body{
    border: 1px solid #ddd;
    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:

webpack4系列教程(四):处理项目中的资源文件(一)

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

webpack4系列教程(四):处理项目中的资源文件(一)

3. 处理项目中的图片

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

webpack4系列教程(四):处理项目中的资源文件(一)

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

.modal-body{
    border: 1px solid #ddd;
    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 ,可见图片已经显示出来了:

webpack4系列教程(四):处理项目中的资源文件(一)

仔细查看这张图片可以发现,它是通过 DataURL 加载出来的: webpack4系列教程(四):处理项目中的资源文件(一)

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

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

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

webpack4系列教程(四):处理项目中的资源文件(一)

本人才疏学浅,不当之处欢迎批评指正


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

信息规则

信息规则

[美] 卡尔・夏皮罗(Carl Shapiro)、[美] 哈尔・瓦里安(Hal Varian) / 张帆 / 中国人民大学出版社 / 2000-6 / 33.00元

本书的目标是,运用网络经济中的经济学知识,从经济研究和作者自己的经验中提取出适合信息相关产业的经理们的知识。本书描述的思想、概念、模型和思考方法会帮助读者作出更好的决策。一起来看看 《信息规则》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

SHA 加密
SHA 加密

SHA 加密工具