webpack 静态资源管理

最新推荐文章于 2024-06-13 10:29:49 发布
最新推荐文章于 2024-06-13 10:29:49 发布
阅读量382 收藏
点赞数
文章标签： webpack json javascript ViewUI
原文链接：https://juejin.im/post/5c8a26406fb9a049d61e698f
版权

webpack 静态资源管理

GitHub 学习 Demo。

对于 js 资源，基于JavaScript模块，webpack 将动态捆绑所有依赖项（创建所谓的依赖图）。 这很好，因为现在每个模块都明确声明了它的依赖关系，这样可以避免捆绑未使用的模块。

webpack 的 loader 可以给项目的静态资源带来同样的功能。
以配置 css 资源为起点，来展开 webpack 对静态资源的配置。

载入 CSS 资源

修改一下之前的项目：
# dist/index.html

  <!doctype html>
  <html>
    <head>
-    <title>Getting Started</title>
+    <title>Asset Management</title>
    </head>
    <body>
-     <script src="./main.js"></script>
+     <script src="./bundle.js"></script>
    </body>
  </html>
  
# webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
-     filename: 'main.js',
+     filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
Loadi
复制代码
配置 loader
  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };
复制代码

webpack使用正则表达式来确定它应该查找哪些文件并提供给特定的加载器。 在这种情况下，任何以.css结尾的文件都将被提供给 style-loader 和 css-loader 。

这使您可以将./style.css导入到依赖于该样式的文件中。 现在，当运行bundle.js时，会将对应的 css 通过<style>标签将插入到html文件的<head>中。

安装依赖
npm install --save-dev style-loader css-loader
复制代码
添加 css 代码到项目中
  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- style.css
    |- index.js
  |- /node_modules

# src/style.css

.hello {
  color: red;
}

# src/index.js

  import _ from 'lodash';
+ import './style.css';

  function component() {
    var element = document.createElement('div');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   element.classList.add('hello');

    return element;
  }

  document.body.appendChild(component());
复制代码
编译
npm run build
# npx webpack
复制代码

请检查页面（不要查看页面源，因为它不会显示结果）并查看页面的head标签。 它应该包含我们在index.js中导入的样式块。

tips:
请注意，您可以（在大多数情况下）最小化css，以便在生产中获得更好的加载时间。 最重要的是，加载器几乎存在于你能想到的任何CSS风格 - postcss，sass, less等等。

载入 images 资源

安装依赖
npm install --save-dev file-loader
复制代码
修改一下之前的项目
 webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

# src/style.css
  .hello {
    color: red;
+   background: url('./icon.png');
  }

# src/index.js
  import _ from 'lodash';
  import './style.css';
+ import Icon from './icon.png';

  function component() {
    var element = document.createElement('div');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

+   // Add the image to our existing div.
+   var myIcon = new Image();
+   myIcon.src = Icon;
+
+   element.appendChild(myIcon);

    return element;
  }

  document.body.appendChild(component());

# webpack-config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           'file-loader'
+         ]
+       }
      ]
    }
  };
复制代码

现在，当您从./my-image.png导入 MyImage 时，该图像将被处理并添加到您的输出目录中，并且 MyImage 变量将包含处理后该图像的最终 URL。 当使用css-loader时，如上所示，CSS 中的url（'./ my-image.png'）将发生类似的过程。 加载程序将识别这是一个本地文件，并将./my-image.png路径替换为输出目录中图像的最终路径。 html-loader以相同的方式处理<img src =“./ my-image.png”/>。

编译
npm run build
# npx webpack
复制代码

如果一切顺利，您现在应该将您的图标视为重复背景，以及我们的Hello webpack文本旁边的img元素。 如果检查此元素，您将看到实际文件名已更改为5c999da72346a995e7e2718865d019c8.png。 这意味着webpack在src文件夹中找到了我们的文件并进行了处理！

tips :
下一步是缩小和优化您的图像。 查看image-webpack-loader和url-loader，了解有关如何增强图像加载过程的更多信息。

载入 Fonts

