webpack入门学习手记（三）

头像
siberiawolf
    阅读 7 分钟
    17

    图片描述

    本人微信公众号：前端修炼之路，欢迎关注。

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

    以下是正文。

    管理资源

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

    webpack有两大特色：

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

    加载css

    首先安装两个loader：style-loader、css-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-loader和css-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文件中，通过import将style.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官方文档的指南手册剩余部分，敬请关注。

    （待续）

    相关文章

    webpack入门学习手记（一）

    webpack入门学习手记（二）

    webpack入门学习手记（三）

    webpack入门学习手记（四）

    javascriptwebpack
    siberiawolf
    2.5k 声望853 粉丝

    每天多学一点，幸福多攒一点。

    « 上一篇
    webpack入门学习手记（二）
    下一篇 »
    webpack入门学习手记（四）

    引用和评论

    被 5 篇内容引用
    推荐阅读
    头像
    HarmonyOS应用开发（基础篇）

    siberiawolf赞 4阅读 9.3k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新