Webpack入门 二.资源管理

最新推荐文章于 2024-09-07 23:02:49 发布
最新推荐文章于 2024-09-07 23:02:49 发布
阅读量124 收藏
点赞数
文章标签： webpack
原文链接：https://webpack.js.org/guides/asset-management/
版权

如果您从一开始就一直关注指南，那么现在您将看到一个显示“Hello webpack”的小项目。 现在让我们尝试合并一些其他资产，比如图像，看看如何处理它们。

在webpack之前，前端开发人员会使用grunt和gulp等工具来处理这些资产，并将它们从/ src文件夹移动到/ dist或/ build目录中。 同样的想法用于JavaScript模块，但像webpack这样的工具将动态捆绑所有依赖项（创建所谓的依赖图）。 这很好，因为现在每个模块都明确声明了它的依赖关系，我们将避免捆绑未使用的模块。

最酷的webpack功能之一是除了JavaScript之外，还可以包含任何其他类型的文件，其中有一个加载器。 这意味着上面列出的JavaScript相同的好处（例如显式依赖关系）可以应用于构建网站或Web应用程序所使用的所有内容。 让我们从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')
    }
  };

加载CSS

要从JavaScript模块中导入CSS文件，您需要在模块配置中安装并添加style-loader和css-loader：

npm install --save-dev style-loader css-loader

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'
+         ]
+       }
+     ]
+   }
  };

这使您可以将’./style.css’导入到依赖于该样式的文件中。 现在，当运行该模块时，带有字符串化css的<style>标记将插入到html文件的<head>中。

让我们通过向我们的项目添加一个新的style.css文件并将其导入我们的index.js来尝试：
project

  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() {
    const 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

> webpack-demo@1.0.0 build /home/hb/Development/webpack-demo
> webpack

Hash: d9b8525928da168f90fd
Version: webpack 4.39.2
Time: 2691ms
Built at: 08/22/2019 2:37:27 PM
    Asset      Size  Chunks             Chunk Names
bundle.js  74.5 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[1] ./src/index.js 280 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
[4] ./src/style.css 403 bytes {0} [built]
[5] ./node_modules/css-loader/dist/cjs.js!./src/style.css 166 bytes {0} [built]
    + 3 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

再次在浏览器中打开index.html，您应该看到Hello webpack现在以红色设置。要查看webpack的作用，请检查页面（不要查看页面源，因为它不会显示结果，因为<style>标记是由 JavaScript动态创建的）并查看页面的head标记。它应该包含我们在index.js中导入的样式块。
请注意，您可以（在大多数情况下）最小化css，以便在生产中获得更好的加载时间。 最重要的是，加载器几乎存在于你能想到的任何CSS风格 - postcss，sass等等。

加载图片

所以现在我们正在使用我们的CSS，但是我们的图像如背景和图标呢？ 使用文件加载器，我们也可以轻松地将它们合并到我们的系统中：

npm install --save-dev file-loader

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”/>。

让我们在项目中添加一个图像，看看它是如何工作的，你可以使用你喜欢的任何图像：
project

  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
+   |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

src/index.js

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

  function component() {
    const 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.
+   const myIcon = new Image();
+   myIcon.src = Icon;
+
+   element.appendChild(myIcon);

    return element;
  }

  document.body.appendChild(component());

src/style.css

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

让我们创建一个新的构建并再次打开index.html文件：

npm run build

...
                               Asset      Size  Chunks                    Chunk Names
da4574bb234ddc4bb47cbe1ca4b20303.png  3.01 MiB          [emitted]  [big]
                           bundle.js  76.7 KiB       0  [emitted]         main
Entrypoint main = bundle.js
...

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

加载字体

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

将一些字体文件添加到项目中：
project

  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

配置加载程序并使用字体后，您可以通过@ font-face声明合并它们。 webpack将获取本地url（…）指令，就像使用图像一样：
src/style.css

+ @font-face {
+   font-family: 'MyFont';
+   src:  url('./my-font.woff2') format('woff2'),
+         url('./my-font.woff') format('woff');
+   font-weight: 600;
+   font-style: normal;
+ }

  .hello {
    color: red;
+   font-family: 'MyFont';
    background: url('./icon.png');
  }

现在运行一个新的构建，让我们看看webpack是否处理了我们的字体：

npm run build

...
                                 Asset      Size  Chunks                    Chunk Names
5439466351d432b73fdb518c6ae9654a.woff2  19.5 KiB          [emitted]
 387c65cc923ad19790469cfb5b7cb583.woff  23.4 KiB          [emitted]
  da4574bb234ddc4bb47cbe1ca4b20303.png  3.01 MiB          [emitted]  [big]
                             bundle.js    77 KiB       0  [emitted]         main
Entrypoint main = bundle.js
...

再次打开index.html，看看我们的Hello webpack文本是否已更改为新字体。 如果一切顺利，您应该看到更改。

加载数据

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

npm install --save-dev csv-loader xml-loader

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'
+         ]
+       }
      ]
    }
  };

