全局安装 webpack@v4.35.2 与 webpack-cli
npm i -g webpack@v4.35.2
npm i -g webpack-cli
安装后检查版本号，如果出现红色提醒文字，没关系，假装没看见就可以了。
webpack -v
创建一下目录结构和文件，来个错误示范：
首先在bar.js文件编写下面代码：
// node.js node模块化编程，导出一个函数
module.exports = function() {
console.log(‘我是bar模块’, ‘’)
}
在 main.js 编写一下代码：
var bar = require(‘./bar’)
bar()
在index.html文件编写下面代码：
《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】
这时候我们执行的时候发现报错
报错的原因就是上边的代码我们采用了模块化开发，但是浏览器默认不支持模块化识别，所以产生的错误，这个时候，我们如果想使用模块化，那么就需要 webpack 来帮忙打包一下子，转换成浏览器可以识别的语法。
这样的话，我们就需要将模块化文件（main.js）进行打包。
[](()打包 JS
