-
Notifications
You must be signed in to change notification settings - Fork 0
/
75bf0d7.html
1 lines (1 loc) · 179 KB
/
75bf0d7.html
1
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><title>webpack构建工具的学习 | 梦洁小站-属于你我的小天地</title><meta name="author" content="梦洁"><meta name="copyright" content="梦洁"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="什么是webpack 是一个模块打包工具 webpack将前端的所有资源文件(js/json/css/img/less…)都看做模块,来进行处理 会根据模块的依赖关系进行分析,生成对应的资源 原生的webpack只可以完成js/json的打包编译,而转换什么的需要其他插件进行完成,比如说es6转es5,箭头函数转换,都需要依赖其他loader或者插件(plu"><meta property="og:type" content="article"><meta property="og:title" content="webpack构建工具的学习"><meta property="og:url" content="https://www.dreamlove.top/75bf0d7.html"><meta property="og:site_name" content="梦洁小站-属于你我的小天地"><meta property="og:description" content="什么是webpack 是一个模块打包工具 webpack将前端的所有资源文件(js/json/css/img/less…)都看做模块,来进行处理 会根据模块的依赖关系进行分析,生成对应的资源 原生的webpack只可以完成js/json的打包编译,而转换什么的需要其他插件进行完成,比如说es6转es5,箭头函数转换,都需要依赖其他loader或者插件(plu"><meta property="og:locale" content="zh_CN"><meta property="og:image" content="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291452280.jpg"><meta property="article:published_time" content="2022-05-28T22:47:18.000Z"><meta property="article:modified_time" content="2022-07-18T08:25:40.000Z"><meta property="article:author" content="梦洁"><meta property="article:tag" content="vue"><meta property="article:tag" content="HTML"><meta property="article:tag" content="javscript"><meta property="article:tag" content="ES6"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291452280.jpg"><link rel="shortcut icon" href="https://oss.dreamlove.top/i/2024/02/02/nw24wu.png"><link rel="canonical" href="https://www.dreamlove.top/75bf0d7.html"><link rel="preconnect" href="https://lib.baomitu.com"><link rel="preconnect" href="//busuanzi.ibruce.info"><link rel="stylesheet" href="/css/index.css?v=4.13.0"><link rel="stylesheet" href="https://lib.baomitu.com/font-awesome/6.5.1/css/all.min.css"><link rel="stylesheet" href="https://lib.baomitu.com/fancyapps-ui/5.0.33/fancybox/fancybox.min.css" media="print" onload='this.media="all"'><script>const GLOBAL_CONFIG={root:"/",algolia:{appId:"G7A2D1SYPY",apiKey:"49056313a9be02852c7dbedfcb772831",indexName:"blog",hits:{per_page:20},languages:{input_placeholder:"搜索文章",hits_empty:"找不到您查询的内容：${query}",hits_stats:"找到 ${hits} 条结果，用时 ${time} 毫秒"}},localSearch:void 0,translate:void 0,noticeOutdate:void 0,highlight:{plugin:"highlight.js",highlightCopy:!0,highlightLang:!0,highlightHeightLimit:!1},copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},relativeDate:{homepage:!1,post:!1},runtime:"天",dateSuffix:{just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},copyright:void 0,lightbox:"fancybox",Snackbar:void 0,infinitegrid:{js:"https://lib.baomitu.com/egjs-infinitegrid/4.11.1/infinitegrid.min.js",buttonText:"加载更多"},isPhotoFigcaption:!1,islazyload:!1,isAnchor:!1,percent:{toc:!0,rightside:!1},autoDarkmode:!1}</script><script id="config-diff">var GLOBAL_CONFIG_SITE={title:"webpack构建工具的学习",isPost:!0,isHome:!1,isHighlightShrink:!1,isToc:!0,postUpdate:"2022-07-18 08:25:40"}</script><script>(e=>{e.saveToLocal={set:(e,t,o)=>{if(0===o)return;const a={value:t,expiry:Date.now()+864e5*o};localStorage.setItem(e,JSON.stringify(a))},get:e=>{const t=localStorage.getItem(e);if(!t)return;const o=JSON.parse(t);if(!(Date.now()>o.expiry))return o.value;localStorage.removeItem(e)}},e.getScript=(e,t={})=>new Promise((o,a)=>{const n=document.createElement("script");n.src=e,n.async=!0,n.onerror=a,n.onload=n.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(n.onload=n.onreadystatechange=null,o())},Object.keys(t).forEach(e=>{n.setAttribute(e,t[e])}),document.head.appendChild(n)}),e.getCSS=(e,t=!1)=>new Promise((o,a)=>{const n=document.createElement("link");n.rel="stylesheet",n.href=e,t&&(n.id=t),n.onerror=a,n.onload=n.onreadystatechange=function(){const e=this.readyState;e&&"loaded"!==e&&"complete"!==e||(n.onload=n.onreadystatechange=null,o())},document.head.appendChild(n)}),e.activateDarkMode=()=>{document.documentElement.setAttribute("data-theme","dark"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#0d0d0d")},e.activateLightMode=()=>{document.documentElement.setAttribute("data-theme","light"),null!==document.querySelector('meta[name="theme-color"]')&&document.querySelector('meta[name="theme-color"]').setAttribute("content","#ffffff")};const t=saveToLocal.get("theme");"dark"===t?activateDarkMode():"light"===t&&activateLightMode();const o=saveToLocal.get("aside-status");void 0!==o&&("hide"===o?document.documentElement.classList.add("hide-aside"):document.documentElement.classList.remove("hide-aside"));/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)&&document.documentElement.classList.add("apple")})(window)</script><meta name="generator" content="Hexo 7.1.1"></head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://oss.dreamlove.top/i/2024/02/02/nw24wu.png" onerror='onerror=null,src="/img/404.png"' alt="avatar"></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">170</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">94</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">70</div></a></div><hr class="custom-hr"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情和链接</span></a></div><div class="menus_item"><a class="site-page" href="/navigation/"><i class="fa-fw fas fa-link"></i><span> 链接导航</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 私有化导航</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://mark.123916.xyz/"><i class="fa-fw fas fa-database"></i><span> 导航</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://cloud.reassurehome.com/"><i class="fa-fw fas fa-hippo"></i><span> Alist(私有)</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 工具</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://short.123916.xyz/027a2"><i class="fa-fw fas fa-paperclip"></i><span> clash免费订阅地址</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://short.123916.xyz/admin/"><i class="fa-fw fas fa-paperclip"></i><span> 短链接生成</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 好玩的</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://make.girls.moe/#/"><i class="fa-fw fas fa-database"></i><span> 动漫头像制作</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="http://dfqshy.ysepan.com/"><i class="fa-fw fas fa-database"></i><span> FC游戏大全网盘</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.yikm.net/"><i class="fa-fw fas fa-database"></i><span> 小霸王</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.return8090.com/"><i class="fa-fw fas fa-database"></i><span> 小霸王(广告多)</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="http://farm.dreamlove.top"><i class="fa-fw fas fa-database"></i><span> QQ农场经典版</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://codepip.com/"><i class="fa-fw fas fa-database"></i><span> CssGame</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://photo.123916.xyz/"><i class="fa-fw fas fa-database"></i><span> 有趣的照片</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 其他</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://buy.dreamlove.top/"><i class="fa-fw fas fa-heart"></i><span> 购物</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image:url(https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291452280.jpg)"><nav id="nav"><span id="blog-info"><a href="/" title="梦洁小站-属于你我的小天地"><span class="site-name">梦洁小站-属于你我的小天地</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友情和链接</span></a></div><div class="menus_item"><a class="site-page" href="/navigation/"><i class="fa-fw fas fa-link"></i><span> 链接导航</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 私有化导航</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://mark.123916.xyz/"><i class="fa-fw fas fa-database"></i><span> 导航</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://cloud.reassurehome.com/"><i class="fa-fw fas fa-hippo"></i><span> Alist(私有)</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 工具</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://short.123916.xyz/027a2"><i class="fa-fw fas fa-paperclip"></i><span> clash免费订阅地址</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://short.123916.xyz/admin/"><i class="fa-fw fas fa-paperclip"></i><span> 短链接生成</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 好玩的</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" target="_blank" rel="noopener" href="https://make.girls.moe/#/"><i class="fa-fw fas fa-database"></i><span> 动漫头像制作</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="http://dfqshy.ysepan.com/"><i class="fa-fw fas fa-database"></i><span> FC游戏大全网盘</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.yikm.net/"><i class="fa-fw fas fa-database"></i><span> 小霸王</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://www.return8090.com/"><i class="fa-fw fas fa-database"></i><span> 小霸王(广告多)</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="http://farm.dreamlove.top"><i class="fa-fw fas fa-database"></i><span> QQ农场经典版</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://codepip.com/"><i class="fa-fw fas fa-database"></i><span> CssGame</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://photo.123916.xyz/"><i class="fa-fw fas fa-database"></i><span> 有趣的照片</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 其他</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page child" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></li><li><a class="site-page child" target="_blank" rel="noopener" href="https://buy.dreamlove.top/"><i class="fa-fw fas fa-heart"></i><span> 购物</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">webpack构建工具的学习</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2022-05-28T22:47:18.000Z" title="发表于 2022-05-28 22:47:18">2022-05-28</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2022-07-18T08:25:40.000Z" title="更新于 2022-07-18 08:25:40">2022-07-18</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/HTML/">HTML</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/HTML/javscript/">javscript</a><i class="fas fa-angle-right post-meta-separator"></i><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/HTML/javscript/webpack/">webpack</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">8.3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>34分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" data-flag-title="webpack构建工具的学习"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="什么是webpack"><a href="#什么是webpack" class="headerlink" title="什么是webpack"></a>什么是webpack</h2><ul><li>是一个模块打包工具</li><li>webpack将前端的所有资源文件(js/json/css/img/less…)都看做模块,来进行处理</li><li>会根据模块的依赖关系进行分析,生成对应的资源</li><li>原生的webpack只可以完成<code>js/json</code>的打包编译,而转换什么的需要其他插件进行完成,比如说es6转es5,箭头函数转换,都需要依赖其他loader或者插件(plugins)</li></ul><h3 id="五个核心概念"><a href="#五个核心概念" class="headerlink" title="五个核心概念"></a>五个核心概念</h3><ol><li><strong>入口(entry)</strong>: 告诉webpack应该使用哪个模块,作为构建内部依赖图的开始,比如vue中我们经常在一个文件夹当中建立<code>index.js</code>或者<code>main.js</code>作为入口文件</li><li><strong>出口(output)</strong>: 在哪里输出文件,以及如何命名这些文件<ul><li>比如经常可以看到有些目录有<code>dist</code> <code>build</code>等这些,里面只有js,css,img等一些文件,就是打包输出后的东西</li></ul></li><li><strong>loader</strong>:<ul><li>我们需要注意,原生webpack只支持解析<code>js</code>和 <code>json</code>,其他的需要安装对应的loader,比如处理less就需要<code>less-loader</code></li><li>本身是一个函数,接收源文件作为参数,返回转换结果</li><li>loader异步以<code>xxx-loader</code>方式命名,<code>xxx</code>代表了这个loader要做的转换功能</li></ul></li><li><strong>插件(plugins)</strong>:<ul><li>执行访问更广的任务,从打包到优化都可以实现</li><li>完成一些loader不能完成的功能</li></ul></li><li><strong>模式(model)</strong><ul><li>有生产模式<code>production</code> , 开发模式<code>development</code>,主要区别就是是否会将代码进行压缩</li></ul></li></ol><h3 id="安装webpack"><a href="#安装webpack" class="headerlink" title="安装webpack"></a>安装webpack</h3><ul><li>当然,离不开npm,所以npm初始化就不多说了,直接<code>npm init -y</code></li><li>安装webpack<ul><li><code>npm install webpack webpack-cli -g</code> //全局安装</li><li><code>npm install webpack webpack-cli -D</code>//局部安装</li><li>查看版本<code>webpack --version</code></li><li>还有,除了全局安装,记得也在项目局部也安装下,不然后面可能有莫名其妙的问题引发</li></ul></li></ul><h3 id="处理js和json文件"><a href="#处理js和json文件" class="headerlink" title="处理js和json文件"></a>处理js和json文件</h3><p><strong>目录结构如下:</strong></p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205261006555.png" alt="目录结构"></p><p><strong>代码如下:</strong></p><p><strong>index.js</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**index.js**/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> say <span class="keyword">from</span> <span class="string">"./module1.js"</span></span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> other <span class="keyword">from</span> <span class="string">"./module2.js"</span></span><br><span class="line"><span class="comment">//引入json</span></span><br><span class="line"><span class="keyword">import</span> jsonFile <span class="keyword">from</span> <span class="string">"../json/user.json"</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="title function_">say</span>());</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(other.<span class="property">a</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(other.<span class="property">b</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(jsonFile);</span><br></pre></td></tr></table></figure><p><strong>module1.js</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** module1.js **/</span></span><br><span class="line"><span class="comment">// 默认暴露</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">sayHello</span>(<span class="params"></span>) {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">"你好"</span>);</span><br><span class="line">};</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> sayHello</span><br></pre></td></tr></table></figure><p><strong>module2.js</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** module2.js **/</span></span><br><span class="line"><span class="comment">// 分别暴露</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">var</span> b = <span class="number">200</span>;</span><br></pre></td></tr></table></figure><p><strong>user.json</strong></p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** user.json **/</span></span><br><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"name"</span><span class="punctuation">:</span><span class="string">"李白"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"age"</span><span class="punctuation">:</span><span class="string">"2000"</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure><p><strong>index.html</strong></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** index.html **/</span></span><br><span class="line"><!<span class="variable constant_">DOCTYPE</span> html></span><br><span class="line"><html lang="en"></span><br><span class="line"><head></span><br><span class="line"> <meta charset="UTF-8"></span><br><span class="line"> <meta http-equiv="X-UA-Compatible" content="IE=edge"></span><br><span class="line"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></span><br><span class="line"> <title>Document</title></span><br><span class="line"></head></span><br><span class="line"><body></span><br><span class="line"> hello</span><br><span class="line"> <script src="./dist/js/main.js"></script></span><br><span class="line"> <script></span><br><span class="line"> </script></span><br><span class="line"></body></span><br><span class="line"></html></span><br></pre></td></tr></table></figure><p><strong>运行命令打包后的文件:</strong></p><p>运行:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//生产模式打包</span></span><br><span class="line">webpack ./js/index.<span class="property">js</span> -o ./dist/js --mode=development</span><br><span class="line"><span class="comment">//开发模式打包</span></span><br><span class="line">webpack ./js/index.<span class="property">js</span> -o ./dist/js --mode=development</span><br></pre></td></tr></table></figure><p><strong>输出:</strong></p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205261009549.png" alt="编译输出"></p><p><strong>注意:</strong></p><ul><li>es6情况下,如果引入的是一个json文件,<strong>那么引入这个json文件的时候,这个json文件是默认暴露</strong></li></ul><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">相当于你在user.json写的是</span><br><span class="line"><span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"name"</span><span class="punctuation">:</span><span class="string">"李白"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"age"</span><span class="punctuation">:</span><span class="string">"2000"</span></span><br><span class="line"><span class="punctuation">}</span></span><br><span class="line">那么es6就将这个作为默认暴露<span class="punctuation">,</span>类似于 export default <span class="punctuation">{</span></span><br><span class="line"> <span class="attr">"name"</span><span class="punctuation">:</span><span class="string">"李白"</span><span class="punctuation">,</span></span><br><span class="line"> <span class="attr">"age"</span><span class="punctuation">:</span><span class="string">"2000"</span></span><br><span class="line"><span class="punctuation">}</span></span><br></pre></td></tr></table></figure><h3 id="webpack-和webpack-cli的关系"><a href="#webpack-和webpack-cli的关系" class="headerlink" title="webpack 和webpack-cli的关系"></a>webpack 和webpack-cli的关系</h3><ul><li><p>vue中有vue-cli,webpack有webpack-cli , 有时候我就在想,这个没有cli和有cli有什么区别呢?不带<code>cli</code>的可以理解为一个工具,是死的,就如果程序一样,不双击运行永远不会运行,而<code>cli</code>就可以帮助我们去使用这个工具,比如是帮助我们使用<code>vue</code>,帮助我们去使用<code>webpack</code>等</p></li><li><p>cli说通俗点就是cli是一个让你在命令行中使用webpack/vue一些工具的辅助程序。</p></li></ul><h2 id="webpack的使用"><a href="#webpack的使用" class="headerlink" title="webpack的使用"></a>webpack的使用</h2><h3 id="基本输出操作"><a href="#基本输出操作" class="headerlink" title="基本输出操作"></a>基本输出操作</h3><ul><li>webpack 要编译的文件 -o 输出的文件 –mode=development或者production</li><li>比如 <code>webpack ./js/index.js -o ./dist/js --mode=development</code> 就将 js目录下的<code>index.js</code>文件打包输出到dist/js目录下(开发者模式)</li></ul><p>运行后输出</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205282115040.png" alt="输出"></p><ul><li>但是原生的webpack只支持js/json,并且不支持es6转换es5,箭头函数转换等等,这些都需要依赖<strong>loader</strong>或者<strong>插件</strong>,所以我们后面就来看看怎么使用这些loader或者插件来帮助我们完成</li></ul><h3 id="配置文件的使用"><a href="#配置文件的使用" class="headerlink" title="配置文件的使用"></a>配置文件的使用</h3><h4 id="前置了解"><a href="#前置了解" class="headerlink" title="前置了解"></a>前置了解</h4><ul><li><strong>src为程序员写的源码,建立配置文件的时候不要建立在src当中!</strong></li><li>为什么需要,每一次输入这么一长段的代码很不方便,我们不可能每次都敲这个命令来完成打包吧?<code>webpack ./js/index.js -o ./dist/js</code>,所以我们可以使用<strong>配置文件</strong>来帮助我们完成</li><li>还有就是,webpack需要对<strong>文件进行操作</strong>,所以依赖于nodejs运行,所以肯定是<strong>CMJ模块化规范!</strong>,所以你会看到,一会儿在webpack配置文件中使用<code>require</code>引入模块,一会在<code>src目录</code>下使用<code>import</code>引入模块的操作,一个是CommonJs模块,一个是es6模块规范~</li><li>还有就是基本上要用<strong>const</strong>来接收引入的模块,是<strong>防止有人再次定义了被覆盖而导致的错误</strong>,这种错误很难找到!</li><li>开发依赖和生产依赖<ul><li><strong>开发依赖</strong>,帮助程序员加工处理代码的,比如说<code>less</code></li><li><strong>生产依赖</strong>,帮助程序员完成某些功能的代码,比如说<code>lodash</code>,<code>jQuery</code>之类的</li></ul></li></ul><h4 id="建立配置文件并使用"><a href="#建立配置文件并使用" class="headerlink" title="建立配置文件并使用"></a>建立配置文件并使用</h4><p>在src外面建立一个文件名字叫 <strong>webpack.config.js</strong> 的文件,<a target="_blank" rel="noopener" href="https://www.webpackjs.com/configuration/">官网详细配置地址</a></p><p><code>webpack.config.js</code>配置代码</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * ComJs的模块化规范</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">"path"</span>);</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <span class="comment">//设置模式 development开发模式 production生产模式</span></span><br><span class="line"> <span class="attr">mode</span>:<span class="string">"development"</span>,</span><br><span class="line"> <span class="comment">//webpack入口文件</span></span><br><span class="line"> <span class="attr">entry</span>:<span class="string">"./src/js/index.js"</span>,</span><br><span class="line"> <span class="comment">//webpack出口(输出)文件</span></span><br><span class="line"> <span class="attr">output</span>:{</span><br><span class="line"> <span class="comment">//设置输出文件输出在哪里 需要设置一个绝对路径!</span></span><br><span class="line"> <span class="attr">path</span>:path.<span class="title function_">resolve</span>(__dirname,<span class="string">"dist"</span>),</span><br><span class="line"> <span class="comment">//设置出口文件的名称</span></span><br><span class="line"> <span class="comment">//如果是 index.js,那么会输出到path目录下,不会创建文件夹</span></span><br><span class="line"> <span class="comment">//如果是 js/index.js 就会输出到dist目录下的js目录下</span></span><br><span class="line"> <span class="attr">filename</span>:<span class="string">"js/index.js"</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li>这样子我们就不用输出很长的一段代码</li><li>只需要输入<code>webpack</code>就可,会自动寻找当前运行目录下的<code>webpack.config.js</code>配置文件</li></ul><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205282142069.png" alt="运行后输出到dist文件的js目录下"></p><h3 id="解析css文件-css-loader和style-loader"><a href="#解析css文件-css-loader和style-loader" class="headerlink" title="解析css文件 css-loader和style-loader"></a>解析css文件 css-loader和style-loader</h3><ul><li>由于webpack不能解析css文件,只能解析<code>js或者是json文件</code>,但是我们想解析css,那么我们需要安装解析css的插件 - <code>css-loader</code></li></ul><p>没有安装<code>css-loader</code>之前,会提示<code>You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders</code></p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205282157026.png" alt="如图"></p><ul><li><strong>安装插件</strong><ul><li><code>npm install css-loader style-loader -D</code></li></ul></li></ul><p><strong>1.首先</strong>在主入口当中添加引入css <code>import "./css/index.css"</code></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">"../css/index.css"</span>;<span class="comment">//引入css文件</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//当然,也可以自己命令下接收</span></span><br><span class="line"><span class="keyword">import</span> css <span class="keyword">from</span> <span class="string">"../css/index.css"</span>;</span><br></pre></td></tr></table></figure><p><strong>2.然后</strong>配置<strong>webpack.config.js</strong></p><ul><li><p><code>use</code>当中的顺序是从右到左的!</p></li><li><p><code>style-loader</code>作用: 将css-loader解析的内容处理,生成<code>style</code>并挂载到<code>head</code>上</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205282214771.png" alt="如图,生成style标签,并挂载到head上"></p></li><li><p><code>css-loader</code>作用: css-loader帮我们解析css文件里面的css代码</p><ul><li><p>比如这是在只使用了<code>css-loader</code>的情况下输出接收到的内容,可以看到,<code>css-loader</code>帮我们读取了css的内容</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205282212020.png" alt="只使用了css-loader的情况下输出接收到的内容"></p></li></ul></li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//loader的配置项</span></span><br><span class="line"><span class="attr">module</span>: {</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> <span class="comment">//解析css</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line"> <span class="comment">// <= 执行顺序是从右到左的,先css-loader ,再执行style-loader</span></span><br><span class="line"> <span class="attr">use</span>: [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>]</span><br><span class="line"> },</span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>3.就可以直接使用了<del>可以运行webpack命令来看看</del></strong></p><h3 id="解析less文件-less-loader"><a href="#解析less文件-less-loader" class="headerlink" title="解析less文件 less-loader"></a>解析less文件 less-loader</h3><ul><li>安装插件<ul><li><code>npm install less-loader -D</code></li></ul></li></ul><p><strong>1.首先</strong>在主入口当中添加引入less <code>import "./css/index.css"</code></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="string">"../css/index.less"</span>;<span class="comment">//引入less文件</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//当然,也可以自己命令下接收</span></span><br><span class="line"><span class="keyword">import</span> cssLess <span class="keyword">from</span> <span class="string">"../css/index.less"</span>;</span><br></pre></td></tr></table></figure><p><strong>2.然后</strong>修改下<code>webpack.config.js</code></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: {</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> <span class="comment">//解析less</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>:<span class="regexp">/\.less$/</span>,</span><br><span class="line"> <span class="attr">use</span>:[<span class="string">'style-loader'</span>,<span class="string">"css-loader"</span>,<span class="string">"less-loader"</span>]</span><br><span class="line"> },</span><br><span class="line"> ]</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">如果想实现复用的话也可以使用 扩展运算符 ...</span><br><span class="line"><span class="keyword">const</span> styleLoader = [<span class="string">'style-loader'</span>,<span class="string">"css-loader"</span>];</span><br><span class="line">{</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,</span><br><span class="line"> <span class="attr">use</span>: [...styleLoader, <span class="string">"less-loader"</span>]</span><br><span class="line">},</span><br></pre></td></tr></table></figure><h3 id="打包html文件-html-webpack-plugin-插件"><a href="#打包html文件-html-webpack-plugin-插件" class="headerlink" title="打包html文件 html-webpack-plugin(插件)"></a>打包html文件 html-webpack-plugin(插件)</h3><ul><li>我们之前的打包,只将<code>js,less,css</code>打包到了<code>dist</code>目录下,<code>html</code>这个老大哥还留着在原来的地方,这次我们打包html文件</li><li><strong>安装</strong><ul><li><code>npm install html-webpack-plugin -D</code></li></ul></li><li>其他<ul><li><a target="_blank" rel="noopener" href="https://www.webpackjs.com/plugins/html-webpack-plugin/">webpack关于此插件的介绍使用</a></li><li><a target="_blank" rel="noopener" href="https://github.com/jantimon/html-webpack-plugin">此插件的github地址</a></li></ul></li></ul><p><strong>1.首先</strong>配置下<code>webpack.config.js</code>文件</p><ul><li>注意这里是插件的使用,所以新增加了一个配置项<code>plugins</code></li><li>注意有模板和没有模板的区别!</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"><span class="keyword">var</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> webpackConfig = {</span><br><span class="line"> ...</span><br><span class="line"> <span class="comment">//这个是没有模板的,也就是如果自己的html文件写了内容,是会被覆盖的!</span></span><br><span class="line"> <span class="comment">//plugins: [new HtmlWebpackPlugin()]</span></span><br><span class="line"> <span class="comment">//这个是有模板的,以自己的html为模板来进行打包html!!!!!!!!!!!!!</span></span><br><span class="line"> <span class="comment">// 注意这个要带 . 不然路径不对!</span></span><br><span class="line"> <span class="attr">plugins</span>: [<span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>({<span class="attr">template</span>:<span class="string">"./src/index.html"</span>})]</span><br><span class="line"> ...</span><br><span class="line">};</span><br></pre></td></tr></table></figure><h3 id="html-loader和html-webpack-plugin冲突导致的报错"><a href="#html-loader和html-webpack-plugin冲突导致的报错" class="headerlink" title="html-loader和html-webpack-plugin冲突导致的报错"></a>html-loader和html-webpack-plugin冲突导致的报错</h3><h4 id="前置"><a href="#前置" class="headerlink" title="前置"></a>前置</h4><p>之前学习的时候是webpack4为基本,现在到webpack5了,有些问题了,当我们即使用<code>html-webpack-plugin</code> 又使用<code>html-loader</code>的时候,就会发生这个报错(至少在我现在的版本的情况下会报错!)</p><ul><li>“html-loader”: “^3.1.0”,</li><li>“html-webpack-plugin”: “^5.5.0”</li><li>“webpack”: “^5.72.1”,</li><li>“webpack-cli”: “^4.9.2”</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable constant_">ERROR</span> <span class="keyword">in</span> <span class="title class_">Error</span>: <span class="title class_">Child</span> compilation <span class="attr">failed</span>:</span><br><span class="line"> <span class="title class_">Module</span> not <span class="attr">found</span>: <span class="title class_">Error</span>: <span class="title class_">Can</span><span class="string">'t resolve '</span>../dist/js/index.<span class="property">js</span><span class="string">' in '</span><span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\src<span class="string">':</span></span><br><span class="line"><span class="string"> Error: Can'</span>t resolve <span class="string">'../dist/js/index.js'</span> <span class="keyword">in</span> <span class="string">'D:\develop\phpstudy_pro\WWW\webpackstudyagain\src'</span></span><br><span class="line"> <span class="title class_">ModuleNotFoundError</span>: <span class="title class_">Module</span> not <span class="attr">found</span>: <span class="title class_">Error</span>: <span class="title class_">Can</span><span class="string">'t resolve '</span>../dist/js/index.<span class="property">js</span><span class="string">' in '</span><span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\src<span class="string">'</span></span><br></pre></td></tr></table></figure><h4 id="冲突报错解决"><a href="#冲突报错解决" class="headerlink" title="冲突报错解决"></a>冲突报错解决</h4><ul><li>原来的<code>index.html</code>改名为<code>index.ejs</code>然后webpack.config.js修改下即可</li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//loader的配置项</span></span><br><span class="line"><span class="attr">module</span>: {</span><br><span class="line"> ...</span><br><span class="line"> <span class="comment">//原来的改为即可</span></span><br><span class="line"> <span class="comment">//plugins:[new HtmlWebpackPlugin({template:"./src/index.html"}),]</span></span><br><span class="line"> <span class="attr">plugins</span>:[<span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>({<span class="attr">template</span>:<span class="string">"./src/index.ejs"</span>}),]</span><br><span class="line"> ...</span><br><span class="line">},</span><br><span class="line"></span><br></pre></td></tr></table></figure><ul><li>如果想在ejs引入图片文件并实现后期打包的话,就需要使用<code><%= require('图片位置') %></code></li></ul><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">body</span>></span></span><br><span class="line"> <span class="comment"><!-- <img src="./imgs/lh.jpg"> 不用这个--></span></span><br><span class="line"> <span class="comment"><!-- 使用这个代替 --></span></span><br><span class="line"> <span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">" <%= require('./imgs/lh.jpg')%> "</span>></span></span><br><span class="line"> </span><br><span class="line"><span class="tag"></<span class="name">body</span>></span></span><br></pre></td></tr></table></figure><h3 id="webpack5使用asset-module"><a href="#webpack5使用asset-module" class="headerlink" title="webpack5使用asset module"></a>webpack5使用asset module</h3><ul><li>在webpack5之前,我们url-loader、file-loader、raw-loader来完成操作</li><li>现在webpack5自带的asset-module就可以实现以前的功能</li><li>之前通过<code>use</code>来使用这些loader,<code>asset module</code>通过<code>type</code>来完成</li><li><a target="_blank" rel="noopener" href="https://webpack.js.org/guides/asset-modules/">官网(英文)的介绍</a></li></ul><h4 id="功能替换"><a href="#功能替换" class="headerlink" title="功能替换"></a>功能替换</h4><ul><li>asset/resource<ul><li>将资源分割为单独的文件，并导出url，就是之前的 file-loader的功能</li><li><a target="_blank" rel="noopener" href="https://webpack.js.org/guides/asset-modules/#resource-assets">官网关于此的api</a></li></ul></li><li>asset/inline<ul><li>将资源导出为dataURL（url(data:)）的形式，之前的 url-loader的功能</li></ul></li><li>asset/source<ul><li>将资源导出为源码（source code）. 之前的 raw-loader 功能</li></ul></li><li>asset<ul><li>自动选择导出为单独文件或者 dataURL形式（默认为8KB）</li></ul></li></ul><h4 id="打包样式中的文件-方法1-asset-resource"><a href="#打包样式中的文件-方法1-asset-resource" class="headerlink" title="打包样式中的文件-方法1-asset/resource"></a>打包样式中的文件-方法1-asset/resource</h4><p>类似于<code>file-loader</code>相当于只是对文件进行了重命名,不具有转base64功能</p><p><strong>设置type为asset/resource</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: {</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> <span class="comment">//配置解析样式中图片</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>:<span class="regexp">/\.(png|jpg|gif|bmp|jpeg|webp)$/</span>,</span><br><span class="line"> <span class="attr">type</span>:<span class="string">'asset/resource'</span>,</span><br><span class="line"> <span class="comment">//配置项目</span></span><br><span class="line"> <span class="attr">generator</span>:{</span><br><span class="line"> <span class="comment">//设置处理输出的路径为 dist下的imags (也就是dist/imags)</span></span><br><span class="line"> <span class="comment">//并且设置图片名称为 选取hash值前五位</span></span><br><span class="line"> <span class="attr">filename</span>:<span class="string">"imgs/[hash:5][ext]"</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">},</span><br></pre></td></tr></table></figure><h4 id="打包样式中的文件-方法2-asste"><a href="#打包样式中的文件-方法2-asste" class="headerlink" title="打包样式中的文件-方法2-asste"></a>打包样式中的文件-方法2-asste</h4><p>类似于<code>url-loader</code>,可以设置图片小于设定的大小后进行base64编码</p><p><strong>设置type为asset</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: {</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> <span class="comment">//配置解析样式中图片</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>:<span class="regexp">/\.(png|jpg|gif|bmp|jpeg|webp)$/</span>,</span><br><span class="line"> <span class="attr">type</span>:<span class="string">'asset'</span>,</span><br><span class="line"> <span class="comment">// 转base64的条件</span></span><br><span class="line"> <span class="attr">parser</span>: {</span><br><span class="line"> <span class="comment">// 转base64的条件,当小于8kb的时候就转化为base64</span></span><br><span class="line"> <span class="attr">dataUrlCondition</span>: {</span><br><span class="line"> <span class="attr">maxSize</span>: <span class="number">8</span> * <span class="number">1024</span>, <span class="comment">// 8kb</span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//配置项目</span></span><br><span class="line"> <span class="attr">generator</span>:{</span><br><span class="line"> <span class="comment">//设置处理输出的路径为 dist下的imags (也就是dist/imags)</span></span><br><span class="line"> <span class="comment">//并且设置图片名称为 选取hash值前五位</span></span><br><span class="line"> <span class="attr">filename</span>:<span class="string">"imgs/[hash:5][ext]"</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">},</span><br></pre></td></tr></table></figure><h3 id="使用file-loader-url-loader的时候会出现多出来一部分"><a href="#使用file-loader-url-loader的时候会出现多出来一部分" class="headerlink" title="使用file-loader url-loader的时候会出现多出来一部分"></a>使用file-loader url-loader的时候会出现多出来一部分</h3><ul><li>将type设置为<code>javascript/auto</code></li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.(jpg|png|gif)$/</span>,</span><br><span class="line"> <span class="attr">loader</span>: <span class="string">'url-loader'</span>,</span><br><span class="line"> <span class="attr">options</span>: {</span><br><span class="line"> <span class="attr">esModule</span>: <span class="literal">false</span>, <span class="comment">// webpack5默认开启esModule 手动关闭</span></span><br><span class="line"> <span class="comment">// 图片大小小于8kb，就会被base64处理</span></span><br><span class="line"> <span class="comment">// 优点：减少请求数量（减轻服务器压力）</span></span><br><span class="line"> <span class="comment">// 缺点：图片体积会更大（文件请求速度更慢）</span></span><br><span class="line"> <span class="attr">limit</span>: <span class="number">8</span> * <span class="number">1024</span>,</span><br><span class="line"> },</span><br><span class="line"> <span class="attr">type</span>: <span class="string">'javascript/auto'</span> <span class="comment">// 阻止webpack5中asset</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="处理html文件的图片-html-loader"><a href="#处理html文件的图片-html-loader" class="headerlink" title="处理html文件的图片 html-loader"></a>处理html文件的图片 html-loader</h3><h4 id="不处理html文件图片时候打包后的效果"><a href="#不处理html文件图片时候打包后的效果" class="headerlink" title="不处理html文件图片时候打包后的效果"></a>不处理html文件图片时候打包后的效果</h4><p>发现并没有将html当中的图片进行打包</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205290844981.png" alt="没有处理html文件图片"></p><h4 id="处理步骤和效果"><a href="#处理步骤和效果" class="headerlink" title="处理步骤和效果"></a>处理步骤和效果</h4><p><strong>1.首先安装loader</strong>: <code>npm install html-loader -D</code></p><p><strong>2.然后配置webpack.config.js</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//loader的配置项</span></span><br><span class="line"><span class="attr">module</span>: {</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> <span class="comment">//配置解析html中的图片<img>标签资源</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>:<span class="regexp">/\.(html)$/</span>,</span><br><span class="line"> <span class="attr">use</span>:{</span><br><span class="line"> <span class="attr">loader</span>:<span class="string">"html-loader"</span>,</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">},</span><br></pre></td></tr></table></figure><p>3.然后就可以测试下是否正常了</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205290848208.png" alt="配置完成后被正确的打包和引入了"></p><h3 id="打包其他资源-比如说字体图标-mp4等资源"><a href="#打包其他资源-比如说字体图标-mp4等资源" class="headerlink" title="打包其他资源(比如说字体图标,mp4等资源)"></a>打包其他资源(比如说字体图标,mp4等资源)</h3><ul><li>有时候我们使用了阿里图标字体库,就必须要使用到<code>ttf</code>字体资源,所以我们就要考虑这些资源的打包</li></ul><h4 id="webpack5的使用-asset-resource"><a href="#webpack5的使用-asset-resource" class="headerlink" title="webpack5的使用 asset/resource"></a>webpack5的使用 asset/resource</h4><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: {</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> <span class="comment">//配置解析其他资源文件,比如说图标字体</span></span><br><span class="line"> <span class="comment">//与其说是解析,不如说是搬运下</span></span><br><span class="line"> {</span><br><span class="line"> <span class="comment">//设置排除列表</span></span><br><span class="line"> <span class="attr">exclude</span>:<span class="regexp">/\.(html|less|css|png|jpg|bmp|js|gif|json|jped|webp|ejs)$/</span>,</span><br><span class="line"> <span class="attr">type</span>:<span class="string">"asset/resource"</span>,</span><br><span class="line"> <span class="attr">generator</span>:{</span><br><span class="line"> <span class="attr">filename</span>:<span class="string">"media/[hash][ext]"</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h4 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h4><p> 使用这个asset/resource的时候,不知道是不是版本问题还是我配置的问题,老是出现<code>__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;</code> 这个没有用的文件和文件内容,很奇怪,,,,,,</p><p> 之前用webpack4的时候就没有,可能是因为是我写这个的时候使用的都是<code>asset</code>或者<code>asset/resource</code>来处理,而没有使用<code>file-loader</code> 或 <code>url-loader</code>来处理的原因吧</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291001202.png" alt="多出来的"></p><h3 id="webpack使用webpack-dev-server"><a href="#webpack使用webpack-dev-server" class="headerlink" title="webpack使用webpack-dev-server"></a>webpack使用webpack-dev-server</h3><ul><li>安装,最好是全局和局部都安装!!!! (<strong>带指令集的最好全局安装</strong>)<ul><li><code>npm install webpack-dev-server -D</code></li><li><code>npm install webpack-dev-server -g</code></li></ul></li></ul><p><strong>1.首先</strong> 在配置对象当中添加 <code>devServer</code> 配置选项</p><ul><li>热更新(热模替换): 当内容发生变化的时候,只重新编译变化了的部分,而不会引发整体的编译更新</li><li>不开启热更新的话,当内容发生变化的时候,就会全部重新编译全部更新</li></ul><p>webpack.config.js</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> ...</span><br><span class="line"> <span class="attr">devServer</span>:{</span><br><span class="line"> <span class="attr">port</span>:<span class="number">5000</span>,<span class="comment">//开启服务器的端口号,</span></span><br><span class="line"> <span class="attr">open</span>:<span class="literal">true</span>,<span class="comment">//编译完成是否自动打开浏览器</span></span><br><span class="line"> <span class="attr">hot</span>:<span class="literal">true</span>,<span class="comment">//开启模块热更新(热模替换)</span></span><br><span class="line"> },</span><br><span class="line"> ...</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>2.使用</strong></p><p>后面就可以了,要使用这个<code>webpack-dev-server</code>,就只需要把<code>webpack</code> 改为<code>webpack-dev-server</code>即可</p><p>使用webpack-dev-server命名</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291023266.png"></p><h3 id="生产环境"><a href="#生产环境" class="headerlink" title="生产环境"></a>生产环境</h3><ul><li>之前如果已经配置完成了,那么开发环境就可以用了,开发我们不讲究什么兼容性啊,什么压缩啊,而生产环境就需要</li><li>所以我们可以准备二套webpack的配置文件,一套用于生产,一套用于开发</li><li>将之前写的配置文件配置为生产环境</li></ul><h4 id="准备二套配置文件"><a href="#准备二套配置文件" class="headerlink" title="准备二套配置文件"></a>准备二套配置文件</h4><ul><li>建立config文件夹,里面包括二个文件</li><li><code>webpack.dev.js</code>文件 用于开发环境</li><li><code>webpack.prod.js</code>文件 用于生产环境</li></ul><h5 id="wepack-dev-js文件"><a href="#wepack-dev-js文件" class="headerlink" title="wepack.dev.js文件"></a>wepack.dev.js文件</h5><h6 id="webpack4的时候-参考下"><a href="#webpack4的时候-参考下" class="headerlink" title="webpack4的时候(参考下)"></a>webpack4的时候(参考下)</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">"path"</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">"html-webpack-plugin"</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> styleLoader = [<span class="string">'style-loader'</span>, <span class="string">'css-loader'</span>];</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <span class="comment">//五大核心概念在这里都会被陆续配置</span></span><br><span class="line"> <span class="attr">mode</span>: <span class="string">"development"</span>, <span class="comment">//开发模式还是生产模式</span></span><br><span class="line"> <span class="attr">entry</span>: <span class="string">"./src/js/index.js"</span>, <span class="comment">//入口文件</span></span><br><span class="line"> <span class="comment">//出口文件</span></span><br><span class="line"> <span class="attr">output</span>: {</span><br><span class="line"> <span class="comment">//设置出口文件的输出路径</span></span><br><span class="line"> <span class="attr">path</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">"dist"</span>),</span><br><span class="line"> <span class="comment">//设置出口文件名称</span></span><br><span class="line"> <span class="comment">// filename:"index.js"</span></span><br><span class="line"> <span class="attr">filename</span>: <span class="string">"js/index.js"</span>, <span class="comment">//这样子写js文件就会被放入到js当中,注意不能/js/index.js!</span></span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//里面配置一个个的loader</span></span><br><span class="line"> <span class="attr">module</span>: {</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> <span class="comment">//css-loader的配置</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.css$/</span>, <span class="comment">//指明要处理的文件类型</span></span><br><span class="line"> <span class="comment">//执行顺序的从右到左的!</span></span><br><span class="line"> <span class="comment">// 简写</span></span><br><span class="line"> <span class="attr">use</span>: [...styleLoader]</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// less-loader配置</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,</span><br><span class="line"> <span class="attr">use</span>: [...styleLoader, <span class="string">"less-loader"</span>]</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 配置解析样式中的图片 file-loader </span></span><br><span class="line"> <span class="comment">// {</span></span><br><span class="line"> <span class="comment">// test:/\.(png|jpg|gif|bmp)$/,</span></span><br><span class="line"> <span class="comment">// use:[</span></span><br><span class="line"> <span class="comment">// {</span></span><br><span class="line"> <span class="comment">// loader:"file-loader",</span></span><br><span class="line"> <span class="comment">// options:{</span></span><br><span class="line"> <span class="comment">// outputPath:"imgs",//配置图片加工后存放的位置</span></span><br><span class="line"> <span class="comment">// name:'[hash:5].[ext]',//配置生成图片的名字 + 后缀,</span></span><br><span class="line"> <span class="comment">// }</span></span><br><span class="line"> <span class="comment">// }</span></span><br><span class="line"> <span class="comment">// ]</span></span><br><span class="line"> <span class="comment">// },</span></span><br><span class="line"> <span class="comment">// 配置解析样式中的图片 url-loader</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.(png|jpg|gif|bmp)$/</span>,</span><br><span class="line"> <span class="attr">use</span>:[</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">loader</span>:<span class="string">'url-loader'</span>,</span><br><span class="line"> <span class="attr">options</span>:{</span><br><span class="line"> <span class="attr">outputPath</span>:<span class="string">"imgs"</span>,</span><br><span class="line"> <span class="attr">name</span>:<span class="string">'[hash:5].[ext]'</span>,</span><br><span class="line"> <span class="attr">limit</span>:<span class="number">9</span>*<span class="number">1024</span>,</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//配置解析html中的图片<img>资源</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>:<span class="regexp">/\.(html)$/</span>,</span><br><span class="line"> <span class="attr">use</span>:{</span><br><span class="line"> <span class="attr">loader</span>:<span class="string">"html-loader"</span>,</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//配置处理其他资源</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">exclude</span>:<span class="regexp">/\.(html|less|css|png|jpg|jpeg|bmp|js|gif|json)$/</span>,</span><br><span class="line"> <span class="attr">use</span>:[</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">loader</span>:<span class="string">"file-loader"</span>,</span><br><span class="line"> <span class="attr">options</span>:{</span><br><span class="line"> <span class="attr">outputPath</span>:<span class="string">"media"</span>,</span><br><span class="line"> <span class="attr">name</span>:<span class="string">"[hash:5].[ext]"</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//使用插件</span></span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>({</span><br><span class="line"> <span class="attr">template</span>: <span class="string">"./src/index.html"</span></span><br><span class="line"> }),</span><br><span class="line"> ],</span><br><span class="line"> <span class="attr">devServer</span>:{</span><br><span class="line"> <span class="attr">port</span>:<span class="number">5000</span>,<span class="comment">//开启服务器的端口号</span></span><br><span class="line"> <span class="attr">open</span>:<span class="literal">true</span>,<span class="comment">//编译完成自动打开浏览器</span></span><br><span class="line"> <span class="attr">hot</span>:<span class="literal">true</span>,<span class="comment">//开启模块热更新(热模替换)</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h6 id="webpack5的时候-这里以这套为例"><a href="#webpack5的时候-这里以这套为例" class="headerlink" title="webpack5的时候(这里以这套为例)"></a>webpack5的时候(这里以这套为例)</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * ComJs的模块化规范</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> path = <span class="built_in">require</span>(<span class="string">"path"</span>);</span><br><span class="line"><span class="comment">//html打包插件</span></span><br><span class="line"><span class="keyword">var</span> <span class="title class_">HtmlWebpackPlugin</span> = <span class="built_in">require</span>(<span class="string">'html-webpack-plugin'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">//复用</span></span><br><span class="line"><span class="keyword">const</span> styleLoader = [<span class="string">'style-loader'</span>, <span class="string">"css-loader"</span>];</span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <span class="comment">//设置模式 development开发模式 production生产模式</span></span><br><span class="line"> <span class="attr">mode</span>: <span class="string">"development"</span>,</span><br><span class="line"> <span class="comment">//webpack入口文件</span></span><br><span class="line"> <span class="attr">entry</span>: <span class="string">"./src/js/index.js"</span>,</span><br><span class="line"> <span class="comment">//webpack出口(输出)文件</span></span><br><span class="line"> <span class="attr">output</span>: {</span><br><span class="line"> <span class="comment">//设置输出文件输出在哪里</span></span><br><span class="line"> <span class="attr">path</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">"dist"</span>),</span><br><span class="line"> <span class="comment">//设置出口文件的名称</span></span><br><span class="line"> <span class="comment">//如果是 index.js,那么会输出到path目录下,不会创建文件夹</span></span><br><span class="line"> <span class="comment">//如果是 js/index.js 就会输出到dist目录下的js目录下</span></span><br><span class="line"> <span class="attr">filename</span>: <span class="string">"js/index.js"</span></span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//loader的配置项</span></span><br><span class="line"> <span class="attr">module</span>: {</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> <span class="comment">//解析css</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line"></span><br><span class="line"> <span class="comment">// <= 执行顺序是从右到左的,先css-loader ,再style-loader</span></span><br><span class="line"> <span class="attr">use</span>: [...styleLoader],</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//解析less</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,</span><br><span class="line"> <span class="attr">use</span>: [...styleLoader, <span class="string">"less-loader"</span>],</span><br><span class="line"></span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//配置解析样式中图片</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.(png|jpg|gif|bmp|jpeg|webp)$/</span>,</span><br><span class="line"> <span class="attr">type</span>: <span class="string">'asset'</span>,</span><br><span class="line"> <span class="comment">// 转base64的条件</span></span><br><span class="line"> <span class="attr">parser</span>: {</span><br><span class="line"> <span class="comment">// 转base64的条件</span></span><br><span class="line"> <span class="attr">dataUrlCondition</span>: {</span><br><span class="line"> <span class="attr">maxSize</span>: <span class="number">8</span> * <span class="number">1024</span>, <span class="comment">// 8kb</span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//配置项目</span></span><br><span class="line"> <span class="attr">generator</span>: {</span><br><span class="line"> <span class="comment">//设置处理输出的路径为 dist下的imags (也就是dist/imags)</span></span><br><span class="line"> <span class="comment">//并且设置图片名称为 选取hash值前五位</span></span><br><span class="line"> <span class="attr">filename</span>: <span class="string">"imgs/[hash:5][ext]"</span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//配置解析html中的图片<img>标签资源</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.(html)$/</span>,</span><br><span class="line"> <span class="attr">use</span>: {</span><br><span class="line"> <span class="attr">loader</span>: <span class="string">"html-loader"</span>,</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//配置解析其他资源文件,比如说图标字体</span></span><br><span class="line"> <span class="comment">//与其说是解析,不如说是搬运下</span></span><br><span class="line"> {</span><br><span class="line"> <span class="comment">//设置排除列表</span></span><br><span class="line"> <span class="attr">exclude</span>: <span class="regexp">/\.(html|less|css|png|jpg|bmp|js|gif|json|jped|webp|ejs)$/</span>,</span><br><span class="line"> <span class="attr">type</span>: <span class="string">"asset/resource"</span>,</span><br><span class="line"> <span class="attr">generator</span>: {</span><br><span class="line"> <span class="attr">filename</span>: <span class="string">"media/[hash][ext]"</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//插件的配置项</span></span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> <span class="keyword">new</span> <span class="title class_">HtmlWebpackPlugin</span>({</span><br><span class="line"> <span class="attr">template</span>: <span class="string">"./src/index.ejs"</span></span><br><span class="line"> }), </span><br><span class="line"> ],</span><br><span class="line"> <span class="attr">devServer</span>:{</span><br><span class="line"> <span class="attr">port</span>:<span class="number">5000</span>,<span class="comment">//开启服务器的端口号,</span></span><br><span class="line"> <span class="attr">open</span>:<span class="literal">true</span>,<span class="comment">//编译完成是否自动打开浏览器</span></span><br><span class="line"> <span class="attr">hot</span>:<span class="literal">true</span>,<span class="comment">//开启模块热更新(热模替换)</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h4 id="使用package-json当中运行脚本-这样子就不用每次都输入很长一段代码了"><a href="#使用package-json当中运行脚本-这样子就不用每次都输入很长一段代码了" class="headerlink" title="使用package.json当中运行脚本 这样子就不用每次都输入很长一段代码了"></a>使用package.json当中运行脚本 这样子就不用每次都输入很长一段代码了</h4><ul><li><p>在webpack中,当运行webpack的时候,可以指明配置文件在哪里,使用 <code>--config</code>就可以指明,否者的话就去当前运行目录下寻找是否有<code>webpack.config.js</code>文件!</p><ul><li>比如 <code>webpack --config ./config/webpack.dev.js</code> 就指明webpack的配置文件在哪里</li></ul></li><li><p><strong>在package.json当中</strong>添加<code>script</code>配置项</p></li></ul><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"scripts"</span>: {</span><br><span class="line"> <span class="string">"start"</span>: <span class="string">"webpack-dev-server --config ./config/webpack.dev.js"</span>,</span><br><span class="line"> <span class="string">"build"</span>: <span class="string">"webpack --config ./config/webpack.prod.js"</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p> 后期即可通过<code>npm run start</code>来进行start当中的命令,通过<code>npm run build</code>来运行build命令!</p><p> 提醒下:~如果script当中是以<code>start</code>的key值,那么可以简写就可以运行命令,直接<code>npm start</code>就可以,而其他的不可以!</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291036215.png"></p><h4 id="提取css为单独的文件-mini-css-extract-plugin"><a href="#提取css为单独的文件-mini-css-extract-plugin" class="headerlink" title="提取css为单独的文件 mini-css-extract-plugin"></a>提取css为单独的文件 mini-css-extract-plugin</h4><p><del><strong>webpack4测试可以css可以结合less使用,webpack5莫名其妙less无法和css结合…我这有问题!!!!!!!!!!!!</strong></del></p><p><del><strong>webpack4测试可以css可以结合less使用,webpack5莫名其妙less无法和css结合…我这有问题!!!!!!!!!!!!</strong></del></p><p><del><strong>webpack4测试可以css可以结合less使用,webpack5莫名其妙less无法和css结合…我这有问题!!!!!!!!!!!!</strong></del></p><ul><li>之前的css,都是包含在js了,通过style-loader css-loader来进行解析使用,但是我们后期打包想分离,css就是css,js就是js</li><li>就需要使用插件<code>mini-css-extract-plugin</code></li><li>复习下 style-loader的用处, 就是将js当中的css创建生成标签 ,然后插入到<code>head</code>中</li><li>关于此插件的api<ul><li><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/mini-css-extract-plugin">npm地址</a></li><li><a target="_blank" rel="noopener" href="https://github.com/webpack-contrib/mini-css-extract-plugin">github地址</a></li></ul></li></ul><p><strong>1.安装</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev mini-css-extract-plugin</span><br></pre></td></tr></table></figure><p><strong>2.配置</strong>loader</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//引入mini-css-extract-plugin，用于提取css为单独文件</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">MiniCssExtractPlugin</span> = <span class="built_in">require</span>(<span class="string">'mini-css-extract-plugin'</span>);</span><br><span class="line">{</span><br><span class="line"><span class="comment">// 处理less资源</span></span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,</span><br><span class="line"> <span class="attr">exclude</span>:<span class="regexp">/node_modules/</span>,</span><br><span class="line"> <span class="attr">use</span>: [</span><br><span class="line"> <span class="title class_">MiniCssExtractPlugin</span>.<span class="property">loader</span>,</span><br><span class="line"> <span class="string">'css-loader'</span>,</span><br><span class="line"> <span class="string">'less-loader'</span>,</span><br><span class="line"> ]</span><br><span class="line">},</span><br><span class="line"> </span><br><span class="line">{</span><br><span class="line"><span class="comment">// 处理css资源</span></span><br><span class="line"><span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line"><span class="attr">use</span>: [</span><br><span class="line"> <span class="title class_">MiniCssExtractPlugin</span>.<span class="property">loader</span>,</span><br><span class="line"> <span class="string">'css-loader'</span>,</span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>3.配置插件</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> ...</span><br><span class="line"> <span class="comment">//插件的配置项</span></span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> <span class="comment">//提取css文件</span></span><br><span class="line"> <span class="keyword">new</span> <span class="title class_">MiniCssExtractPlugin</span>({</span><br><span class="line"> <span class="attr">filename</span>: <span class="string">"./css/index.css"</span>,</span><br><span class="line"> }),</span><br><span class="line"> ],</span><br><span class="line"> ...</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>3.使用</strong> 在配置了package.json的情况下,直接<code>npm run build</code>即可</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291049105.png" alt="测试正常,没有出现异常"></p><h4 id="css兼容性处理"><a href="#css兼容性处理" class="headerlink" title="css兼容性处理"></a>css兼容性处理</h4><ul><li>注意,修改下打包的配置项目为开发模式 <strong>mode = production</strong> ,否者不会处理兼容性问题(因为开发模式要什么兼容性,生产环境才要兼容性)</li></ul><p><strong>1.安装loader</strong></p><ul><li><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/postcss-loader">postcss网站</a></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install postcss postcss-loader postcss-preset-env -D</span><br></pre></td></tr></table></figure><p>**2.定义通用配置 **因为css和less样式文件都要进行兼容性处理，所以我们定义好一个通用的配置：~ (相当于告诉这个工具,要兼容到哪些浏览器) ~!!!</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 配置一个styleLoader，处理less和css时都会使用</span></span><br><span class="line"><span class="keyword">const</span> styleLoader = [<span class="title class_">MiniCssExtractPlugin</span>.<span class="property">loader</span>, <span class="string">'css-loader'</span>, {</span><br><span class="line"> <span class="attr">loader</span>: <span class="string">"postcss-loader"</span>,</span><br><span class="line"> <span class="attr">options</span>: {</span><br><span class="line"> <span class="attr">postcssOptions</span>: {</span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> [</span><br><span class="line"> <span class="string">"postcss-preset-env"</span>,</span><br><span class="line"> {</span><br><span class="line"> <span class="comment">// Options</span></span><br><span class="line"> },</span><br><span class="line"> ],</span><br><span class="line"> ],</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line"> },</span><br><span class="line">];</span><br></pre></td></tr></table></figure><p><strong>3.修改css-loader和less-loader配置</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line"> <span class="comment">// 处理css资源</span></span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.css$/</span>,</span><br><span class="line"> <span class="attr">use</span>: [...styleLoader]</span><br><span class="line">},</span><br><span class="line">{</span><br><span class="line"> <span class="comment">// 处理less资源</span></span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,</span><br><span class="line"> <span class="attr">use</span>: [...styleLoader, <span class="string">'less-loader'</span>]</span><br><span class="line">},</span><br></pre></td></tr></table></figure><p><strong>4.配置package.json，在其中追加browserslist配置，通过配置加载指定的css兼容性样式</strong></p><ul><li><p>browserslist 是一套描述产品目标运行环境的工具，它被广泛用在各种涉及浏览器/移动端的兼容性支持工具中</p><ul><li>详细配置规则参考：<a target="_blank" rel="noopener" href="https://github.com/browserslist/browserslist">https://github.com/browserslist/browserslist</a></li></ul></li><li><p>若出现版本不兼容，或配置不正确的错误，那么需更换依赖包版本： npm i less-loader@5 postcss-loader@3</p></li></ul><p><strong>代码:</strong> vue脚手架用的就是这一套~</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//注意,package.json不可以有注释,记得删除!</span></span><br><span class="line"><span class="string">"browserslist"</span>: {</span><br><span class="line"> <span class="comment">// 开发环境</span></span><br><span class="line"> <span class="string">"development"</span>: [</span><br><span class="line"> <span class="string">"last 1 chrome version"</span>,</span><br><span class="line"> <span class="string">"last 1 firefox version"</span>,</span><br><span class="line"> <span class="string">"last 1 safari version"</span></span><br><span class="line"> ],</span><br><span class="line"> <span class="comment">// 生产环境：默认是生产环境</span></span><br><span class="line"> <span class="string">"production"</span>: [</span><br><span class="line"> <span class="string">">0.2%"</span>, <span class="comment">//兼容市面上99.8%的浏览器</span></span><br><span class="line"> <span class="string">"not dead"</span>, <span class="comment">//"死去"的浏览器不做兼容，例如IE8</span></span><br><span class="line"> <span class="string">"not op_mini all"</span>,<span class="comment">//不做opera浏览器mini版的兼容</span></span><br><span class="line"> <span class="string">"ie 10"</span> <span class="comment">//兼容IE10</span></span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>如图配置完成在package.json中</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291059798.png"></p><p><strong>5.然后重新运行 npm run build 即可</strong></p><p>可以看到,这里的<code>display:flex</code>自动添加了前置,就是做了下兼容性处理</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291131207.png"></p><h4 id="js语法转换"><a href="#js语法转换" class="headerlink" title="js语法转换"></a>js语法转换</h4><ul><li>概述：将浏览器不能识别的新语法转换成原来识别的旧语法，做浏览器兼容性处理,比如说箭头函数</li></ul><p><strong>1.安装loader</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install babel-loader @babel/core @babel/preset-env -D</span><br></pre></td></tr></table></figure><p><strong>2.配置loader</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: {</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.js$/</span>,</span><br><span class="line"> <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>,</span><br><span class="line"> <span class="attr">use</span>: {</span><br><span class="line"> <span class="attr">loader</span>: <span class="string">"babel-loader"</span>,</span><br><span class="line"> <span class="attr">options</span>: {</span><br><span class="line"> <span class="attr">presets</span>: [<span class="string">'@babel/preset-env'</span>]</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>3.就可以啦,然后直接 npm run build就可以了</strong></p><p>如图示例转换了箭头函数</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291141607.png"></p><h4 id="js兼容性处理"><a href="#js兼容性处理" class="headerlink" title="js兼容性处理"></a>js兼容性处理</h4><ul><li><p>处理babel无法处理的~,比如说js语法转换无法处理 promise,而如果做了js语法兼容性处理是可以处理promise的,(注:ie11不使用兼容性处理的无法使用promise的!)</p></li><li><p>注意从 7.4 开始，就不推荐使用 @babel/polyfill 了,但是这里依旧记录下这个库的使用教程和官方推荐</p></li></ul><h5 id="babel7-4-版本的js兼容性处理"><a href="#babel7-4-版本的js兼容性处理" class="headerlink" title="babel7.4+版本的js兼容性处理"></a>babel7.4+版本的js兼容性处理</h5><h6 id="1-安装"><a href="#1-安装" class="headerlink" title="1.安装"></a>1.安装</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install babel-loader @babel/core @babel/preset-env core-js -D</span><br></pre></td></tr></table></figure><h6 id="2-使用"><a href="#2-使用" class="headerlink" title="2.使用"></a>2.使用</h6><p>代码:</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <span class="attr">mode</span>: <span class="string">"production"</span>,</span><br><span class="line"> <span class="comment">//loader </span></span><br><span class="line"> <span class="attr">module</span>: {</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> <span class="comment">//处理js文件</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.js$/</span>,</span><br><span class="line"> <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>, <span class="comment">//排除node_modules</span></span><br><span class="line"> <span class="attr">use</span>: [</span><br><span class="line"> <span class="comment">//js兼容性处理</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">loader</span>: <span class="string">"babel-loader"</span>,</span><br><span class="line"> <span class="attr">options</span>: {</span><br><span class="line"> <span class="attr">presets</span>: [</span><br><span class="line"> <span class="comment">//别漏掉了这个括号</span></span><br><span class="line"> [<span class="string">"@babel/preset-env"</span>,</span><br><span class="line"> {</span><br><span class="line"> <span class="comment">// 按需加载</span></span><br><span class="line"> <span class="attr">useBuiltIns</span>: <span class="string">'usage'</span>,</span><br><span class="line"> <span class="comment">// 指定core-js版本 ,安装的时候我这里为"core-js": "^3.22.8",</span></span><br><span class="line"> <span class="attr">corejs</span>: {</span><br><span class="line"> <span class="attr">version</span>: <span class="number">3</span></span><br><span class="line"> },</span><br><span class="line"> <span class="comment">// 指定兼容性做到哪个版本浏览器</span></span><br><span class="line"> <span class="attr">targets</span>: {</span><br><span class="line"> <span class="attr">chrome</span>: <span class="string">'60'</span>,</span><br><span class="line"> <span class="attr">firefox</span>: <span class="string">'60'</span>,</span><br><span class="line"> <span class="attr">ie</span>: <span class="string">'9'</span>,</span><br><span class="line"> <span class="attr">safari</span>: <span class="string">'10'</span>,</span><br><span class="line"> <span class="attr">edge</span>: <span class="string">'17'</span></span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> ]</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h6 id="3-注意"><a href="#3-注意" class="headerlink" title="3.注意"></a>3.注意</h6><p>如果出现提示<code>To be a valid preset, its name and options should be wrapped in a pair of brackets</code> 或者<code>RROR in ./src/app.ts Module build failed (from ./node_modules/babel-loader/lib/index.js):Error: [BABEL] D:\develop\phpstudy_pro\WWW\tpyescriptStudy\05_snake\src\app.ts: Unknown option: .useBuiltIns. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.</code></p><p>可能是因为少了括号,<a target="_blank" rel="noopener" href="https://blog.csdn.net/zly_101?type=blog">这位老哥一语道破</a></p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202206031911565.png" alt="一图道破"></p><p>我的ts结合babel</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202206031913586.png" alt="ts结合babel"></p><h6 id="4-效果"><a href="#4-效果" class="headerlink" title="4.效果"></a>4.效果</h6><p>打包后相比@babel/poplyfill库明显减少</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202206031915678.png" alt="打包后相比@babel/poplyfill库明显减少"></p><p>promise语法也正常输出在ie浏览器</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202206031916823.png" alt="promise语法也正常输出"></p><h5 id="babel7-4以下-js兼容性处理-babel-polyfill库的使用"><a href="#babel7-4以下-js兼容性处理-babel-polyfill库的使用" class="headerlink" title="babel7.4以下 js兼容性处理-@babel/polyfill库的使用"></a>babel7.4以下 js兼容性处理-@babel/polyfill库的使用</h5><p>**缺点:!**这个插件会将所有的兼容性代码全部引入，会导致打包后文件体积变大!!!!</p><h6 id="1-安装-1"><a href="#1-安装-1" class="headerlink" title="1.安装"></a>1.安装</h6><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install @babel/polyfill -D</span><br></pre></td></tr></table></figure><p>安装的时候会提示这些,表示<code>@babel/polyfill</code>不推荐使用</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">npm WARN deprecated @babel/[email protected]: 🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information.</span><br><span class="line"></span><br><span class="line">npm WARN deprecated [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.</span><br></pre></td></tr></table></figure><p><a target="_blank" rel="noopener" href="https://babeljs.io/docs/en/babel-polyfill">官网</a>对于此的介绍: 从 7.4 开始，就不推荐使用 @babel/polyfill 了,但是这里依旧记录下这个库的使用教程</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202206031853345.png" alt="从 7.4 开始，就不推荐使用 @babel/polyfill 了"></p><h6 id="2-webpack入口文件处引入"><a href="#2-webpack入口文件处引入" class="headerlink" title="2.webpack入口文件处引入"></a><strong>2.webpack入口文件处引入</strong></h6><ul><li>比如我webpack的入口是<code>src\js\index.js</code>,那么我就在这文件夹添加<code>import '@babel/polyfill';</code> // 包含ES6的高级语法的转换 就可以</li></ul><h6 id="3-使用"><a href="#3-使用" class="headerlink" title="3.使用"></a><strong>3.使用</strong></h6><p>没有js兼容性处理前IE11的输出(promise测试)</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291147809.png" alt="没有js兼容性处理前IE11的输出(promise测试)"></p><p>使用js兼容性处理后IE11的输出(promise测试)</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291147109.png" alt="使用js兼容性处理后IE11的输出(promise测试)"></p><h6 id="4-效果-1"><a href="#4-效果-1" class="headerlink" title="4.效果"></a>4.效果</h6><p>测试代码</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =></span> {</span><br><span class="line"> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =></span> {</span><br><span class="line"> <span class="title function_">resolve</span>(<span class="string">"动感超人"</span> + <span class="number">900</span>)</span><br><span class="line"> }).<span class="title function_">then</span>(<span class="function">(<span class="params">data</span>) =></span> {</span><br><span class="line"> <span class="variable language_">console</span>.<span class="title function_">log</span>(data);</span><br><span class="line"> })</span><br><span class="line">}, <span class="number">900</span>);</span><br></pre></td></tr></table></figure><p>不过体积有点大</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202206031918946.png" alt="打包后体积"></p><h4 id="js语法检查"><a href="#js语法检查" class="headerlink" title="js语法检查"></a>js语法检查</h4><p><strong>1.安装loader</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install eslint-loader eslint -D</span><br></pre></td></tr></table></figure><p><strong>2.安装检查规则库</strong></p><p>备注:eslint-config-airbnb-base定制了一套标准的、常用的js语法检查规则，推荐使用</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install eslint-config-airbnb-base eslint-plugin-import -D</span><br></pre></td></tr></table></figure><p><strong>3.配置webpack</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <span class="comment">//loader的配置项</span></span><br><span class="line"> <span class="attr">module</span>: {</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> <span class="comment">//语法检查功能</span></span><br><span class="line"> {</span><br><span class="line"> <span class="comment">// 对js进行语法检查</span></span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.js$/</span>,</span><br><span class="line"> <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>,<span class="comment">//排除这个文件</span></span><br><span class="line"> <span class="comment">// 优先执行</span></span><br><span class="line"> <span class="attr">enforce</span>: <span class="string">'pre'</span>,<span class="comment">//优先执行 只要webpack启动时 尽可能先执行</span></span><br><span class="line"> <span class="attr">loader</span>: <span class="string">'eslint-loader'</span>,</span><br><span class="line"> <span class="attr">options</span>: {</span><br><span class="line"> <span class="attr">fix</span>: <span class="literal">true</span> <span class="comment">//若有问题自动修复，重要！！！！</span></span><br><span class="line"> }</span><br><span class="line"> } </span><br><span class="line"> ]</span><br><span class="line"> },</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>4.配置package.json</strong></p><p>注意安装语法规则库</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"eslintConfig"</span>: {</span><br><span class="line"> <span class="string">"extends"</span>: <span class="string">"airbnb-base"</span>,</span><br><span class="line"> <span class="string">"env"</span>: {</span><br><span class="line"> <span class="string">"browser"</span>: <span class="literal">true</span></span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="comment">//说明</span></span><br><span class="line"><span class="string">"eslintConfig"</span>: {</span><br><span class="line"> <span class="string">"extends"</span>: <span class="string">"airbnb-base"</span>, <span class="comment">//直接使用airbnb-base提供的规则 需要下载的</span></span><br><span class="line"> <span class="string">"env"</span>: {</span><br><span class="line"> <span class="string">"browser"</span>: <span class="literal">true</span><span class="comment">//如果运行环境不是浏览器 则运行环境为node 此时需要将这个改为false</span></span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>5.使用</strong></p><p>打包的时候自动运行</p><p>如图,我这里检测到的不符合语法规范的问题</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291214074.png" alt="检测到的错误"></p><h4 id="压缩css-对于html-js-webpack4都已经默认压缩了"><a href="#压缩css-对于html-js-webpack4都已经默认压缩了" class="headerlink" title="压缩css(对于html,js,webpack4都已经默认压缩了)"></a>压缩css(对于html,js,webpack4都已经默认压缩了)</h4><p><strong>1.安装</strong></p><p>webpack4的时候使用这个 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/optimize-css-assets-webpack-plugin">官网api</a></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install optimize-css-assets-webpack-plugin -D</span><br></pre></td></tr></table></figure><p>webpack5的时候使用这个 <a target="_blank" rel="noopener" href="https://www.npmjs.com/package/css-minimizer-webpack-plugin">官网api</a></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install css-minimizer-webpack-plugin --save-dev</span><br></pre></td></tr></table></figure><p><strong>2.引入插件</strong></p><p>webpack4的时候使用这个</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">OptimizeCssAssetsPlugin</span> = <span class="built_in">require</span>(<span class="string">'optimize-css-assets-webpack-plugin'</span>); </span><br></pre></td></tr></table></figure><p>webpack5的时候使用这个</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">CssMinimizerPlugin</span> = <span class="built_in">require</span>(<span class="string">"css-minimizer-webpack-plugin"</span>);</span><br></pre></td></tr></table></figure><p><strong>3.配置插件</strong></p><p>webpack4的<code>optimize-css-assets-webpack-plugin</code>配置</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <span class="comment">//插件的配置项</span></span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> <span class="comment">//压缩css插件</span></span><br><span class="line"> <span class="keyword">new</span> <span class="title class_">OptimizeCssAssetsPlugin</span>({</span><br><span class="line"> <span class="attr">cssProcessorPluginOptions</span>: {</span><br><span class="line"> <span class="attr">preset</span>: [<span class="string">'default'</span>, { <span class="attr">discardComments</span>: { <span class="attr">removeAll</span>: <span class="literal">true</span> } }],<span class="comment">//移出所有注释</span></span><br><span class="line"> },</span><br><span class="line"> }),</span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>webpack5的<code>css-minimizer-webpack-plugin</code>配置</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">MiniCssExtractPlugin</span> = <span class="built_in">require</span>(<span class="string">"mini-css-extract-plugin"</span>);</span><br><span class="line"><span class="keyword">const</span> <span class="title class_">CssMinimizerPlugin</span> = <span class="built_in">require</span>(<span class="string">"css-minimizer-webpack-plugin"</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <span class="attr">optimization</span>: {</span><br><span class="line"> <span class="attr">minimizer</span>: [</span><br><span class="line"> <span class="keyword">new</span> <span class="title class_">CssMinimizerPlugin</span>(),</span><br><span class="line"> ],</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//使用压缩css插件</span></span><br><span class="line"> <span class="attr">plugins</span>: [<span class="keyword">new</span> <span class="title class_">MiniCssExtractPlugin</span>()],</span><br><span class="line">};</span><br></pre></td></tr></table></figure><p><strong>注意!注意!注意!注意!注意!</strong></p><p> 在webpack5中，不需要手动引入uglify插件，只需配置<code>mode</code>为<code>production</code>就可以压缩js代码。但是，如果用了<code>css-minimizer-webpack-plugin</code>插件去压缩css文件，js的压缩就会失效,所以使用<code>terser-webpack-plugin</code>插件去压缩js代码</p><p> (我这边反正就是二个一起使用是报错``,这里记录下)</p><p><strong>我使用的时候报错记录</strong>,可能是提取css的时候遗留下来的问题吧,</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable constant_">ERROR</span> <span class="keyword">in</span> main.<span class="property">css</span></span><br><span class="line">main.<span class="property">css</span> <span class="keyword">from</span> <span class="title class_">Css</span> <span class="title class_">Minimizer</span> plugin</span><br><span class="line"><span class="title class_">Error</span>: <span class="title class_">Unexpected</span> <span class="string">'/'</span>. <span class="title class_">Escaping</span> special characters <span class="keyword">with</span> \ may help.</span><br><span class="line"> at <span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\main.<span class="property">css</span>:<span class="number">28</span>:<span class="number">1</span></span><br><span class="line"> at <span class="title class_">Root</span>.<span class="property">_error</span> (<span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\node_modules\postcss-selector-parser\dist\parser.<span class="property">js</span>:<span class="number">174</span>:<span class="number">16</span>)</span><br><span class="line"> at <span class="title class_">Root</span>.<span class="property">error</span> (<span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\node_modules\postcss-selector-parser\dist\selectors\root.<span class="property">js</span>:<span class="number">43</span>:<span class="number">19</span>)</span><br><span class="line"> at <span class="title class_">Parser</span>.<span class="property">error</span> (<span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\node_modules\postcss-selector-parser\dist\parser.<span class="property">js</span>:<span class="number">740</span>:<span class="number">21</span>)</span><br><span class="line"> at <span class="title class_">Parser</span>.<span class="property">unexpected</span> (<span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\node_modules\postcss-selector-parser\dist\parser.<span class="property">js</span>:<span class="number">758</span>:<span class="number">17</span>)</span><br><span class="line"> at <span class="title class_">Parser</span>.<span class="property">combinator</span> (<span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\node_modules\postcss-selector-parser\dist\parser.<span class="property">js</span>:<span class="number">656</span>:<span class="number">12</span>)</span><br><span class="line"> at <span class="title class_">Parser</span>.<span class="property">parse</span> (<span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\node_modules\postcss-selector-parser\dist\parser.<span class="property">js</span>:<span class="number">1101</span>:<span class="number">14</span>)</span><br><span class="line"> at <span class="title class_">Parser</span>.<span class="property">loop</span> (<span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\node_modules\postcss-selector-parser\dist\parser.<span class="property">js</span>:<span class="number">1043</span>:<span class="number">12</span>)</span><br><span class="line"> at <span class="keyword">new</span> <span class="title class_">Parser</span> (<span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\node_modules\postcss-selector-parser\dist\parser.<span class="property">js</span>:<span class="number">164</span>:<span class="number">10</span>)</span><br><span class="line"> at <span class="title class_">Processor</span>.<span class="property">_root</span> (<span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\node_modules\postcss-selector-parser\dist\processor.<span class="property">js</span>:<span class="number">53</span>:<span class="number">18</span>)</span><br><span class="line"> at <span class="title class_">Processor</span>.<span class="property">_runSync</span> (<span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\node_modules\postcss-selector-parser\dist\processor.<span class="property">js</span>:<span class="number">100</span>:<span class="number">21</span>)</span><br><span class="line"></span><br><span class="line"><span class="variable constant_">ERROR</span> <span class="keyword">in</span> ./css/index.<span class="property">css</span></span><br><span class="line">./css/index.<span class="property">css</span> <span class="keyword">from</span> <span class="title class_">Css</span> <span class="title class_">Minimizer</span> plugin</span><br><span class="line"><span class="title class_">Error</span>: <span class="title class_">Unexpected</span> <span class="string">'/'</span>. <span class="title class_">Escaping</span> special characters <span class="keyword">with</span> \ may help.</span><br><span class="line"> at <span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\css\index.<span class="property">css</span>:<span class="number">28</span>:<span class="number">1</span></span><br><span class="line"> at <span class="title class_">Root</span>.<span class="property">_error</span> (<span class="attr">D</span>:\develop\phpstudy_pro\<span class="variable constant_">WWW</span>\webpackstudyagain\node_modules\postcs</span><br></pre></td></tr></table></figure><h4 id="打包和运行进度条功能"><a href="#打包和运行进度条功能" class="headerlink" title="打包和运行进度条功能"></a>打包和运行进度条功能</h4><p><strong>1.安装</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install webpackbar -D</span><br></pre></td></tr></table></figure><p><strong>2.引入插件</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> <span class="title class_">WebpackBar</span> = <span class="built_in">require</span>(<span class="string">'webpackbar'</span>);</span><br></pre></td></tr></table></figure><p><strong>3.配置添加到webpack配置文件</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <span class="comment">//插件的配置项</span></span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> <span class="comment">//webpack打包和运行的时候进度条</span></span><br><span class="line"> <span class="keyword">new</span> <span class="title class_">WebpackBar</span>(),</span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><strong>4.然后就有效果了</strong></p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291208211.png" alt="进度条效果"></p><h3 id="webpack当中use的几种形式"><a href="#webpack当中use的几种形式" class="headerlink" title="webpack当中use的几种形式"></a>webpack当中use的几种形式</h3><ol><li><p>use为一个数组</p><ul><li><p>里面可以为一个个的字符串,比如 <code>use:["style-loader","css-loader"]</code></p></li><li><p>也可以对象掺杂着字符串,比如 <code>use:[{...},"css-loader"]</code></p></li><li><p>也可以全部为对象,比如<code>use:[{...},{...},{...}]</code></p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <span class="attr">module</span>:{</span><br><span class="line"> <span class="attr">rules</span>:[</span><br><span class="line"> <span class="comment">//分割下 use全部为对象 </span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.less$/</span>,</span><br><span class="line"> <span class="attr">use</span>: [{</span><br><span class="line"> <span class="attr">loader</span>: <span class="string">"style-loader"</span></span><br><span class="line"> }, {</span><br><span class="line"> <span class="attr">loader</span>: <span class="string">"css-loader"</span></span><br><span class="line"> }, {</span><br><span class="line"> <span class="attr">loader</span>: <span class="string">"less-loader"</span></span><br><span class="line"> }]</span><br><span class="line"> }, </span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ul></li><li><p>use为一个对象,代表使用这一个loader</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">module</span>: {</span><br><span class="line"> <span class="attr">rules</span>: [</span><br><span class="line"> <span class="comment">//use为一个对象的情况</span></span><br><span class="line"> {</span><br><span class="line"> <span class="attr">test</span>: <span class="regexp">/\.m?js$/</span>,</span><br><span class="line"> <span class="attr">exclude</span>: <span class="regexp">/node_modules/</span>,</span><br><span class="line"> <span class="attr">use</span>: {</span><br><span class="line"> <span class="attr">loader</span>: <span class="string">'babel-loader'</span>,</span><br><span class="line"> <span class="attr">options</span>: {</span><br><span class="line"> <span class="attr">presets</span>: [</span><br><span class="line"> [<span class="string">'@babel/preset-env'</span>, { <span class="attr">targets</span>: <span class="string">"defaults"</span> }]</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> <span class="comment">//其他loader</span></span><br><span class="line"> ]</span><br><span class="line">}</span><br></pre></td></tr></table></figure></li></ol><h3 id="webpack配置对象当中的resolve"><a href="#webpack配置对象当中的resolve" class="headerlink" title="webpack配置对象当中的resolve"></a>webpack配置对象当中的resolve</h3><h4 id="resolve-extensions"><a href="#resolve-extensions" class="headerlink" title="resolve.extensions"></a>resolve.extensions</h4><ul><li><p>使用 import 引入其他模块时，如果不加上后缀扩展名（extension）且找不到对应的文件时，webpack 就会尝试根据 extensions 数组，依次加上扩展名看看能不能匹配到一个文件，直到找到为止。如果找不到则会报错。</p></li><li><p>默认值为: <code>['.js','.json','wasm']</code></p></li><li><p><strong>功能就是</strong>,不加后缀名的情况下,依次匹配,直到匹配所有的还匹配不到就报错</p></li><li><p>所以你经常可以看到一些人导入模块不添加后缀名,直接 import xxx from “./abc/a”,就是resolve.extensions起到的作用!</p></li></ul><p>如图,当导入模块<code>import * as all from "./food"</code>的时候,发现模块不存在,会依次去寻找,然后后缀都匹配完了还是找不到就报错</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202206020915469.png"></p><h3 id="推荐几款好用的npm"><a href="#推荐几款好用的npm" class="headerlink" title="推荐几款好用的npm"></a>推荐几款好用的npm</h3><h4 id="rimraf-—-快速删除node-modules文件夹"><a href="#rimraf-—-快速删除node-modules文件夹" class="headerlink" title="rimraf —- 快速删除node_modules文件夹"></a>rimraf —- 快速删除node_modules文件夹</h4><p><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/rimraf">官网地址</a></p><p><strong>1.安装</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install rimraf -g</span><br></pre></td></tr></table></figure><p><strong>2.使用</strong></p><p>在所属文件夹下使用cmd指令下，进入所需删除的node_modules文件夹的位置，再输入指令</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">rimraf node_modules</span><br></pre></td></tr></table></figure><h4 id="clena-webpack-plugin-—-每次打包删除dist目录"><a href="#clena-webpack-plugin-—-每次打包删除dist目录" class="headerlink" title="clena-webpack-plugin — 每次打包删除dist目录"></a>clena-webpack-plugin — 每次打包删除dist目录</h4><p><a target="_blank" rel="noopener" href="https://www.npmjs.com/package/clean-webpack-plugin">官网地址</a></p><p><strong>1.安装</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install --save-dev clean-webpack-plugin</span><br></pre></td></tr></table></figure><p><strong>2.使用</strong></p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> { <span class="title class_">CleanWebpackPlugin</span> } = <span class="built_in">require</span>(<span class="string">'clean-webpack-plugin'</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> webpackConfig = {</span><br><span class="line"> <span class="attr">plugins</span>: [</span><br><span class="line"> <span class="comment">/**</span></span><br><span class="line"><span class="comment"> * All files inside webpack's output.path directory will be removed once, but the</span></span><br><span class="line"><span class="comment"> * directory itself will not be. If using webpack 4+'s default configuration,</span></span><br><span class="line"><span class="comment"> * everything under <PROJECT_DIR>/dist/ will be removed.</span></span><br><span class="line"><span class="comment"> * Use cleanOnceBeforeBuildPatterns to override this behavior.</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * During rebuilds, all webpack assets that are not used anymore</span></span><br><span class="line"><span class="comment"> * will be removed automatically.</span></span><br><span class="line"><span class="comment"> *</span></span><br><span class="line"><span class="comment"> * See `Options and Defaults` for information</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"> <span class="keyword">new</span> <span class="title class_">CleanWebpackPlugin</span>(),</span><br><span class="line"> ],</span><br><span class="line">};</span><br><span class="line"></span><br><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = webpackConfig;</span><br></pre></td></tr></table></figure><h3 id="webpack箭头函数导致第一行xx位置报错"><a href="#webpack箭头函数导致第一行xx位置报错" class="headerlink" title="webpack箭头函数导致第一行xx位置报错"></a>webpack箭头函数导致第一行xx位置报错</h3><ul><li>解决 : 添加 environment:{ arrowFunction:false }</li></ul><p>示例:</p><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable language_">module</span>.<span class="property">exports</span> = {</span><br><span class="line"> <span class="attr">mode</span>: <span class="string">"production"</span>,</span><br><span class="line"> <span class="attr">entry</span>: <span class="string">"./src/app.ts"</span>,</span><br><span class="line"> <span class="attr">output</span>: {</span><br><span class="line"> <span class="attr">path</span>: path.<span class="title function_">resolve</span>(__dirname, <span class="string">"dist"</span>),</span><br><span class="line"> <span class="attr">filename</span>: <span class="string">"js/index.js"</span>, <span class="comment">//文件名</span></span><br><span class="line"> <span class="attr">environment</span>: {</span><br><span class="line"> <span class="comment">//不使用箭头函数</span></span><br><span class="line"> <span class="attr">arrowFunction</span>: <span class="literal">false</span>,</span><br><span class="line"> <span class="comment">//不使用const</span></span><br><span class="line"> <span class="attr">const</span>: <span class="literal">false</span></span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>设置前编译</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202206060858255.png" alt="设置前"></p><p>设置后编译</p><p><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202206060858716.png" alt="设置后"></p><h2 id="loader和plugin作用和区别"><a href="#loader和plugin作用和区别" class="headerlink" title="loader和plugin作用和区别"></a>loader和plugin作用和区别</h2><ul><li><code>loader</code>: 是文件加载器,可以加载资源文件,并对这些文件进行一些处理,比如:编译,压缩等,</li><li><code>plugin</code>:webpack在运行的生命周期会广播出许多事件,plugin可以监听这些事件,在合适的时机中通过webpack提供的api改变输出结果</li></ul><p><strong>区别:</strong></p><ul><li>loader是将A文件进行编译形成B文件,这里操作的是文件,A.less => A.css</li><li>plugin是用于在webpack打包编译过程里，在对应的事件节点里执行自定义操作，比如资源管理、bundle文件优化等操作</li></ul></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://www.dreamlove.top">梦洁</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://www.dreamlove.top/75bf0d7.html">https://www.dreamlove.top/75bf0d7.html</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://www.dreamlove.top" target="_blank">梦洁小站-属于你我的小天地</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/vue/">vue</a><a class="post-meta__tags" href="/tags/HTML/">HTML</a><a class="post-meta__tags" href="/tags/javscript/">javscript</a><a class="post-meta__tags" href="/tags/ES6/">ES6</a></div><div class="post_share"><div class="social-share" data-image="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291452280.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://lib.baomitu.com/butterfly-extsrc/1.1.3/sharejs/dist/css/share.min.css" media="print" onload='this.media="all"'><script src="https://lib.baomitu.com/butterfly-extsrc/1.1.3/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/a50ac5da.html" title="typescript完成的贪吃蛇前端小游戏"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202206031946538.jpg" onerror='onerror=null,src="/img/404.png"' alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">typescript完成的贪吃蛇前端小游戏</div></div></a></div><div class="next-post pull-right"><a href="/d9f65d5.html" title="使用nodejs导出md/Markdown文档当中的图片到本地并替换原始图片链接为本地图片链接"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205281118457.png" onerror='onerror=null,src="/img/404.png"' alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">使用nodejs导出md/Markdown文档当中的图片到本地并替换原始图片链接为本地图片链接</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/a816b0a1.html" title="深入自定义事件和原生DOM事件($attr等)"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205061952720.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-05-06</div><div class="title">深入自定义事件和原生DOM事件($attr等)</div></div></a></div><div><a href="/881e4206.html" title="vue3中使用混入mixins在setup当中"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202208300925527.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-08-30</div><div class="title">vue3中使用混入mixins在setup当中</div></div></a></div><div><a href="/e031a88b.html" title="前端面试可能会问到的知识点记录"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202207181536689.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-07-18</div><div class="title">前端面试可能会问到的知识点记录</div></div></a></div><div><a href="/7429306f.html" title="js正则匹配获取分组和正向反向的区别"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/20220228215037.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-11-13</div><div class="title">js正则匹配获取分组和正向反向的区别</div></div></a></div><div><a href="/be489729.html" title="navigator.clipboard.readtext开发的时候有用,编译后测试却不生效"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202210190919962.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-10-19</div><div class="title">navigator.clipboard.readtext开发的时候有用,编译后测试却不生效</div></div></a></div><div><a href="/cb27eea3.html" title="移动端前端的适配和rem,vm其他的一些的复习"><img class="cover" src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205242024668.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2022-05-23</div><div class="title">移动端前端的适配和rem,vm其他的一些的复习</div></div></a></div></div></div><hr class="custom-hr"><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> 评论</span></div></div><div class="comment-wrap"><div><div id="artalk-wrap"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://oss.dreamlove.top/i/2024/02/02/nw24wu.png" onerror='this.onerror=null,this.src="/img/404.png"' alt="avatar"></div><div class="author-info__name">梦洁</div><div class="author-info__description">小小的字,有大大的梦想~分享我的前端学习过程,经历,错误,和一些其他折腾过程</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">170</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">94</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">70</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/superBiuBiuMan"><i class="fab fa-github"></i><span>关注下我(*￣▽￣*)</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="mailto:[email protected]" target="_blank" title="Email"><i class="fas fa-envelope" style="color:#4a7dbe"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">不断更新中,有问题请留言回复(会通过邮箱提醒~)</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFwebpack"><span class="toc-number">1.</span> <span class="toc-text">什么是webpack</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%94%E4%B8%AA%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5"><span class="toc-number">1.1.</span> <span class="toc-text">五个核心概念</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85webpack"><span class="toc-number">1.2.</span> <span class="toc-text">安装webpack</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%84%E7%90%86js%E5%92%8Cjson%E6%96%87%E4%BB%B6"><span class="toc-number">1.3.</span> <span class="toc-text">处理js和json文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#webpack-%E5%92%8Cwebpack-cli%E7%9A%84%E5%85%B3%E7%B3%BB"><span class="toc-number">1.4.</span> <span class="toc-text">webpack 和webpack-cli的关系</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#webpack%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">2.</span> <span class="toc-text">webpack的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9F%BA%E6%9C%AC%E8%BE%93%E5%87%BA%E6%93%8D%E4%BD%9C"><span class="toc-number">2.1.</span> <span class="toc-text">基本输出操作</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">2.2.</span> <span class="toc-text">配置文件的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%89%8D%E7%BD%AE%E4%BA%86%E8%A7%A3"><span class="toc-number">2.2.1.</span> <span class="toc-text">前置了解</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%BB%BA%E7%AB%8B%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E5%B9%B6%E4%BD%BF%E7%94%A8"><span class="toc-number">2.2.2.</span> <span class="toc-text">建立配置文件并使用</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A7%A3%E6%9E%90css%E6%96%87%E4%BB%B6-css-loader%E5%92%8Cstyle-loader"><span class="toc-number">2.3.</span> <span class="toc-text">解析css文件 css-loader和style-loader</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%A7%A3%E6%9E%90less%E6%96%87%E4%BB%B6-less-loader"><span class="toc-number">2.4.</span> <span class="toc-text">解析less文件 less-loader</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%93%E5%8C%85html%E6%96%87%E4%BB%B6-html-webpack-plugin-%E6%8F%92%E4%BB%B6"><span class="toc-number">2.5.</span> <span class="toc-text">打包html文件 html-webpack-plugin(插件)</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#html-loader%E5%92%8Chtml-webpack-plugin%E5%86%B2%E7%AA%81%E5%AF%BC%E8%87%B4%E7%9A%84%E6%8A%A5%E9%94%99"><span class="toc-number">2.6.</span> <span class="toc-text">html-loader和html-webpack-plugin冲突导致的报错</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%89%8D%E7%BD%AE"><span class="toc-number">2.6.1.</span> <span class="toc-text">前置</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%86%B2%E7%AA%81%E6%8A%A5%E9%94%99%E8%A7%A3%E5%86%B3"><span class="toc-number">2.6.2.</span> <span class="toc-text">冲突报错解决</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#webpack5%E4%BD%BF%E7%94%A8asset-module"><span class="toc-number">2.7.</span> <span class="toc-text">webpack5使用asset module</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8A%9F%E8%83%BD%E6%9B%BF%E6%8D%A2"><span class="toc-number">2.7.1.</span> <span class="toc-text">功能替换</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%89%93%E5%8C%85%E6%A0%B7%E5%BC%8F%E4%B8%AD%E7%9A%84%E6%96%87%E4%BB%B6-%E6%96%B9%E6%B3%951-asset-resource"><span class="toc-number">2.7.2.</span> <span class="toc-text">打包样式中的文件-方法1-asset/resource</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%89%93%E5%8C%85%E6%A0%B7%E5%BC%8F%E4%B8%AD%E7%9A%84%E6%96%87%E4%BB%B6-%E6%96%B9%E6%B3%952-asste"><span class="toc-number">2.7.3.</span> <span class="toc-text">打包样式中的文件-方法2-asste</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8file-loader-url-loader%E7%9A%84%E6%97%B6%E5%80%99%E4%BC%9A%E5%87%BA%E7%8E%B0%E5%A4%9A%E5%87%BA%E6%9D%A5%E4%B8%80%E9%83%A8%E5%88%86"><span class="toc-number">2.8.</span> <span class="toc-text">使用file-loader url-loader的时候会出现多出来一部分</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%A4%84%E7%90%86html%E6%96%87%E4%BB%B6%E7%9A%84%E5%9B%BE%E7%89%87-html-loader"><span class="toc-number">2.9.</span> <span class="toc-text">处理html文件的图片 html-loader</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%B8%8D%E5%A4%84%E7%90%86html%E6%96%87%E4%BB%B6%E5%9B%BE%E7%89%87%E6%97%B6%E5%80%99%E6%89%93%E5%8C%85%E5%90%8E%E7%9A%84%E6%95%88%E6%9E%9C"><span class="toc-number">2.9.1.</span> <span class="toc-text">不处理html文件图片时候打包后的效果</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%A4%84%E7%90%86%E6%AD%A5%E9%AA%A4%E5%92%8C%E6%95%88%E6%9E%9C"><span class="toc-number">2.9.2.</span> <span class="toc-text">处理步骤和效果</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%89%93%E5%8C%85%E5%85%B6%E4%BB%96%E8%B5%84%E6%BA%90-%E6%AF%94%E5%A6%82%E8%AF%B4%E5%AD%97%E4%BD%93%E5%9B%BE%E6%A0%87-mp4%E7%AD%89%E8%B5%84%E6%BA%90"><span class="toc-number">2.10.</span> <span class="toc-text">打包其他资源(比如说字体图标,mp4等资源)</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#webpack5%E7%9A%84%E4%BD%BF%E7%94%A8-asset-resource"><span class="toc-number">2.10.1.</span> <span class="toc-text">webpack5的使用 asset/resource</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B3%A8%E6%84%8F"><span class="toc-number">2.10.2.</span> <span class="toc-text">注意</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#webpack%E4%BD%BF%E7%94%A8webpack-dev-server"><span class="toc-number">2.11.</span> <span class="toc-text">webpack使用webpack-dev-server</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83"><span class="toc-number">2.12.</span> <span class="toc-text">生产环境</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%87%86%E5%A4%87%E4%BA%8C%E5%A5%97%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6"><span class="toc-number">2.12.1.</span> <span class="toc-text">准备二套配置文件</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#wepack-dev-js%E6%96%87%E4%BB%B6"><span class="toc-number">2.12.1.1.</span> <span class="toc-text">wepack.dev.js文件</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#webpack4%E7%9A%84%E6%97%B6%E5%80%99-%E5%8F%82%E8%80%83%E4%B8%8B"><span class="toc-number">2.12.1.1.1.</span> <span class="toc-text">webpack4的时候(参考下)</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#webpack5%E7%9A%84%E6%97%B6%E5%80%99-%E8%BF%99%E9%87%8C%E4%BB%A5%E8%BF%99%E5%A5%97%E4%B8%BA%E4%BE%8B"><span class="toc-number">2.12.1.1.2.</span> <span class="toc-text">webpack5的时候(这里以这套为例)</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8package-json%E5%BD%93%E4%B8%AD%E8%BF%90%E8%A1%8C%E8%84%9A%E6%9C%AC-%E8%BF%99%E6%A0%B7%E5%AD%90%E5%B0%B1%E4%B8%8D%E7%94%A8%E6%AF%8F%E6%AC%A1%E9%83%BD%E8%BE%93%E5%85%A5%E5%BE%88%E9%95%BF%E4%B8%80%E6%AE%B5%E4%BB%A3%E7%A0%81%E4%BA%86"><span class="toc-number">2.12.2.</span> <span class="toc-text">使用package.json当中运行脚本 这样子就不用每次都输入很长一段代码了</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%8F%90%E5%8F%96css%E4%B8%BA%E5%8D%95%E7%8B%AC%E7%9A%84%E6%96%87%E4%BB%B6-mini-css-extract-plugin"><span class="toc-number">2.12.3.</span> <span class="toc-text">提取css为单独的文件 mini-css-extract-plugin</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#css%E5%85%BC%E5%AE%B9%E6%80%A7%E5%A4%84%E7%90%86"><span class="toc-number">2.12.4.</span> <span class="toc-text">css兼容性处理</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#js%E8%AF%AD%E6%B3%95%E8%BD%AC%E6%8D%A2"><span class="toc-number">2.12.5.</span> <span class="toc-text">js语法转换</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#js%E5%85%BC%E5%AE%B9%E6%80%A7%E5%A4%84%E7%90%86"><span class="toc-number">2.12.6.</span> <span class="toc-text">js兼容性处理</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#babel7-4-%E7%89%88%E6%9C%AC%E7%9A%84js%E5%85%BC%E5%AE%B9%E6%80%A7%E5%A4%84%E7%90%86"><span class="toc-number">2.12.6.1.</span> <span class="toc-text">babel7.4+版本的js兼容性处理</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#1-%E5%AE%89%E8%A3%85"><span class="toc-number">2.12.6.1.1.</span> <span class="toc-text">1.安装</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#2-%E4%BD%BF%E7%94%A8"><span class="toc-number">2.12.6.1.2.</span> <span class="toc-text">2.使用</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#3-%E6%B3%A8%E6%84%8F"><span class="toc-number">2.12.6.1.3.</span> <span class="toc-text">3.注意</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#4-%E6%95%88%E6%9E%9C"><span class="toc-number">2.12.6.1.4.</span> <span class="toc-text">4.效果</span></a></li></ol></li><li class="toc-item toc-level-5"><a class="toc-link" href="#babel7-4%E4%BB%A5%E4%B8%8B-js%E5%85%BC%E5%AE%B9%E6%80%A7%E5%A4%84%E7%90%86-babel-polyfill%E5%BA%93%E7%9A%84%E4%BD%BF%E7%94%A8"><span class="toc-number">2.12.6.2.</span> <span class="toc-text">babel7.4以下 js兼容性处理-@babel/polyfill库的使用</span></a><ol class="toc-child"><li class="toc-item toc-level-6"><a class="toc-link" href="#1-%E5%AE%89%E8%A3%85-1"><span class="toc-number">2.12.6.2.1.</span> <span class="toc-text">1.安装</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#2-webpack%E5%85%A5%E5%8F%A3%E6%96%87%E4%BB%B6%E5%A4%84%E5%BC%95%E5%85%A5"><span class="toc-number">2.12.6.2.2.</span> <span class="toc-text">2.webpack入口文件处引入</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#3-%E4%BD%BF%E7%94%A8"><span class="toc-number">2.12.6.2.3.</span> <span class="toc-text">3.使用</span></a></li><li class="toc-item toc-level-6"><a class="toc-link" href="#4-%E6%95%88%E6%9E%9C-1"><span class="toc-number">2.12.6.2.4.</span> <span class="toc-text">4.效果</span></a></li></ol></li></ol></li><li class="toc-item toc-level-4"><a class="toc-link" href="#js%E8%AF%AD%E6%B3%95%E6%A3%80%E6%9F%A5"><span class="toc-number">2.12.7.</span> <span class="toc-text">js语法检查</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8E%8B%E7%BC%A9css-%E5%AF%B9%E4%BA%8Ehtml-js-webpack4%E9%83%BD%E5%B7%B2%E7%BB%8F%E9%BB%98%E8%AE%A4%E5%8E%8B%E7%BC%A9%E4%BA%86"><span class="toc-number">2.12.8.</span> <span class="toc-text">压缩css(对于html,js,webpack4都已经默认压缩了)</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%89%93%E5%8C%85%E5%92%8C%E8%BF%90%E8%A1%8C%E8%BF%9B%E5%BA%A6%E6%9D%A1%E5%8A%9F%E8%83%BD"><span class="toc-number">2.12.9.</span> <span class="toc-text">打包和运行进度条功能</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#webpack%E5%BD%93%E4%B8%ADuse%E7%9A%84%E5%87%A0%E7%A7%8D%E5%BD%A2%E5%BC%8F"><span class="toc-number">2.13.</span> <span class="toc-text">webpack当中use的几种形式</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#webpack%E9%85%8D%E7%BD%AE%E5%AF%B9%E8%B1%A1%E5%BD%93%E4%B8%AD%E7%9A%84resolve"><span class="toc-number">2.14.</span> <span class="toc-text">webpack配置对象当中的resolve</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#resolve-extensions"><span class="toc-number">2.14.1.</span> <span class="toc-text">resolve.extensions</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8E%A8%E8%8D%90%E5%87%A0%E6%AC%BE%E5%A5%BD%E7%94%A8%E7%9A%84npm"><span class="toc-number">2.15.</span> <span class="toc-text">推荐几款好用的npm</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#rimraf-%E2%80%94-%E5%BF%AB%E9%80%9F%E5%88%A0%E9%99%A4node-modules%E6%96%87%E4%BB%B6%E5%A4%B9"><span class="toc-number">2.15.1.</span> <span class="toc-text">rimraf —- 快速删除node_modules文件夹</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#clena-webpack-plugin-%E2%80%94-%E6%AF%8F%E6%AC%A1%E6%89%93%E5%8C%85%E5%88%A0%E9%99%A4dist%E7%9B%AE%E5%BD%95"><span class="toc-number">2.15.2.</span> <span class="toc-text">clena-webpack-plugin — 每次打包删除dist目录</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#webpack%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0%E5%AF%BC%E8%87%B4%E7%AC%AC%E4%B8%80%E8%A1%8Cxx%E4%BD%8D%E7%BD%AE%E6%8A%A5%E9%94%99"><span class="toc-number">2.16.</span> <span class="toc-text">webpack箭头函数导致第一行xx位置报错</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#loader%E5%92%8Cplugin%E4%BD%9C%E7%94%A8%E5%92%8C%E5%8C%BA%E5%88%AB"><span class="toc-number">3.</span> <span class="toc-text">loader和plugin作用和区别</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/bbed5cd2.html" title="大家好我是夯大力,这是我的影视,大力金刚等系列"><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202410091600476.png" onerror='this.onerror=null,this.src="/img/404.png"' alt="大家好我是夯大力,这是我的影视,大力金刚等系列"></a><div class="content"><a class="title" href="/bbed5cd2.html" title="大家好我是夯大力,这是我的影视,大力金刚等系列">大家好我是夯大力,这是我的影视,大力金刚等系列</a><time datetime="2024-10-21T08:12:21.000Z" title="发表于 2024-10-21 08:12:21">2024-10-21</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/91ff580f.html" title="Pycharm搭配miniConda(Anaconda的轻量版本)建立虚拟环境管理不同项目不同依赖">Pycharm搭配miniConda(Anaconda的轻量版本)建立虚拟环境管理不同项目不同依赖</a><time datetime="2024-10-18T21:22:02.000Z" title="发表于 2024-10-18 21:22:02">2024-10-18</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/50575b3e.html" title="独角数卡,打开商品列表出现Undefined variable form的解决办法"><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202408241535616.png" onerror='this.onerror=null,this.src="/img/404.png"' alt="独角数卡,打开商品列表出现Undefined variable form的解决办法"></a><div class="content"><a class="title" href="/50575b3e.html" title="独角数卡,打开商品列表出现Undefined variable form的解决办法">独角数卡,打开商品列表出现Undefined variable form的解决办法</a><time datetime="2024-08-24T15:31:38.000Z" title="发表于 2024-08-24 15:31:38">2024-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/6ace453b.html" title="前端常用npm库大全-vue,react,通用(持续更新)"><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202408241528979.png" onerror='this.onerror=null,this.src="/img/404.png"' alt="前端常用npm库大全-vue,react,通用(持续更新)"></a><div class="content"><a class="title" href="/6ace453b.html" title="前端常用npm库大全-vue,react,通用(持续更新)">前端常用npm库大全-vue,react,通用(持续更新)</a><time datetime="2024-08-24T15:24:59.000Z" title="发表于 2024-08-24 15:24:59">2024-08-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/f4cb1979.html" title="基于vue-pdf-embed的二开PDF预览的通用组件"><img src="https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202408241539662.png" onerror='this.onerror=null,this.src="/img/404.png"' alt="基于vue-pdf-embed的二开PDF预览的通用组件"></a><div class="content"><a class="title" href="/f4cb1979.html" title="基于vue-pdf-embed的二开PDF预览的通用组件">基于vue-pdf-embed的二开PDF预览的通用组件</a><time datetime="2024-08-11T08:53:00.000Z" title="发表于 2024-08-11 08:53:00">2024-08-11</time></div></div></div></div></div></div></main><footer id="footer" style="background-image:url(https://dreamos.oss-cn-beijing.aliyuncs.com/gitblog/202205291452280.jpg)"><div id="footer-wrap"><div class="copyright">©2021 - 2024 By 梦洁</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="直达评论"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js?v=4.13.0"></script><script src="/js/main.js?v=4.13.0"></script><script src="https://lib.baomitu.com/fancyapps-ui/5.0.33/fancybox/fancybox.umd.min.js"></script><div class="js-pjax"><script>(()=>{let t=null;const e=()=>{if(t=Artalk.init(Object.assign({el:"#artalk-wrap",server:"https://artalk.dreamlove.top",site:"梦洁小站",pageKey:location.pathname,darkMode:"dark"===document.documentElement.getAttribute("data-theme")},null)),"null"===GLOBAL_CONFIG.lightbox)return;t.on("list-loaded",()=>{t.ctx.get("list").getCommentNodes().forEach(t=>{const e=t.getRender().$content;btf.loadLightbox(e.querySelectorAll("img:not([atk-emoticon])"))})});btf.addGlobalFn("pjax",()=>{t.destroy()},"destroyArtalk")},a=async()=>{"object"==typeof Artalk||(await getCSS("https://lib.baomitu.com/artalk/2.8.2/Artalk.min.css"),await getScript("https://lib.baomitu.com/artalk/2.8.2/Artalk.min.js")),e()};btf.addGlobalFn("themeChange",e=>{const a=document.getElementById("artalk-wrap");if(!a||!a.children.length)return;const l="dark"===e;t.setDarkMode(l)},"artalk"),a()})()</script></div><script id="canvas_nest" defer color="0,0,255" opacity="0.7" zindex="-1" count="99" mobile="false" src="https://lib.baomitu.com/butterfly-extsrc/1.1.3/canvas-nest.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="algolia-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="search-wrap"><div id="algolia-search-input"></div><hr><div id="algolia-search-results"><div id="algolia-hits"></div><div id="algolia-pagination"></div><div id="algolia-info"><div class="algolia-stats"></div><div class="algolia-poweredBy"></div></div></div></div></div><div id="search-mask"></div><script src="https://lib.baomitu.com/algoliasearch/4.22.1/algoliasearch-lite.umd.min.js"></script><script src="https://lib.baomitu.com/instantsearch.js/4.65.0/instantsearch.production.min.js"></script><script src="/js/search/algolia.js?v=4.13.0"></script></div></div></body></html>