webpack篇(上)

webpack基本介绍

webpack官网

webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)

现代 javascript 应用程序的 静态模块打包器 (module bundler)

• 静态: 文件资源
• 模块: node环境, 引入文件, 遵守模块化语法

除了合并代码, 还可以翻译和压缩代码

• less/sass     -> css
• ES6/7/8       -> ES5
• html/css/js -> 压缩合并

小结

1. 什么是webpack?

• 静态模块打包器
• 还能翻译和压缩代码
• 减小代码包体积, 让浏览器更快速打开网页

修改用模块化的方式来改写代码

以模块化的方式来修改：

• 在tool.js中导出模块
• 在index.js中使用模块

在tool.js导出模块

它用来提供一个方法，供其它模块来使用。这里使用commonjs规范（就是node.js中的导出模块的方式）导出工具方法。

const updateDom = (id, content) =>{
    window.document.getElementById(id).innerHTML = content
}
+ module.exports = {
+  updateDom
+ }

在index.js中导入模块

在index.js中引入tool.js中的定义的方法。注意，这里已经涉及到了在一个js中引用另一个js

+ const { updateDom } = require('./tool')
updateDom ('app','index.html')

使用webpack来做打包

命令格式是：npx webpack 文件名

这里的操作是：

npx webpack ./index.js
# 或者是
node_modules/.bin/webpack index.js

它说明打包操作已经成功：index.js和tool.js已经合成了一个main.js文件了。

webpack会分析入口文件中的引用关系，把相关的文件合成在一起，变成一个.js文件