webpack入門學習手記（三）

時間  2019-11-06
標籤 webpack 入門 學習 手記 简体版
原文   原文鏈接

本人微信公衆號：前端修煉之路，歡迎關注。css

距離上一次更新這個系列，過去了兩天。最近實在是有點忙，沒有擠出時間整理。感受日更還真是困難😂html

如下是正文。前端

管理資源

若是看過以前的系列文章，應該會有一個學習項目webpackStudy，能夠從文章下方找到以前的連接。官網給出的示例都是在一個項目中的html頁面、package.json和webpack.config.js中進行修改。我爲了保留每一小節的代碼，並無按照官網給出的方案處理，而是從新新建的配置文件。能夠經過騰訊雲開發者平臺查看源碼。node

webpack有兩大特點：webpack

  • 動態打包。在webpack中，每一個模塊都會聲明所引用的依賴，這樣就避免了打包沒有使用到的模塊。另外經過配置，能夠避免重複打包相同的引用，提升打包效率。
  • 強大的loader。經過loader，webpack能夠引入任何其餘的非JavaScript文件。例如，加載css、圖片、字體、JSON、XML等。

加載css

首先安裝兩個loader：style-loader、css-loader。執行以下命令：git

npm install --save-dev style-loader css-loader
複製代碼

注意 建議使用淘寶 NPM 鏡像web

而後在webpack.config.js中添加使用loader的規則。正則表達式

webpack.config.jsnpm

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。json

接下來在項目中添加一個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入門學習手記（四）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程