前言
在以往的我的项目中页面相互引入共用的js文件都是通过全局引入形式来解决的,这就造成很多的js依赖，减少浏览器辨认耗时累赘，页面响应慢，为了解决这个问题webpack就呈现了，实现前端模块化,让引入简单的js文件细化为小的文件，不便浏览器辨认。
一、装置
- 举荐采纳部分装置,防止各我的项目版本不同产生抵触
npm i -D webpack二、配置
- enter 入口
- output 进口
- mode以后环境
- module模块
- loader(执行程序:右->左；下->上)
1.file-loader，url-loader 解决动态资源(图片资源,字体)
2.css-loader(剖析模块之间关系合并css)
3.style-loader(把css-loader生成的内容，以style挂载到页面header局部)
4.less/sass-loader：把less/sass语法换成css
三、插件plugins
- 我的项目运行到某个生命周期做一些动作,致力于整个打包流程
- 罕用HtmlWebpackPlugin,作用~打包完结之后，会主动生成一个html文件,并把打包生成的js模块引入到该html文件中
文中的代码可能不肯定是最优代码，要是你有更好的代码欢送评论。喜爱的能够给我点赞激励哦!
码字不易,屏幕前的大帅比,更多干货文章请关注!!!
备注:
★局部素材来自网络，版权归原创者，如有侵权请分割删除