webpack搭建项目流程
1.webpack是什么？
webpack是基于nodejs开发出来的前端项目构建工具，运行webpack需要基于nodejs环境，在没有安装node的情况下是无法安装webpack的。
2.webpack作用？
webpack可以解决1、引入静态文件发送很多二次请求导致网页加载慢的问题2、可以解决文件之间错综复杂的依赖关系（可以在js文件中引入js文件）3、可以合并压缩文件以及图片，解决各个包之间复杂的依赖关系。
3.webpack如何使用？
1.安装webpack方式：1.全局安装 2.项目本地安装，一般不全局安装，因为版本不能锁定
2.搭建项目文件夹
3、webpack可以解决引入很多静态文件导致加载速度缓慢问题所以使用webpack后不在index.html中引入很多的静态css、js文件，只需要引入一个入口文件main.js，所有的静态文件在入口文件中引入即可，这样大大增加了网页的加载速度。
4、在入口文件main.js中，可以通过es6导入模块的语法引入相关文件例如import $ from "jquery"引入jquery包，也可以使用nodejs中引入模块的语法const $ = require(“jquery”)引入，因为webpack是基于nodejs环境。
5、此时浏览器会报无法解析import语法的错误，由于浏览器解析不了es6这种高级语法，所以需要用到webpack进行打包处理，这时候可以在终端中运行指令：webpack 需要处理的路径文件 将处理好的文件重新命名放入到指定的文件。指令：webpack ./src/main.js ./dist/bundle.js ，然后将处理好的文件引入到index.html文件中即可
6、这样有一个缺陷就是每次修改文件后都需要重新运行打包指令将修改的文件在打包，为了解决反复打包这个过程，我们可以在根目录下创建一个webpack.config.js的文件，在这个文件中配置入口entry对象（打包的文件路径）和出口output对象（打包好的文件和输出到哪个目录中去），配置好之后我们修改文件只需要在终端运行webpack就可以了。
7、由于这种方式进行打包编译需要一直运行webpack命令，所以我们需要借助webpack-dev-server这个工具，实现自动打包编译功能。运行webpack-dev-server -D安装，安装完毕执行webpack-dev-server发现无法把它当做脚本命令在终端直接运行（只有那些安装到全局-g的工具，才能在终端正常执行），如果需要运行本地的这条命令我们需要在package文件中配置“dev”:"webpack-dev-server"运行npm run dev来实现。注意这个工具webpack-dev-server 要正常运行还需要在本地安装webpack，webpack-dev-server这个工具帮我们打包生成的bundle.js文件默认放在了内存根路径下，我们看不到这个文件。
4.webpack常用命令参数
在package.json文件夹中设置：
–open是默认自动打开浏览器
–port 3000 是修改端口号为3000
–contentBase src 是展示的内容以src作为根路径
–hot是热重载、热更新 它的作用是减少不必要的代码更新，每次修改后的内容直接以补丁的形式打上去，不需要重新在更新所有内容。同时使用–hot后可以实现浏览器的无刷新热重载，但是对js代码无效，对css样式生效。
5.webpack-dev-server配置命令的第二种方式
在webpack.config.js中配置
6webpack插件
如何将index.html文件存放在内存中？由于磁盘的读写速度远不如内存的加载速度，所以我们将文件存放于内存中。
第一步：
运行cnpm i html-webpack-plugins -D将插件安装在项目本地
第二步：
导入在内存中生成的html 页面的插件，只要是插件，都一定要放到plugins节点中去。
当使用html-webpack-plugin之后，我们不需要在手动处理bundle.js的引用路径了，因为这个插件已经帮我们自动创建了一个合适的script，并且引用了正确的路径。
这个插件的两个作用：1.自动在内存中根据指定页面生成一个内存的页面2.自动把打包好的bundle.js追加到页面中去。
7.css第三方loader
在mian.js文件中使用import语法导入css样式表
import ‘./css/index.css’
由于webpack默认只能打包处理js类型的文件，无法处理其他非js类型的文件，所以要处理非js类型的文件，我们需要手动安装一些合适的第三方loader加载器
第一步：
如果想要打包处理css文件，需要安装cnpm i style-loader css-loader -D
第二步：
打开webpack.config.js这个配置文件，在里面新增一个配置节点，叫做module，它是一个对象；在这个module对象身上，有个rules属性，这个rules属性是个数组；这个数组中存放了所有第三方文件的匹配和处理规则；
loader的调用过程：
1.发现这个要处理的文件不是js文件，然后就去配置文件中查找有没有第三方loader规则
2.如果能找到对应的规则，就会调用对应的loader处理这种文件类型；
3.早调用loader的时候，是从后往前调用的；
4.当最后的一个loader调用完毕，会把处理的结果直接交给webpack进行打包合并，最终输出到bundle.js中去
less第三方loader
第一步：
在src中的css文件中创建index.less文件
引入index.less文件 import ‘./css/index.less’
运行cnpm i less-loader -D安装less第三方loader
cnpm i less -D安装less
第二步：
匹配规则
scss第三方loader
第一步：
在src中的css文件中创建index.scss文件
引入index.scss文件 import ‘./css/index.scss’
运行cnpm i sass-loader -D安装sass第三方loader
cnpm i node-sass -D安装sass
第二步：
匹配规则
url-loader
默认情况下，webpack无法处理css文件中的url地址，不管是图片还是字体库，只要是url地址都处理不了。
这时候我们需要安装第三方loader
cnpm i url-loader file-loader -D
