webpack是一个现代javascript应用程序的模块打包器(module bundler),他会递归的构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成少量的bundle 通常只有一个,由浏览器进行加载
npm install webpack -g //全局安装
//webpack -v 查看版本
npm init
//配置项可以直接回车略过
就像在gulp中一样src为开发环境dist为生产环境
在dist中新建一个index.html文件,打开文件写入一个id为rty的任意标签,然后再写个script标签引用文件为当前文件夹下bundle.js文件
<p id="rty"></p>
<script src="./bundle.js"></script>
这时候你会发现 dist中根本就没有bundle这个文件,我们的目的就是打一个bundle.js进来 现在我们在src中新建一个index.js写入以下代码:
document.getElementById('rty').innerHTML='哈喽~沃德'
现在我们执行webpack命令开始打包
webpack src/index.js dist/bundle.js
没有红字报错说明打包成功了
现在打开dist中的index.html 看到‘哈喽~沃德’了
哈喽~沃德