1.什么是webpack
官方解释:webpack是一个现代的JavaScript应用的静态模块打包工具
总体来说就是模块和打包,
通过ts、ES6等开发的应用不能直接放到服务器,因为浏览器不解析,那么就可以通过webpack转化生成浏览器可以识别并执行的代码。
目前市场上的打包工具:rollup、webpack、gulp/grunt
2、模块化和打包
现在前端模块化开发的一些方案:AMD、CMD、CommonJS、ES6,浏览器只解析ES6,用其他方案浏览器不能解析就需要通过webpack,webpack支持模块化就可以处理模块间的各种依赖,并且将其整合打包。不仅是JavaScript文件可以打包,CSS、图片、json文件等都可以在webpack中当做模块来用。
打包就是将webpack中各种资源模块进行打包合并成一个或者多个包,并且在打包过程中还能进行压缩。
3、grunt/gulp和webpack的区别
gulp:核心是task,配置一系列的task,并且定义task要处理的事务,让整个流程自动化,也被称为前端自动化任务管理工具,对于gulp来说模块化不是核心
webpack:更强调模块化开发管理
4、webpack和node.js和npm的关系
webpack为了正常运行必须依赖node环境,Node环境为了正常执行很多代码,必须依赖很多包,npm(node packages manager)工具是为了管理Node的包。
5、安装webpack
首先要安装Node.is,安装Nod.js版本要大于8.9
可以根据下面命令查看自己的node版本:
全局安装webpack(我跟老师安装的3.6.0,因为学习的Vue CLI2依赖该版本),命令如下:
npm install webpack@3.6.0 -g
局部安装(后续项目需要),命令如下:
(开发依赖,项目打包后不需要继续使用)
6、使用webpack
在js中使用了CommonJS(或者其他模块化方案)可以利用上述命令,将src下的main.js(你写的js文件)打包到dist文件夹下bundel.js(webpack生成的文件),再将bundel.js引用到html中,浏览器就可以解析你的模块化语句啦。
可是,上面的命令太长了,只想写webpack就让他替我完成打包,该怎么办呢?
你需要创建一个名叫webpack.config.js(目前名字是固定的,不可以随意修改)的文件,告诉webpack你导入的入口在哪里,你导出的出口在哪里。但是出口路径是要动态获取到的,需要用到node的包。需要做如下操作:
用上面的指令来初始化,之后需要输入名字后一直回车,如下图:
最后‘yes’回车之后生成package.json,文件内容如下:
如果package.json有依赖,就需要npm install命令加载
现在来配置webpack.config.js,如下图:
现在我们直接输入webpack命令就可以进行打包啦
但在开发中,并不会用webpack命令,而是用 npm run build,那如何将webpack命令和npm run build命令对应呢?
打开package.js,在script中映射,如下图所示:
这样,我们在打包是就可以直接写npm run build了,在控制台输入npm run build相当于运行上面的webpack。但是这样的话,在运行时会优先在本地找webpack,就需要用到上面说到的局部安装webpack,开发时依赖本地webpack,在package.js中,也会出现"devDependencies":
这时,你用webpack命令打包用全局的webpack,用npm run build打包用的本地的webpack。如果没有在脚本中定义build,那你本地打包时需要先去node_modules/bin路径,是一件很麻烦的事,这也是定义build的好处。