将一些数据文件添加到项目中：
project

  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>

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

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

  function component() {
    const 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.
    const myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

+   console.log(Data);

    return element;
  }

  document.body.appendChild(component());

重新运行npm run build命令并打开index.html。 如果您在开发人员工具中查看控制台，您应该能够看到导入的数据已记录到控制台！

全局资源

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

- |- /assets
+ |– /components
+ |  |– /my-component
+ |  |  |– index.jsx
+ |  |  |– index.css
+ |  |  |– icon.svg
+ |  |  |– img.png

这种设置使您的代码更加便携，因为现在紧密耦合的所有内容都存在。 假设你想在另一个项目中使用/ my-component，只需复制或移动到那里的/ components目录即可。 只要您安装了任何外部依赖项并且您的配置定义了相同的加载器，您就应该好了。
但是，假设您已陷入旧方式，或者您拥有多个组件（视图，模板，模块等）之间共享的资产。 仍然可以将这些资产存储在基本目录中，甚至可以使用别名来使它们更容易import。

包起来

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

  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() {
    const 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.
-   const myIcon = new Image();
-   myIcon.src = Icon;
-
-   element.appendChild(myIcon);
-
-   console.log(Data);

    return element;
  }

  document.body.appendChild(component());
aboutmn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack资源整理及笔记
wangshengfei
11-28 758
以下是最近学习的路线一些资源的整理 首先当然是要先看ES6，有一些会用到ES6的语法，而且看了ES6不练习的话很快会忘的，要时常看看别人怎么写的。 然后MDN是比较正统的标准吧，CSDN的话就是一些小的问题或者bug或者ie的兼容性的问题可以去看看。 深入浅出ES6 MDN 入门webpack https://segmentfault.com/a/1190000006178770 w
webpack使用（基础入门篇2）
qq_45911604的博客
04-15 822
webpack使用（基础入门篇2）
webpack基础搭建及详细步骤
SunLRJ的博客
04-09 530
模块化开发认识 前端现在流行“模块化开发”这样一个理念，例如：我们的Nodejs 模块化，vue 组件化都是这样一个思想。 模块化开发，依赖于ES6 里面的基础语法：export default和import…from index.html：注意script 标签的type 属性值给定为"module" 注：在vscode 编辑器中测试时需要安装插件live server ，打开页面...
Webpack入门 三.输出管理
aboutmn的博客
08-23 117
到目前位置，我们手动的包含所有得资源到index.html文件。但是，当你的应用增长并且你开始使用文件名hash输出到多个bundles,你会很难在手动管理你的index.html。然而有一些插件可以是这个管理过程更简单。 准备 首先，让我们稍微调整一下我们的项目： project webpack-demo |- package.json |- webpack.config.js ...
webpack入门配置.zip
04-15
本压缩包提供的内容是针对初学者的Webpack入门配置，通过简单步骤即可创建一个基础的Webpack打包项目。 1. **Webpack 基础概念** Webpack 是一个静态模块打包器，它会将JavaScript、CSS、图片等所有应用到项目中的...
webpack+vue.js快速入门教程
11-26
Webpack 和 Vue.js 结合使用...Vue.js的易学性和强大的框架特性，配合Webpack的资源管理和优化，共同构建出高性能、易于维护的Web应用。通过深入理解和实践，开发者可以更好地掌握这两项技术，提升开发效率和应用质量。
webpack-demo.zip
07-16
Webpack 是一个前端模块打包工具，它能够将JavaScript、CSS、图片等资源文件转换并整合到一起，形成适合浏览器加载的格式。本`webpack-demo.zip`压缩包提供了从零开始学习Webpack的基础步骤，包括安装、配置以及创建...
使用webpack+vue.js构建前端工程化
01-27
最终，webpack将所有资源打包成一个或多个bundle.js文件，供浏览器加载。 9. **使用webpack构建前端工程化** 使用webpack构建Vue项目时，需要配置webpack.config.js文件，定义入口文件、输出路径、加载器和插件等...
webpack4demo.rar
12-19
Webpack 4 是一款强大的前端模块打包工具，常用于管理和构建现代JavaScript应用。它将应用程序的各种资源（如JavaScript、CSS、图片等）转换成一个或多个优化过的静态资源包，以便在浏览器中高效运行。本教程将通过...
webpack+lite-server 构建项目示例
sun_weitao的博客
09-06 460
bs-config.json 设置访问文件夹。dist/index.html 加入以下内容。webpack.config.js 配置。package.json 填入下列内容。
DevC++编译及使用Opencv
hao1183716597的专栏
09-07 549
这个DevCpp真的难用的要死，代码提示、代码补全、定义跳转等等无比难用，还是选择vscode+mingw吧！
Webpack详解与配置环境
拥抱变化！
09-02 1414
Output。
vue多环境配置和打包
qq_38880880的博客
09-03 724
在每个.env文件中，你可以定义环境变量。这些变量可以在你的Vue应用或webpack配置中使用。变量需要以VUE_APP_为前缀才能被webpack识别。.env.[mode]：仅为指定的模式加载的配置文件，例如.env.development、.env.production、.env.test。Vue CLI会自动加载对应模式的.env文件，并将变量注入到你的项目中。.env.local：本地覆盖配置，不加入版本控制。件名的后缀来指定它们仅在特定模式下被加载。.env：所有环境下都会加载的通用配置。
fetch-event-source 如何通过script全局引入
cuiyuchen111的博客
09-07 95
fetchEventSource源码中导出了两种类型的包cjs和esm。但是有个需求如何在原生是js中通过script标签引呢？需要加上type=module。最后生成一个dist目录中的文件bundle.js。执行：npx webpack。
构建现代前端应用的利器：深入解析Webpack与Vite的差异与优势
weixin_47238919的博客
09-04 656
在现代前端开发中，构建工具是不可或缺的，它们帮助我们打包、优化和管理项目中的资源。Webpack和Vite是当前流行的两个构建工具，它们各自有着独特的优势和工作机制。
Vue学习笔记 二
只会写bug
09-02 3545
4、Vue基础扩展 4.1 插槽 组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力 在Vue中插槽是很重要的存在，通过插槽，我们可以把父组件中指定的DOM作用到子组件的任意位置，后面我们坐项目用到的组件库比如element-ui,vant-ui都频繁用到的插槽，Vue的插槽主要有匿名插槽，具名插槽，作用域插槽三种，下面我们分别来认识一下他们。 4.1.1 匿名插槽★★★★ 故名思义就是没有名字的插槽，只需要在子组件中使用<slot></slot>引入即可 我们来看一
2024前端面试题分享
I_am_shy的博客
08-29 1389
最近忙着面试很久没有更新文章了，分享一下我收集的前端面经，当然题目仅供参考（乞求秋招offer）
vite是如何实现依赖预构建的，浏览器为什么没有实现从node_modules查找依赖，vite开发环境解决了什么问题
最新发布
liangzhenmeng的博客
09-07 156
首先vite会找到对应的依赖，然后调用esbuild(对js语法进行处理的一个库)，将其他规范的代码转换成esmodule规范，然后放到当前目录下的node_modules/.vite/deps【注: 缓存目录】，同时对esmodule规范的各个模块进行统一集成。webpack的编译原理，AST抽象语法分析工具，分析出你写的js文件有哪些导入和导出操作，构建工具会监测你的代码文件，及时输出结果。因为webpack支持多种模块化，他一开始必须要统一模块化代码，所以意味着他需要将所有的依赖全部读一遍，
webpack+vue.js前端工程化实践与node.js入门
"本文将介绍如何使用webpack和vue.js构建前端工程化项目，以及与之相关的node.js基础知识，包括node.js环境搭建、npm管理和模块化编程。" 在现代前端开发中，webpack和vue.js是两个重要的工具。Webpack是一个模块...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值