脚本宝典收集整理的这篇文章主要介绍了

Webpack 4.X 从入门到精通 – entry与output(一)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">回顾历史</h1> <p><code>Web</code>应用日益复杂,前端开发也发生了翻天覆地的变化变得盘根错节,到今天已经非常复杂和庞大了!用<code>html</code>、<code>css</code>、<code><a href="http://www.js-code.com/tag/java" title="java" target="_blank">java</a>script</code>老老实实的写个页面的时代早已过去。而现在要完成工作需要借助很多额外的东西,比如工程化、自动化等等。这样才显得有逼格,才像一个真正的程序猿。如果说还停留在切个图,下载个js效果怼上去的阶段,显然你会脱节的。由此也带动了很多前端工具的发展,以<code>Gulp</code>、<code>Grunt</code>、<code>webpack</code>等为代表的构建工具犹如雨后春笋般的生长,而<code>webpack</code>更为流行,使用更为广泛,可以说它现在已经是前端开发的的标配了。所以这次我会用一个系列的文章详细去介绍<code>webpack</code>,由浅入深解析<code>webpack</code>,再通过实战例子配合,掌握以后足以解决你工作中的问题。同时这套系列文章是针对最新的<strong><code>4.X</code></strong>的版本。</p> <h1 id="articleHeader1">Webpack是什么</h1> <p><code>webpack</code>是一款工具?什么工具?有人管他叫打包工具,这样太low了。可以看看<a href="https://webpack.js.org/" rel="nofollow noreferrer" target="_blank">webpack官网</a>,页面底部的一个个小头像代表的是给<code>webpack</code>赞助过的人,鼠标放上去还可以看到他赞助了多少钱。就凭这么多人的赞助,也不能叫这么low逼的名,听得好像是个压缩软件。得起个高大上的名,叫构建工具(当然打包的功能是它的一大特色)</p> <p>前端里的什么工程化呀自动化呀,这些东西有个特点,就是源代码无法在浏览器里直接运行,必需通过编译才行。那构建工具其实就能做这些事情。如:</p> <blockquote> <ul> <li>代码编译,把ES6转成ES5</li> <li>模块合并,把多个文件合并成一个文件,减少http请求</li> <li>代码压缩优化,抽取公共代码,减少代码量</li> </ul> </blockquote> <p>这些都是构建工具要做的事情,但是这些东西都是用代码去实现,让他们通过代码自动完成这些事情,解放我们的生产力。<code>webpack</code>最大的一个特色就是打包,官网的那张大图所体现的就是打包的功能,并能解决模块间相互依赖的问题,它能把乱成一锅粥的文件打包成清晰的文件,快刀斩乱麻!其次<code>webapck</code>是以模块为基石,对于模块化的支持体现的淋漓尽致,在<code>webpack</code>中所有的内容都是模块,一个图片、一个css文件、一个js文件都是一个模块。</p> <h1 id="articleHeader2">安装</h1> <blockquote> <ol> <li>npm <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>it -y</li> <li>npm <a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>st<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a> --save-dev webpack</li> <li>npm <a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a>st<a href="http://www.js-code.com/tag/all" title="all" target="_blank">all</a> --save-dev webpack-cli</li> </ol> </blockquote> <p>注意:<br />1、安装前确认一件事件,<code><a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>js</code>的版本在5.0以上<br />2、npm init -y为生成<code><a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json</code>文件<br />3、两条命令可以简写为:npm i webpack webpack-cli -D<br />4、建议安装到项目中而并非全局环境下。安装到全局环境下可能导致有的插件无法使用以及避免不同的项目依赖的版本不同而出现问题<br />5、<code>4.x</code>的版本把cli分离出来了,所以必需安装<code>webpack-cli</code><br />6、验证是否安装成功:webpack -v<br /><span class="img-wrap"><img data-src="/img/bVbeUit?w=1405&amp;h=487" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图1-1" title="图1-1" style="cursor: pointer;"></span><br /><span class="img-wrap"><img data-src="/img/bVbeUiw?w=335&amp;h=87" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图1-2" title="图1-2" style="cursor: pointer;"></span></p> <h1 id="articleHeader3">配置文件</h1> <p>配置文件犹如<code>webpack</code>的大脑,<code>webpack</code>的工作都是通过配置文件完成的。编译哪个文件、怎么编译、编译成什么样、输出为什么等等,所有的操作都是按配置文件里的内容来完成的,所以配置文件一个重量级的嘉宾,<code>webapck</code>想要运行的话配置文件是必不可少的东西。</p> <p>配置文件有6个核心的东西组成,就像<code>JavaScript</code>由<code><a href="http://www.js-code.com/tag/ecmascript" title="ECMAScript" target="_blank">ECMAScript</a></code>、<code><a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a></code>、<code>BOM</code>三部分组成一样。</p> <blockquote> <ol> <li> <code>en<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a></code>:入口文件(你要打包,就告诉我打包哪些)</li> <li> <code>output</code>:出口文件(我打包完了,给你放到哪里)</li> <li> <code>module</code>:模块(放lorder,编译浏览器不认识的东西)</li> <li> <code><a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a>s</code>:插件(辅助开发,提高开发效率)</li> <li> <code>devServer</code>:服务器(webpack提供的本地服务器)</li> <li> <code>mode</code>:模式,分为开发模式、生产模式。此为4.X里新增的</li> </ol> </blockquote> <p>注意:<br />1、配置文件的名字建议叫<code>webpack.config.js</code>,需要放在项目文件夹的根目录下。当然你可以换成其它的名字,但是运行的时候就要增加额外的步骤了<br />2、<code>webpack</code>采用<code>CommonJS</code>的规范,上面的所有参数都需要放在对象里,用<code>moudle.<a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a>s</code>导出</p> <h1 id="articleHeader4">小试牛刀</h1> <p>在项目文件夹(我的为webpack-demo)的根目录下创建必要的文件夹及文件,结构如下:</p> <ul> <li> <p>[ ] <strong>webpack-demo</strong></p> <ul> <li>[ ] <strong><a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>_modules</strong> </li> <li> <p>[ ] <strong>src</strong></p> <ul> <li>main.js</li> <li>show.js</li> </ul> </li> <li>[ ] <strong>index.html</strong> </li> <li>[ ] <strong><a href="http://www.js-code.com/tag/package" title="package" target="_blank">package</a>.json</strong> </li> <li>[ ] <strong>webpack.config.js</strong> </li> </ul> </li> </ul> <p>如下图<br /><span class="img-wrap"><img data-src="/img/bVbeUiy?w=314&amp;h=177" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" title="watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" style="cursor: pointer;"></span></p> <p>show.js代码如下</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="//声明一个函数,最终做为一个模块被导出 const show=content=>{<br /> const box=document.getElementById(&quot;box&quot;);<br /> box.innerHTML=`你好!${content}`;<br /> }</p> <p>export {show}; //ES6导出模块的语法" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">//声明一个函数,最终做为一个模块被导出</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> show=<span class="hljs-function"><span class="hljs-params">content</span>=&gt;</span>{ <span class="hljs-keyword">const</span> box=<span class="hljs-built_in"><a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a></span>.getElementById(<span class="hljs-string">"box"</span>); box.inner<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>=<span class="hljs-string">`你好!<span class="hljs-subst">${content}</span>`</span>; } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> {show}; <span class="hljs-comment">//ES6导出模块的语法</span></code></pre> <p>main.js代码如下</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import {show} from './show'; //ES6导入模块的语法,‘./’为main.js的根目录src,ES6里导入的模块为js话不需要加后缀名 show('kaivon');" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> {show} <span class="hljs-keyword">from</span> <span class="hljs-string">'./show'</span>; <span class="hljs-comment">//ES6导入模块的语法,‘./’为main.js的根目录src,ES6里导入的模块为js话不需要加后缀名</span> show(<span class="hljs-string">'kaivon'</span>);</code></pre> <p>index.html代码如下</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title></title><br /> </head><br /> <body></p> <div id=&quot;box&quot;></div> <p> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>webpack.config.js代码如下</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const path=require('path'); //nodejs的语法,引入路径模块,为了输出的时候找绝对路径 module.exports={ entry:'./src/main.js', //入口文件为main.js output:{ //输出 path:path.resolve(__dirname,'dist'), //path.resolve为nodejs的固定语法,用于找到当前文件的绝对路径 filename:'bundle.js' //输出的文件名 }, };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">const</span> path=<span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-comment">//<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>js的语法,引入路径模块,为了输出的时候找绝对路径</span> <span class="hljs-built_in">module</span>.exports={ <span class="hljs-attr">en<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a></span>:<span class="hljs-string">'./src/main.js'</span>, <span class="hljs-comment">//入口文件为main.js </span> output:{ <span class="hljs-comment">//输出</span> path:path.resolve(__dir<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>,<span class="hljs-string">'dist'</span>), <span class="hljs-comment">//path.resolve为nodejs的固定语法,用于找到当前文件的绝对路径</span> filename:<span class="hljs-string">'bundle.js'</span> <span class="hljs-comment">//输出的文件名</span> }, };</code></pre> <p>在终端里执行命令<code>webpack</code>后,不出意外的话终端里显示如下就表示成功了<br /><span class="img-wrap"><img data-src="/img/bVbeUiA?w=1428&amp;h=759" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图1-4" title="图1-4" style="cursor: pointer;"></span><br />同时看一下文件结构目录,多了一个<code>dist</code>文件夹,以及<code>bundle.js</code>文件。这两个就是<code>webpack</code>打包生成的文件,如下<br /><span class="img-wrap"><img data-src="/img/bVbeUiC?w=308&amp;h=226" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" title="watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=" style="cursor: pointer;"></span><br />在<code>index.html</code>文件里引入<code>bundle.js</code>文件后,用浏览器打开<code>index.html</code>,可以看到页面里有内容了。这就代表我们已经使用<code>webpack</code>打包了一个文件,它的基本用法已经跑了。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<body></p> <div id=&quot;box&quot;></div> <p> <script src=&quot;dist/bundle.js&quot;></script><br /> </body>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"box"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"dist/bundle.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span></code></pre> <h2 id="articleHeader5">语法及步骤</h2> <h3 id="articleHeader6">语法</h3> <blockquote> <p>1、 <code>en<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a></code> 入口文件</p> <ul> <li>只打包一个文件(单入口),写个字符串</li> <li>把多个文件打包成一个文件,写个<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a></li> <li>把多个文件分别打包成多个文件,写成对象</li> <li> <code>webpack</code>把打包后的文件叫<code>Chunck</code> </li> </ul> <p>2、 <code>output</code> 出口文件<br /><code>file<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a></code> 输出文件的名称</p> <ul> <li>1、输出一个文件,写个字符串</li> <li>2、输出多个文件,文件名前面加个标识符(id/<a href="http://www.js-code.com/tag/name" title="name" target="_blank">name</a>/hash)</li> </ul> <p><code>path</code> 输出文件的路径</p> <ul> <li>1、路径必需为绝对路径</li> <li>2、<code>__dirname</code>是<code>nodejs</code>里的一个模块,表示当前文件的绝对路径</li> <li>3、<code>path</code>为<code>nodejs</code>的系统模块,直接引入后调用<code>path.resolve(__dirname,'输出文件的路径')</code>;</li> </ul> </blockquote> <h3 id="articleHeader7">步骤</h3> <p>当我们在终端里输入<code>webpack</code>命令的时候<code>webpack</code>会按以下的步骤开始工作</p> <blockquote> <ol> <li>先打开根目录下的<code>webpack.config.js</code> </li> <li>找<code>entry</code>(入口)属性的值</li> <li>进入到<code>main.js</code>里,看到它又依赖<code>show.js</code>,再找到<code>show.js</code> </li> <li>把<code>main.js</code>与<code>show.js</code>合并成一个js文件</li> <li>在<code>webpack.config.js</code>里找到<code>output</code>(出口)属性</li> <li>解析<code>output</code>里的<code>path</code>与<code>filename</code>属性的值</li> <li>把第4步合并成的js文件放到<code>dist</code>文件夹里,并起个名字叫<code>bundle.js</code> </li> </ol> </blockquote> <h1 id="articleHeader8">趁热打铁</h1> <p>下面演示多入口,在<code>src</code>目录里新建两个js文件,<code>1.js</code>与<code>2.js</code>,代码如下:<br />1.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="console.log('这是第一个入口文件!');" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript" style="word-break: break-word; white-space: initial;"><span class="hljs-built_in">console</span>.log(<span class="hljs-string">'这是第一个入口文件!'</span>);</code></pre> <p>2.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="console.log('这是第二个入口文件!');" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript" style="word-break: break-word; white-space: initial;"><span class="hljs-built_in">console</span>.log(<span class="hljs-string">'这是第二个入口文件!'</span>);</code></pre> <p>修改<code>webpack.config.js</code>文件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const path=require('path'); //两个entry分别一一对应两个filename module.exports={ //entry:['./src/1.js','./src/2.js'], entry:{ one:'./src/1.js', two:'./src/2.js' }, output:{ //filename:'bundle.js', filename:'[name].bundle.js' //可以以name/id/hash放在中括号里区分文件名 path:path.resolve(__dirname,'dist'), } }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">const</span> path=<span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>); <span class="hljs-comment">//两个entry分别一一对应两个filename</span> <span class="hljs-built_in">module</span>.exports={ <span class="hljs-comment">//entry:['./src/1.js','./src/2.js'],</span> entry:{ <span class="hljs-attr">one</span>:<span class="hljs-string">'./src/1.js'</span>, <span class="hljs-attr">two</span>:<span class="hljs-string">'./src/2.js'</span> }, <span class="hljs-attr">output</span>:{ <span class="hljs-comment">//filename:'bundle.js',</span> filename:<span class="hljs-string">'[name].bundle.js'</span> <span class="hljs-comment">//可以以name/id/hash放在中括号里区分文件名</span> path:path.resolve(__dirname,<span class="hljs-string">'dist'</span>), } }</code></pre> <p>分别注释对应的<code>entry</code>与<code>filename</code>,在终端里执行命令:webpack后,查看<code>dist</code>文件夹及运行<code>index.html</code>后查看效果<br /><strong>1、当<code>entry</code>为<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a>的时候,<code>webpack</code>会把<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="浏览关于“数组”的文章" target="_blank" class="tag_link">数组</a>里所有文件打包成一个js文件</strong><br /><strong>2、当<code>entry</code>为对象的时候,<code>webpack</code>会把对象里的文件分别打包成多个文件</strong></p> <p>文章里所说到的只是entry与output的常用配置,它的配置不止这些,可以参考以下链接<br /><code>entry</code>的所有配置<a href="https://webpack.js.org/concepts/entry-points/" rel="nofollow noreferrer" target="_blank"></a><a href="https://webpack.js.org/concepts/entry-points/" rel="nofollow noreferrer" target="_blank">https://webpack.js.org/concep...</a><br /><code>output</code>的所有配置<a href="https://webpack.js.org/concepts/output/" rel="nofollow noreferrer" target="_blank"></a><a href="https://webpack.js.org/concepts/output/" rel="nofollow noreferrer" target="_blank">https://webpack.js.org/concep...</a></p> <p><a href="https://pan.baidu.com/s/147HSaocIRlo8nZx2bwEDzg" rel="nofollow noreferrer" target="_blank">资料下载</a></p> <p><a href="https://segmentfault.com/a/1190000015907078">下一篇:Webpack 4.X 从入门到精通 - plugin(二)</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Webpack 4.X 从入门到精通 – entry与output(一)

全部内容,希望文章能够帮你解决

Webpack 4.X 从入门到精通 – entry与output(一)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过