身为前端人，你真的会用webpack么？

1.webpack可以解决什么问题

概述:在node平台当中我们可以实现模块式开发；模块之间相互独立；

如果让多个模块协同工作，需要模块对外暴露数据【公用】

模块式开发：多个模块【每一个模块有属于自己功能】协同工作完成一个项目；

经过测试：node平台下模块我想移植到静态页面中实现模块式开发。

发现不可以，因为浏览器不识别require、exports

注意：

①webpack最终要的意见事情，可以让浏览器识别require、exports实现模块式开发；

②就是将多个模块进行打包合并

2.webpack工具安装

概述：webpack是NPM社区当中一个辅助开发工具【less】,如果想使用webpack需要去社区下载；

https://www.webpackjs.com/ 官网

cnpm  install -g   less

cnpm  install  -g webpack  webpack-cli  【CMD窗口安装指令】

【检测是否安装成功：4代表安装成功】

注意：-g安装的是可以在全局当中使用开发工具

3.webpack工具使用

概述：

①webpack最终要的意见事情：可以让浏览器识别require、exports【可以在静态页面中实现模块式开发】

②可以将多个模块进行打包合并

打包顺序：是按照程序当中require先后顺序进行打包合并

 

webpack  main.js  -o dist/bundle.js

4.webpack注意事项

①webpack 暂时 而言只能打包JS文件

②webpack工具打包的时候，只要JS文件里面代码发生变化需要重新打包

5.ES6中模块暴露写法

概述：在ES6中欧洲计算机协会，他们定制官方的模块暴露方式。但是很尴尬的一件事情；

各大浏览器厂商不认ES6中模块暴露，node平台也不认官方ES6中模块暴露；

ES6中普通暴露

 

 

 

注意：如果多个模块有命名冲突的时候，模块这种引入形式是不可以的；

import  {}  from  模块

ES6中引入模块其他形式

注意：以后如果遇见模块和模块之间有命名冲突的时候，可以用下面形式引入模块；

webpack可以顺利打包；

 

默认暴露

概述:默认暴露一般暴露的是类；

export default  类名；

 

6

webpack.config.js文件书写格式

概述：webpack.config.js文件可以指导这webpack工具如何工作；

要求：背着书写下来