那么像字体这样的其他资产呢？ 文件和URL加载器将获取您通过它们加载的任何文件，并将其输出到您的构建目录。 这意味着我们可以将它们用于任何类型的文件，包括字体。 让我们更新我们的webpack.config.js来处理字体文件：

修改项目
  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- my-font.woff
+   |- my-font.woff2
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

# webpack-config.js 

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
+       {
+         test: /\.(woff|woff2|eot|ttf|otf)$/,
+         use: [
+           'file-loader'
+         ]
+       }
      ]
    }
  };
复制代码

载入 Data

可以加载的另一个有用资产是数据，如JSON文件，CSV，TSV和XML。 对JSON的支持实际上是内置的，类似于 NodeJS，这意味着import Data from'./data.json'导入数据默认情况将起作用。 要导入CSV，TSV和XML，您可以使用csv-loader和xml-loader。 让我们处理所有三个：

安装依赖
npm install --save-dev csv-loader xml-loader
复制代码
修改项目
  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- data.xml
    |- my-font.woff
    |- my-font.woff2
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules
  
# src/data.xml

<?xml version="1.0" encoding="UTF-8"?>
<note>
  <to>Mary</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Call Cindy on Tuesday</body>
</note>

# src/index.js

  import _ from 'lodash';
  import './style.css';
  import Icon from './icon.png';
+ import Data from './data.xml';

  function component() {
    var element = document.createElement('div');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

    // Add the image to our existing div.
    var myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

+   console.log(Data);

    return element;
  }

  document.body.appendChild(component());

# webpack.config.js

 const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
        },
        {
          test: /\.(png|svg|jpg|gif)$/,
          use: [
            'file-loader'
          ]
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            'file-loader'
          ]
        },
+       {
+         test: /\.(csv|tsv)$/,
+         use: [
+           'csv-loader'
+         ]
+       },
+       {
+         test: /\.xml$/,
+         use: [
+           'xml-loader'
+         ]
+       }
      ]
    }
  };
复制代码

现在，您可以导入这四种类型的数据中的任何一种（JSON，CSV，TSV，XML），并且导入它的Data变量将包含已解析的JSON以便于使用。

全局资源 Global Assets

上述所有内容中最酷的部分是，以这种方式加载资产允许您以更直观的方式将模块和资产组合在一起。 您可以使用它们的代码对资产进行分组，而不是依赖包含所有内容的全局/资产目录。 例如，像这样的结构非常有用：

修改项目
- |- /assets
+ |– /components
+ |  |– /my-component
+ |  |  |– index.jsx
+ |  |  |– index.css
+ |  |  |– icon.svg
+ |  |  |– img.png
复制代码

这种设置会更加的方便，因为现在组件所有内容都紧密耦合。 假设你想在另一个项目中使用/ my-component，只需复制或移动到那里的/ components目录即可。 只要有相同的 webpack 配置和 依赖就可以了。

但是，假设您已陷入旧方式，或者您拥有多个组件（视图，模板，模块等）之间共享的资产。 仍然可以将这些资产存储在基本目录中，甚至可以使用别名来使它们更容易导入。

NEXT

对于下一个指南，我们不会使用我们在本指南中使用的所有不同资产，所以让我们做一些清理，以便我们为下一部分指南输出管理做好准备：

修改项目
  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
-   |- data.xml
-   |- my-font.woff
-   |- my-font.woff2
-   |- icon.png
-   |- style.css
    |- index.js
  |- /node_modules
  
# webpack.config.js

 const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
-   module: {
-     rules: [
-       {
-         test: /\.css$/,
-         use: [
-           'style-loader',
-           'css-loader'
-         ]
-       },
-       {
-         test: /\.(png|svg|jpg|gif)$/,
-         use: [
-           'file-loader'
-         ]
-       },
-       {
-         test: /\.(woff|woff2|eot|ttf|otf)$/,
-         use: [
-           'file-loader'
-         ]
-       },
-       {
-         test: /\.(csv|tsv)$/,
-         use: [
-           'csv-loader'
-         ]
-       },
-       {
-         test: /\.xml$/,
-         use: [
-           'xml-loader'
-         ]
-       }
-     ]
-   }
  };

# src/index.js

  import _ from 'lodash';
