共计 577 个字符，预计需要花费 2 分钟才能阅读完成。
前言
在以往的我的项目中页面相互引入共用的 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 文件中
文中的代码可能不肯定是最优代码，要是你有更好的代码欢送评论。喜爱的能够给我点赞激励哦!
码字不易, 屏幕前的大帅比, 更多干货文章请关注!!!
备注:
★局部素材来自网络，版权归原创者，如有侵权请分割删除
正文完
