专栏首页前端修炼之路【第9期】webpack入门学习手记(三)

【第9期】webpack入门学习手记(三)

由于微信不允许外部链接,你需要点击页面尾部左下角的阅读原文,才能访问文中的链接。

距离上一次更新这个系列,过去了两天。最近实在是有点忙,没有挤出时间整理。感觉日更还真是困难?

以下是正文。

管理资源

如果看过之前的系列文章,应该会有一个学习项目webpackStudy,可以从文章下方找到之前的链接。官网给出的示例都是在一个项目中的html页面、package.jsonwebpack.config.js中进行修改。我为了保留每一小节的代码,并没有按照官网给出的方案处理,而是重新新建的配置文件。可以通过腾讯云开发者平台查看源码。

webpack有两大特色:

  • 动态打包。在webpack中,每个模块都会声明所引用的依赖,这样就避免了打包没有使用到的模块。另外通过配置,可以避免重复打包相同的引用,提高打包效率。
  • 强大的loader。通过loader,webpack可以引入任何其他的非JavaScript文件。例如,加载css、图片、字体、JSON、XML等。

加载css

首先安装两个loader:style-loadercss-loader。执行如下命令:

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

注意 建议使用淘宝 NPM 镜像

然后在webpack.config.js中添加使用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']
    }]
  }
};

添加module.rules表示要使用的loader规则。test属性使用正则表达式匹配任何的.css文件。use属性通过一个数组,表示匹配到的文件使用哪些需要加载的loader,这里就是style-loadercss-loader

接下来在项目中添加一个style.css文件,并修改下index.js

project

|- /src
+   |- style.css
    |- index.js
  |- /node_modules

src/style.css

.hello {
  color: red;
}

src/index.js

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

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

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

  return element;
}

document.body.appendChild(component());

index.js文件中,通过importstyle.css文件引入。在style.css中添加了一个hello样式。index.js文件中,直接使用了这个css样式。

也就是说,在js文件中,直接使用了css代码。感觉非常酷~

然后执行打包命令,看看有什么变化~

npm run build

此时用浏览器打开index.html,会发现之前的Hello webpack变成了红色。请注意,之前我们并没有在index.html中引入任何的css样式。用浏览器检查一下页面,就会知道webpack是怎么做到的了。

说明webpack将css代码自动添加到head标签中了,非常的智能化~

加载图片

接下来尝试下加载图片和在css中引用背景图片。这时我们要使用file-loader

npm install --save-dev file-loader

webpack.config.js中添加一段使用loader的配置。

webpack.config.js

module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: ['file-loader']
    }]
  }

然后在项目中添加一张图片。

project

|- /src
+   |- icon.jpg
    |- style.css
    |- index.js
  |- /node_modules

最后,添加引用图片和使用背景图片代码。

src/index.js

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

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

  // Lodash, currently included via a script, is required for this line to work
  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());

src/style.css

.hello {
  color: red;
  background: url(./icon.jpg);
}

重新执行打包命令npm run build,然后打开index.html文件,会发现已经能显示添加的图片和设置的背景图了。

这里还有一个小细节是,如果查看页面会发现,图片名称已经被修改为类似14a53ef4a1ced4a4a6f7161f51c6870e.jpg这样的名字了。说明webpack处理了添加的图片,并重新命名了。 关于更多的图片压缩和优化,以后再继续整理。

加载字体

加载字体与加载图片和css没有什么区别。我找了一个ttf格式的字体来学习这个过程。首先告诉webpack字体文件使用file-loader进行加载。

webpack.config.js

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

|- /src
+   |- my-font.ttf
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

最后使用字体。

src/style.css

@font-face{
  font-family: 'myFont';
  src: url('./my-font.ttf') format('ttf');
  font-weight: 600;
  font-style: normal;
}
.hello {
  color: red;
  font-family: 'myFont';
  background: url(./icon.jpg);
}

重新打包npm run build,打开index.html文件,然后查看页面,会发现字体已经使用上了。与图片相同,字体文件也被wepack重命名了。

加载数据

webpack可以加载任何类型的数据,例如JSON, CSV, TSV, 和XML。webpack默认内置了JSON加载数据。

照着官网的例子一步步来。

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

webpack.config.js

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

添加一个测试用的xml数据:

project

|- /src
+   |- data.xml
    |- my-font.woff
    |- my-font.woff2
    |- icon.png
    |- style.css
    |- index.js
  |- /node_modules

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.jpg';
import Data from './data.xml';

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

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

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

  console.log(Data);

  element.appendChild(myIcon);

  return element;
}

document.body.appendChild(component());

目前执行到这里一切看起来都很容易。创建一个data.xml文件,然后加一些假数据,最后在index.js中打印这个数据。但是当我执行打包命令npm run build时,一切都不那么的和谐了。出现了如下的错误:

build error

> webpackStudy@1.0.0 build /Users/yyy/Documents/work/workspace/webpackStudy
> webpack --config webpack.config.js

/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.3.1.2@webpack-cli/bin/cli.js:244
                                throw err;
                                ^

Error: Cannot find module '@webassemblyjs/helper-code-frame'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:603:15)
    at Function.Module._load (internal/modules/cjs/loader.js:529:25)
    at Module.require (internal/modules/cjs/loader.js:658:17)
    at require (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.1.7.11@@webassemblyjs/wast-parser/lib/grammar.js:8:24)
    at Module._compile (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:658:17)
    at require (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.1.7.11@@webassemblyjs/wast-parser/lib/index.js:11:38)
    at Module._compile (/Users/yyy/Documents/work/workspace/webpackStudy/node_modules/.2.0.2@v8-compile-cache/v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)

