webpack的基本使用

webpack是现代的就是静态模块打包器.
webpack使用准备. 1.新建一个而文件夹 :初始化项目 ~~ npm init --yes 2.以这个模式建内部文件

    项目名
    ├── index.html
    ├── index.js
    ├── tool.js
    └── package.json

3.html中引入这两个文件 `

index

<div id="app">
  
</div>
<!-- 引入两个js文件 -->
<script src="./tool.js"></script>
<script src="./index.js"></script>

`

tool.js中填入一些内容并导出
const updateDom = (id, content) =>{ window.document.getElementById(id).innerHTML = content }
index.js导入tool.js文件
updateDom ('app','你好!世界!')

webpack对于所有项目都可以使用的,但是对于一些较老的项目使用的版本可能不同,所以建议局部安装.
打开cmd窗口 , 输入 npm i webpack webpack-cli -D 下载安装webpack工具.
输入 npx webpack -v 验证包是否安装成功
在tool.js中导出 updateDom

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

开始用webpack打包
在cmd中输入 npx webpack ./index.js
若没有出现报错会出现以下结果,到这里已经成功了第一步

Hash: b43d4771990a46286152
Version: webpack 4.42.1
Time: 101ms
Built at: 2020-04-01 3:15:48 PM
  Asset      Size  Chunks             Chunk Names
main.js  1.04 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] ./index.js 71 bytes {0} [built]
[1] ./tool.js 136 bytes {0} [built]

在index.html中引入打包好了的main.js文件. 此时运行index.html应该已经可以看到页面了.