- import './style.css';
- import Icon from './icon.png';
- import Data from './data.xml';
-
  function component() {
    var element = document.createElement('div');
-
-   // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
-   element.classList.add('hello');
-
-   // Add the image to our existing div.
-   var myIcon = new Image();
-   myIcon.src = Icon;
-
-   element.appendChild(myIcon);
-
-   console.log(Data);

    return element;
  }

  document.body.appendChild(component());
复制代码

转载于:https://juejin.im/post/5c8a26406fb9a049d61e698f

weixin_33686714
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack实现静态资源缓存
miaomiao_1024的博客
02-22 2062
webpack如何实现静态资源缓存，相关配置几原理
全栈开发实战｜Vue进阶——使用静态模块打包工具webpack
不断学习，不断进步，提高自己
06-24 1205
简单介绍目前热门的JavaScript应用程序的静态模块打包工具webpack。
webpack处理vue项目静态资源及public/static/assets目录的区别
最新发布
jsPao的博客
06-13 530
Vue 静态资源可以通过两种方式进行处理：1、在 JavaScript 被导入或在 template/CSS 中通过被引用。这类引用。2、放置在public目录下或。这类资源将会，而。在项目中的webpack.config.js等项目配置文件中使用的require属于nodejs范畴，而进入index.js后，加载的组件中的require都属于webpack的解析范畴。
gltf-loader-2:用于.gltf文件的Webpack加载器，应自动捆绑所有引用的文件
05-19
Webpack GLTF加载器2 用于.gltf文件的webpack加载器应自动捆绑所有引用的文件。 基于（ 的作品，但几乎从零开始重写。 这是他的原始加载器，在我尝试时对我不起作用，因此我决定重写它。 （截至2018年10月5日，它也没有有效的github存储库供稿） 警告：这几乎是未经测试的Alpha版本，对构造表示赞赏 Webpack配置 rules: [ // IMPORTANT: if you have a loader for Image files (you would, normally) // you NEED to add an exclude option IN IT for GLTF images { // following is an example of YOUR loader config test : / \. ( p
关于webpack如何存放静态资源
OHRadiance的专栏
05-19 8719
启简明扼要记一下。 之前涉及到vue项目中设置背景图片的问题。 找来找去，发现只有backstretch最靠谱。 进而引入jquery，又涉及到了“vue中怎么引入jquery”，上篇博文就是讲这个的。 最后一切都搞定后，问题出现在backstretch无法获取到图片。 承你可以在组件中直接引入本地的图片，如：<img src="../assets/logo.png"> 但在backstretch中
webpack4 处理静态资源
zhu562002124的博客
05-28 1795
需要处理的静态资源： 图片 字体 json 文件 视频 音频 图片处压缩 图片压缩需要使用第三方插件，这里我使用 image-webpack-loader 来做图片的压缩处理，实现方式并不复杂，只需要在原来的 file-loader 或者 url-loader 下面加一个处理器即可，下面直接上配置代码： { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, use: [ { loader: 'url-loader',
webpack管理资源demo
03-16
在"webpack管理资源demo"中，我们将探讨如何利用Webpack来处理CSS、图片、字体以及数据这四类资源。 1. **加载CSS**： Webpack 可以通过 `style-loader` 和 `css-loader` 插件来处理CSS文件。`css-loader` 负责将...
vue-cli与webpack处理静态资源的方法及webpack打包的坑
08-27
然而，处理静态资源是Web开发中常见的挑战，Vue-cli与Webpack也不例外。本文将深入探讨这两者如何处理静态资源，以及在打包过程中可能遇到的问题。 首先，了解Vue-cli中处理静态资源的基本方法。在Vue项目中，我们...
webpack静态多页面构建工具
08-10
8. **静态资源管理**：Webpack 可以帮助我们管理和优化静态资源，比如图片压缩、字体文件处理等。 9. **Source Map**：在开发过程中，Source Map能帮助开发者在浏览器的调试工具中找到源代码的位置，而不是转换后的...
Webpack常见静态资源处理-模块加载器（Loaders）+ExtractTextPlugin插件
08-30
在 Webpack 中，所有的静态资源都被认为是模块，例如 JavaScript、CSS、LESS、TypeScript、JSX、CoffeeScript、图片等等，Webpack 通过引入加载器的概念对其进行统一管理。每一种资源都可以通过对应的加载器处理成...
详解vue-cli与webpack结合如何处理静态资源
08-29
在使用Vue CLI创建的项目中，处理静态资源是至关重要的一步，这涉及到Webpack的配置和资源的引用规则。本文将深入探讨这两个工具如何协同处理静态资源。 首先，我们有两个主要的静态资源目录：`src/assets` 和 `...
webpack配置项目加载静态资源
冰水zzy的博客
02-04 9968
在上篇文章中，我分享了vue-loader与webpack项目配置，链接 http://blog.csdn.net/zzy123654321/article/details/79250644 这篇文章中，我将分享如何加载页面所需的各类静态资源 1.配置loader 打开webpack.config.js文件，在module下添加rules //css相关配置 {
使用 webpack 对项目 静态资源 进行打包
yssa1125001的博客
05-11 2739
webpack能处理前端模块间的引用关系并将静态资源打包成一个文件，减少了页面请求 初始化一个项目： npm init -y 安装webpack： npm install -g webpack webpack-cli 有三个js文件放置在src目录下： common.js： export function print(message){ document.write(message); } utils.js： export function sum(a,b){ re
基于webpack 4静态资源打包压缩配置
jagger_guo的博客
11-04 1507
需求： 1. 实现静态资源js/css/less的打包、压缩； 2. html文件加载对应的js/css/img文件； 配置： 工程github仓库地址 工程目录结构如下： 使用webpack4 涉及到的文件配置如下： package.json { "name": "webpackproject", "vers...
webpack打包 图片，样式 等静态资源文件
weixin_45966674的博客
01-27 1252
其实前面的都不足以展示出webpack在众打包工具中的优势 webpack的优势在于 可以打包大规模项目文件 以及静态资源文件 这才是webpack独有的优势 首先我们来创建一个webpack项目 找一个文件夹 在终端中输入 npm init 根据提示操作 就会生成一个package.json 将webpack引入进来 npm install webpack webpack-cli --save-dev 然后在终端输入 npm install html-webpack-plugin --save
webpack4 打包静态资源
weixin_30437481的博客
07-22 1260
demo 代码点此，开始之前，先做点准备工作。 准备工作 准备一个空文件夹，然后执行下列命令： npm init -y npm i -D webpack webpack-cli 然后创建一个 dist 目录，并在里面创建一个 indedx.html： <!DOCTYPE html> <html lang="en"> <head> <meta ...
webpack - 静态模块打包器
renpinghao的专栏
07-02 724
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle（捆）。...
全面掌握Webpack4.0 (六)使用loader打包静态资源（样式篇-上）（持续更新…
weixin_40285008的博客
12-08 230
通过前面文章的学习大家应该学会了如何打包图片文件，那么本篇文章给大家讲一下如何使用loader打包样式文件。 我们接着使用之前的demo项目给大家举例，首先我们在src文件夹下新建一个css文件，取名就叫“wechat.css”(因为我们使用的示例图片是一个微信logo，所以暂时就取名叫wechat.css吧，当然了这不是重点)，然后我们在wechat.css中给定一个图片的样式如下图所示： 然后我们在index.js文件中将这个样式引入进去，并把这个类添加到图片对象上： 之前给大家说过，webpack
Webpack 常见静态资源处理 - 模块加载器（Loaders）+ExtractTextPlugin插件
weixin_30877227的博客
09-01 308
Webpack 常见静态资源处理 - 模块加载器（Loaders）+ExtractTextPlugin插件 webpack系列目录 webpack 系列 一：模块系统的演进 webpack 系列 二：webpack 介绍&安装 webpack 系列 三：webpack 如何集成第三方js库 webpack 系列 四：webpack 多页面支持 & 公共组件单独打包 webpack...
webpack管理zip资源
01-05
webpack是一个功能强大的前端资源打包工具，它不仅可以管理JavaScript、CSS、图片等静态资源，还可以管理zip资源。 首先，在webpack配置文件中，我们可以通过配置相应的loader来处理zip资源。可以使用file-loader...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值