这就很奇怪了,意思是说找不到一个模块。经过一番苦苦查找,终于知道了原因。

需要将webpack4版本 降到webpack3版本。我找到的版本是3.11.0。我将wepack卸载掉,然后安装这个版本之后,再次打包,就成功了。

从上图的中的打印数据中可以发现,我们的xml文件已经被解析成了json格式的数据。

说明: 我将本小节代码托管到了腾讯云开发者平台,如果需要查看这节内容,请查找Asset Management目录即可。


以上就是指南手册中的Asset Management部分。总结一下主要内容:

  • 加载CSS
  • 加载图片
  • 加载字体
  • 加载数据

下一篇笔记整理webpack官方文档的指南手册剩余部分,敬请关注。

(待续)

本文分享自微信公众号 - 前端修炼之路(siberiawolf0307),作者:siberiawolf

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【第7期】 webpack入门学习手记(一)

    之前用过gulp、grunt,但是一直没有学习过webpack。这两天刚好有时间,学习了下webpack。webpack要想深入研究,配置的东西比较多,网上的资...

    siberiawolf
  • 【第8期】webpack入门学习手记(二)

    最近开始想要维护一个个人的公众号,初心是为了督促自己坚持做笔记,将学习的东西整理记录下来。更进一步的要求是提升动手能力、文章写作能力,和分享经验。终极目标就是为...

    siberiawolf
  • 【第10期】webpack入门学习手记(四)

    在程序入口文件中,引用这个文件。这个文件的内容,对上一节的代码做了修改。只保留了加载css样式的代码。

    siberiawolf
  • 【第13期】webpack入门学习手记(五)

    前几天朋友聚餐突然想到,再过不到半年时间,第一批20后即将出生。这种感觉就像是,现在的90后看60后~ 一不小心我们这些90后在20后的眼中就变成了上个世纪的人...

    siberiawolf
  • 一位00后前端2年经验的成长历程

    没错,我就是一位00后前端。2001年出生的我,从18年5月份到现在一直在开源中国任职。目前在Gitee私有化部门担任前端开发一职,负责规范制定,技术攻关,人员...

    若川
  • 最全前端资源汇总

    一、概要 这份汇总整理,很程度上参考了GitHub最全前端资源汇总;云集前端教程、开发资源、免费书籍、手册规范、求职面试等等,旨在为前端学习 & 技能提升提供方...

    张果
  • React+Redux仿Web追书神器

    引言 由于 10 月份做的 React Native 项目没有使用到 Redux 等库,写了一段时间想深入学习 React,有个想法想做个 demo 练手下,...

    用户1148881
  • 2 年前端面试心路历程(字节跳动、YY、虎牙、BIGO)

    https://juejin.im/post/5e85ec79e51d4547153d073820ed

    闰土大叔
  • 深度学习三人行(第3期)---- TensorFlow从DNN入手

    智能算法
  • 微服务[学成在线] day02:CMS前端开发

    由于在学习该项目的过程中发现了原讲义存在的一些问题,所以该笔记基于「学成在线」微服务项目 PDF 讲义进行编写,并且投入了时间去优化了笔记的格式、代码的高亮、重...

    LCyee
  • Weex原理之带你去蹲坑

     本篇将节操满满的安利Weex(˶‾᷄ ⁻̫ ‾᷅˵),不一样的角度推荐你入坑,官网有的我们不拖泥,这里将给你补充官方没有的,深入到蹲坑给你排忧解难,总会给你点...

    GSYTech
  • 辛辛苦苦学会的 webpack dll 配置,可能已经过时了

    如果大家看过一些 webpack 优化的文章,一定会出现 dll 动态链接库。它以配置之复杂让众多初学者记忆犹新。

    卤代烃
  • 关于 webpack4 的 14 个知识点,童叟无欺

    最近工作中用到了nuxt,才发现,如果 webpack 学的 6,nuxt 基本不需要学习,没什么学习成本的。因此,这篇重新记录下 webpack4 的一些基础...

    夜尽天明
  • 2018 最值得关注的前端技术

    2017悄然过去,2018已经来到。人在进步,技术在发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人的判断进行一个预测...

    一个会写诗的程序员
  • Webpack 实战入门系列(三):生产配置、样式文件分离及输出清理

    现在vue、react很流行,新项目基本用这些新框架,组件化开发确实是趋势,但是他们再怎么发展也离不开构建工具,顶多在webpack等工具上进行再封装。现在vu...

    一只图雀
  • 关于webpack4的14个知识点,童叟无欺

    最近工作中用到了nuxt,才发现,如果webpack学的6,nuxt基本不需要学习,没什么学习成本的,因此,这篇重新记录下webpack4的一些基础知识点,下一...

    ConardLi
  • 当webpack有了vite的速度

    是的,这就是webpack慢的原因,由于webpack对于所有运行资源进行了提前编译处理,对依赖模块进行了语法分析转义,最终的结果就是模块被打包到内存中。

    zz_jesse
  • 腾讯暑期实习三面面经

    回馈社会,腾讯暑期实习三面面经,正在等hr面试。。。 3.16 晚上8点 一面 电面 40分钟 1.自我介绍 2.position属性 比较 3.浮动清除 4....

    牛客网
  • 2021前端学习路径书单—自我成长之路

    正式学习前端大概 3 年多了,接触前端大概 4 年了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的...

    秋风的笔记

扫码关注云+社区

领取腾讯云代金券