如何加载数据 - [: 'Webpack核心 - 表严肃讲Webpack' |cut:tmp.cut_limit :]

使用json加载数据

文件结构

.
├── dist/
├── node_modules/
├── index.css
├── index.html
├── index.js
├── nav.json
├── package-lock.json
├── package.json 无需其他配置
└── webpack.config.js 无需其他配置

index.js

import list from './nav';

const nav = document.querySelector('nav');

list.forEach(it => {
  let a       = document.createElement('a');
  a.innerText = it.text;
  a.href      = it.url;

  nav.appendChild(a);
});

nav.json

[
  {
    "text": "yo",
    "url": "#yo"
  },
  {
    "text": "ha",
    "url": "#ha"
  },
  {
    "text": "la",
    "url": "#la"
  },
  {
    "text": "muhaha",
    "url": "#muhaha"
  }
]

index.html

<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<nav></nav>
<script src="dist/bundle.js"></script>

使用csv加载数据

文件结构

.
├── nav.csv
└── ...

index.js

import list from './nav.csv';

const nav = document.querySelector('nav');

list.forEach(it => {
  if (!it.text)
    return;

  let a       = document.createElement('a');
  a.innerText = it.text;
  a.href      = it.url;

  nav.appendChild(a);
});

nav.csv

text, url
yo, #yo
ha, #ha
la, #la
muhaha, #muhaha

package.json

{
  "name": "21.x",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "csv-loader": "^3.0.2",
    "papaparse": "^4.6.2",
    "webpack": "^4.28.1",
    "webpack-cli": "^3.1.2"
  }
}