Webpack-(二十)编写Bundle

[1019483075]

模块分析

---

在src目录下新建三个文件：word.js，message.js，index.js对应的代码：

// word.js
export const word = 'hello'

// message.js
import { word } from './word.js'

const message = `say ${word}`

export default message

// index.js
import message from './message.js'

console.log(message)

新建 bundle.js

const fs = require('fs')

const moduleAnalyser = filename => {
  const content = fs.readFileSync(filename, 'utf-8')
  console.log(content)
}

moduleAnalyser('./src/index.js')

使用node 的fs模块，读取文件信息，并且在控制台输出，这里全局安装一个插件，来显示代码高亮。npm i cli-highlight -g，运行 node bundle.js | highlight

ndex.js 中的代码已经被输出到控制台上，而且代码有高亮，方便阅读，读取入口文件信息就完成了
现在我们要读取 index.js 文件中使用的 message.js 依赖，import message from './message.js'

安装第三个插件：npm i @babel/parser
@babel/parser 是 Babel 中使用的 JavaScript 解析器。
官网也提供了相应的示例代码，根据示例代码来仿照，修改我们的文件