《你不了解的webpack》第一期

前言

在以往的项目中页面互相引入共用的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文件中

文中的代码可能不一定是最优代码，要是你有更好的代码欢迎评论。喜欢的可以给我点赞鼓励哦!码字不易,屏幕前的大帅比,更多干货文章请关注!!!

备注:★部分素材来自网络，版权归原创者，如有侵权请联系删除