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

webpack原理与实战

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p><a href="http://webpack.wuhaolin.cn/" rel="nofollow noreferrer" target="_blank"><span class="img-wrap"><img data-src="/img/remote/1460000012444693?w=1348&amp;h=845" src="/img/remote/1460000012444693?w=1348&amp;h=845" alt="" title="" style="cursor: pointer; display: inline;"></span></a></p> <p>webpack是一个js打包工具,不一个完整的前端构建工具。它的流行得益于模块化和单页应用的流行。webpack提供扩展机制,在庞大的社区支持下各种场景基本它都可找到解决方案。本文的目的是教会你用webpack解决实战中常见的问题。</p> <h2 id="articleHeader0">webpack原理</h2> <p>在深入实战前先要知道webpack的运行原理</p> <h3 id="articleHeader1">webpack核心概念</h3> <ul> <li> <code>en<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a></code> 一个可执行模块或库的入口文件。</li> <li> <code>chunk</code> 多个文件组成的一个代码块,例如把一个可执行模块和它所有依赖的模块组合和一个 <code>chunk</code> 这体现了webpack的打包机制。</li> <li> <code>loader</code> 文件转换器,例如把<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>转换为<a href="http://www.js-code.com/tag/es5" title="es5" target="_blank">es5</a>,scss转换为css。</li> <li> <code>plug<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a></code> 插件,用于扩展webpack的功能,在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。</li> </ul> <h3 id="articleHeader2">webpack构建流程</h3> <p>从启动webpack构建到输出结果经历了一系列过程,它们是:</p> <ol> <li>解析webpack配置参数,合并从shell传入和<code>webpack.config.js</code>文件里配置的参数,生产最后的配置结果。</li> <li>注册所有配置的插件,好让插件监听webpack构建生命周期的事件节点,以做出对应的反应。</li> <li>从配置的<code>en<a href="http://www.js-code.com/tag/try" title="try" target="_blank">try</a></code>入口文件开始解析文件构建AST语法树,找出每个文件所依赖的文件,递归下去。</li> <li>在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。</li> <li>递归完后得到每个文件的最终结果,根据<code>en<a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a></code>配置生成代码块<code>chunk</code>。</li> <li>输出所有<code>chunk</code>到文件系统。</li> </ol> <p>需要注意的是,在构建生命周期中有一系列插件在合适的时机做了合适的事情,比如<code>Ugl<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>yJsPlug<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a></code>会在loader转换递归完后对结果再使用<code>Ugl<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>yJs</code>压缩覆盖之前的结果。</p> <h2 id="articleHeader3">场景和方案</h2> <p>通过各种场景和对应的解决方案让你深入掌握webpack</p> <h3 id="articleHeader4">单页应用</h3> <p><strong>demo <a href="https://github.com/gwuhaolin/redemo" rel="nofollow noreferrer" target="_blank">redemo</a></strong><br />一个单页应用需要配置一个<code>entry</code>指明执行入口,webpack会为<code>entry</code>生成一个包含这个入口所有依赖文件的<code>chunk</code>,但要让它在浏览器里跑起来还需要一个<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>文件来加载<code>chunk</code>生成的js文件,如果提取出了css还需要让<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>文件引入提取出的css。<a href="https://github.com/gwuhaolin/web-webpack-plugin" rel="nofollow noreferrer" target="_blank">web-webpack-plugin</a>里的<code>WebPlug<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a></code>可以自动的完成这些工作。</p> <p>webpack配置文件</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 { WebPlugin } = require('web-webpack-plugin'); module.exports = { entry: { app: './src/doc/index.js', }, plugins: [ // 一个WebPlugin对应生成一个html文件 new WebPlugin({ //输出的html文件名称 filename: 'index.html', //这个html依赖的`entry` requires: ['app'], }), ], };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> { WebPlugin } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'web-webpack-<a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a>'</span>); <span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { <span class="hljs-attr">entry</span>: { <span class="hljs-attr">app</span>: <span class="hljs-string">'./src/<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>c/index.js'</span>, }, <span class="hljs-attr">plugins</span>: [ <span class="hljs-comment">// 一个WebPlugin对应生成一个html文件</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> WebPlugin({ <span class="hljs-comment">//输出的html文件名称</span> file<a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a>: <span class="hljs-string">'index.html'</span>, <span class="hljs-comment">//这个html依赖的`entry`</span> requires: [<span class="hljs-string">'app'</span>], }), ], };</code></pre> <p><code>requires: ['<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>c']</code>指明这个<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>依赖哪些<code>entry</code>,<code>entry</code>生成的js和css会自动注入到HTML里。<br />你还可以配置这些资源的注入方式,支持如下属性:</p> <ul> <li> <code>_dist</code> 只有在生产环境下才引入该资源</li> <li> <code>_dev</code> 只有在开发环境下才引入该资源</li> <li> <code>_inline</code> 把该资源的内容潜入到html里</li> <li> <code>_ie</code> 只有IE浏览器才需要引入的资源</li> </ul> <p>要设置这些属性可以通过在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="new WebPlugin({ filename: 'index.html', requires: { app:{ _dist:true, _inline:false, } }, })," title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">new</span> WebPlugin({ <span class="hljs-attr">filename</span>: <span class="hljs-string">'index.html'</span>, <span class="hljs-attr">requires</span>: { <span class="hljs-attr">app</span>:{ <span class="hljs-attr">_dist</span>:<span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span>, <span class="hljs-attr">_inline</span>:<span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span>, } }, }),</code></pre> <p>或者在模版里设置,使用模版的好处是灵活的控制资源注入点。</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="new WebPlugin({ filename: 'index.html', template: './template.html', })," title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">new</span> WebPlugin({ <span class="hljs-attr">filename</span>: <span class="hljs-string">'index.html'</span>, <span class="hljs-attr">template</span>: <span class="hljs-string">'./template.html'</span>, }),</code></pre> <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 lang=&quot;zh-cn&quot;><br /> <head> <link rel=&quot;stylesheet&quot; href=&quot;app?_inline&quot;> <script src=&quot;ie-polyfill?_ie&quot;></script><br /> </head><br /> <body></p> <div id=&quot;react-body&quot;></div> <p><script src=&quot;app&quot;></script><br /> </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> <span class="hljs-attr">lang</span>=<span class="hljs-string">"zh-cn"</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"><a href="http://www.js-code.com/tag/link" title="浏览关于“link”的文章" target="_blank" class="tag_link">link</a></span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"app?_inline"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"ie-polyfill?_ie"</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">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">"react-body"</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">"app"</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> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p><code>WebPlugin</code>插件借鉴了<code>fis3</code>的思想,补足了webpack缺失的以HTML为入口的功能。想了解<code>WebPlugin</code>的更多功能,见<a href="https://github.com/gwuhaolin/web-webpack-plugin/blob/master/readme_zh.md#" rel="nofollow noreferrer" target="_blank">文档</a>。</p> <h3 id="articleHeader5">一个项目里管理多个单页应用</h3> <p>一般项目里会包含多个单页应用,虽然多个单页应用也可以合并成一个但是这样做会导致用户没访问的部分也加载了。如果项目里有很多个单页应用,为每个单页应用配置一个<code>entry</code>和<code>WebPlugin </code>?如果项目又新增了一个单页应用,又去新增webpack配置?这样做太麻烦了,<a href="https://github.com/gwuhaolin/web-webpack-plugin" rel="nofollow noreferrer" target="_blank">web-webpack-plugin</a>里的<code>AutoWebPlugin</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="module.exports = { plugins: [ // 所有页面的入口目录 new AutoWebPlugin('./src/'), ] };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-built_in">module</span>.exports = { <span class="hljs-attr">plugins</span>: [ <span class="hljs-comment">// 所有页面的入口目录</span> <span class="hljs-keyword">new</span> AutoWebPlugin(<span class="hljs-string">'./src/'</span>), ] };</code></pre> <p><code>AutoWebPlugin</code>会把<code>./src/</code>目录下所有每个文件夹作为一个单页页面的入口,自动为所有的页面入口配置一个WebPlugin输出对应的html。要新增一个页面就在<code>./src/</code>下新建一个文件夹包含这个单页应用所依赖的代码,<code>AutoWebPlugin</code>自动生成一个名叫文件夹名称的html文件。<code>AutoWebPlugin</code>的更多功能见<a href="https://github.com/gwuhaolin/web-webpack-plugin/blob/master/readme_zh.md#" rel="nofollow noreferrer" target="_blank">文档</a>。</p> <h3 id="articleHeader6">代码分割优化</h3> <p>一个好的代码分割对浏览器首屏效果提升很大。比如对于最常见的react体系你可以</p> <ol> <li>先抽出基础库<code>react</code> <code>react-<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m</code> <code>redux</code> <code>react-redux</code>到一个单独的文件而不是和其它文件放在一起打包为一个文件,这样做的好处是只要你不升级他们的版本这个文件永远不会被刷新。如果你把这些基础库和业务代码打包在一个文件里每次改动业务代码都会导致文件hash值变化从而导致缓存失效浏览器重复下载这些包含基础库的代码。以上的配置为:</li> </ol> <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="// vender.js 文件抽离基础库到单独的一个文件里防止跟随业务代码被刷新 // 所有页面都依赖的第三方库 // react基础 import 'react'; import 'react-dom'; import 'react-redux'; // redux基础 import 'redux'; import 'redux-thunk';" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// vender.js 文件抽离基础库到单独的一个文件里防止跟随业务代码被刷新</span> <span class="hljs-comment">// 所有页面都依赖的第三方库</span> <span class="hljs-comment">// react基础</span> <span class="hljs-keyword">import</span> <span class="hljs-string">'react'</span>; <span class="hljs-keyword">import</span> <span class="hljs-string">'react-dom'</span>; <span class="hljs-keyword">import</span> <span class="hljs-string">'react-redux'</span>; <span class="hljs-comment">// redux基础</span> <span class="hljs-keyword">import</span> <span class="hljs-string">'redux'</span>; <span class="hljs-keyword">import</span> <span class="hljs-string">'redux-thunk'</span>;</code></pre> <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="// webpack配置 { entry: { vendor: './path/to/vendor.js', }, }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-comment">// webpack配置</span> { <span class="hljs-attr">entry</span>: { <span class="hljs-attr">vendor</span>: <span class="hljs-string">'./path/to/vendor.js'</span>, }, }</code></pre> <ol> <li>再通过<a href="https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin" rel="nofollow noreferrer" target="_blank">CommonsChunkPlugin</a>可以提取出多个代码块都依赖的代码形成一个单独的<code>chunk</code>。在应用有多个页面的场景下提取出所有页面公共的代码减少单个页面的代码,在不同页面之间切换时所有页面公共的代码之前被加载过而不必重新加载。</li> </ol> <h3 id="articleHeader7">构建npm包</h3> <p><strong>demo <a href="https://github.com/gwuhaolin/remd" rel="nofollow noreferrer" target="_blank">remd</a></strong><br />除了构建可运行的web应用,webpack也可用来构建发布到npm上去的给别人调用的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 nodeExternals = require('webpack-node-externals'); module.exports = { entry: { index: './src/index.js', }, externals: [nodeExternals()], target: 'node', output: { path: path.resolve(__dirname, '.npm'), filename: '[name].js', libraryTarget: 'commonjs2', }, };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">const</span> <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>Externals = <span class="hljs-built_in">require</span>(<span class="hljs-string">'webpack-node-externals'</span>); <span class="hljs-built_in">module</span>.exports = { <span class="hljs-attr">entry</span>: { <span class="hljs-attr">index</span>: <span class="hljs-string">'./src/index.js'</span>, }, <span class="hljs-attr">externals</span>: [nodeExternals()], <span class="hljs-attr">target</span>: <span class="hljs-string">'node'</span>, <span class="hljs-attr">output</span>: { <span class="hljs-attr">path</span>: path.resolve(__dirname, <span class="hljs-string">'.npm'</span>), <span class="hljs-attr">filename</span>: <span class="hljs-string">'[name].js'</span>, <span class="hljs-attr">libraryTarget</span>: <span class="hljs-string">'commonjs2'</span>, }, };</code></pre> <p>这里有几个区别于web应用不同的地方:</p> <ul> <li> <code>externals: [<a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>Externals()]</code>用于排除<code><a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a>_modules</code>目录下的代码被打包进去,因为放在<code>node_modules</code>目录下的代码应该通过npm安装。</li> <li> <code>libraryTarget: 'commonjs2'</code>指出<code>entry</code>是一个可供别人调用的库而不是可执行的,输出的js文件按照commonjs规范。</li> </ul> <h3 id="articleHeader8">构建服务端渲染</h3> <p>服务端渲染的代码要运行在nodejs环境,和浏览器不同的是,服务端渲染代码需要采用commonjs规范同时不应该包含除js之外的文件比如css。webpack配置如下:</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="module.exports = { target: 'node', entry: { 'server_render': './src/server_render', }, output: { filename: './dist/server/[name].js', libraryTarget: 'commonjs2', }, module: { rules: [ { test: /.js$/, loader: 'babel-loader', }, { test: /.(scss|css|pdf)$/, loader: 'ignore-loader', }, ] }, };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-built_in">module</span>.exports = { <span class="hljs-attr">target</span>: <span class="hljs-string">'node'</span>, <span class="hljs-attr">entry</span>: { <span class="hljs-string">'server_render'</span>: <span class="hljs-string">'./src/server_render'</span>, }, <span class="hljs-attr">output</span>: { <span class="hljs-attr">filename</span>: <span class="hljs-string">'./dist/server/[name].js'</span>, <span class="hljs-attr">libraryTarget</span>: <span class="hljs-string">'commonjs2'</span>, }, <span class="hljs-attr">module</span>: { <span class="hljs-attr">rules</span>: [ { <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.js$/</span>, <span class="hljs-attr">loader</span>: <span class="hljs-string">'<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-loader'</span>, }, { <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.(scss|css|pdf)$/</span>, <span class="hljs-attr">loader</span>: <span class="hljs-string">'ignore-loader'</span>, }, ] }, };</code></pre> <p>其中几个关键的地方在于:</p> <ul> <li> <code>target: 'node'</code> 指明构建出的代码是要运行在node环境里</li> <li> <code>libraryTarget: 'commonjs2'</code> 指明输出的代码要是commonjs规范</li> <li> <code>{test: /.(scss|css|pdf)$/,loader: 'ignore-loader'}</code> 是为了防止不能在node里执行服务端渲染也用不上的文件被打包进去。</li> </ul> <h3 id="articleHeader9">从fis3迁移到webpack</h3> <p>fis3和webpack有相似的地方也有不同的地方。相似在于他们都采用commonjs规范,不同在于导入css这些非js资源的方式。fis3通过<code>// @require './index.scss'</code>而webpack通过<code>require('./index.scss')</code>。如果想从fis3平滑迁移到webpack可以使用<a href="https://github.com/gwuhaolin/comment-require-loader/issues" rel="nofollow noreferrer" target="_blank">comment-require-loader</a>。比如你想在webpack构建是使用采用了fis3方式的<code>imui</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="loaders:[{ test: /.js$/, loaders: ['comment-require-loader'], include: [path.resolve(__dirname, 'node_modules/imui'),] }]" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js">loaders:[{ <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.js$/</span>, <span class="hljs-attr">loaders</span>: [<span class="hljs-string">'comment-require-loader'</span>], <span class="hljs-attr">include</span>: [path.resolve(__dirname, <span class="hljs-string">'node_modules/imui'</span>),] }]</code></pre> <h2 id="articleHeader10">自定义webpack扩展</h2> <p>如果你在社区找不到你的应用场景的解决方案,那就需要自己动手了写loader或者<a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a>了。<br />在你编写自定义webpack扩展前你需要想明白到底是要做一个<code>loader</code>还是<code><a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a></code>呢?可以这样判断:</p> <blockquote><p>如果你的扩展是想对一个个单独的文件进行转换那么就编写<code>loader</code>剩下的都是<code>plugin</code>。</p></blockquote> <p>其中对文件进行转换可以是像:</p> <ul> <li> <code><a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>-loader</code>把<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>转换成<code><a href="http://www.js-code.com/tag/es5" title="es5" target="_blank">es5</a></code> </li> <li> <code>file-loader</code>把文件替换成对应的URL</li> <li> <code>raw-loader</code>注入文本文件内容到代码里去</li> </ul> <h3 id="articleHeader11">编写 webpack loader</h3> <p><strong>demo <a href="https://github.com/gwuhaolin/comment-require-loader" rel="nofollow noreferrer" target="_blank">comment-require-loader</a></strong><br />编写<code>loader</code>非常简单,以comment-require-loader为例:</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="module.exports = function (content) { return replace(content); };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-built_in">module</span>.exports = <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span> (<span class="hljs-params">content</span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> replace(content); };</code></pre> <p><code>loader</code>的入口需要导出一个函数,这个函数要干的事情就是转换一个文件的内容。<br />函数接收的参数<code>content</code>是一个文件在转换前的字符串形式内容,需要返回一个新的字符串形式内容作为转换后的结果,所有通过模块化倒入的文件都会经过<code>loader</code>。从这里可以看出<code>loader</code>只能处理一个个单独的文件而不能处理代码块。想编写更复杂的loader可参考<a href="https://webpack.github.io/docs/loaders.html" rel="nofollow noreferrer" target="_blank">官方文档</a></p> <h3 id="articleHeader12">编写 webpack plugin</h3> <p><strong>demo <a href="https://github.com/gwuhaolin/end-webpack-plugin" rel="nofollow noreferrer" target="_blank">end-webpack-plugin</a></strong><br /><code>plugin</code>应用场景广泛,所以稍微复杂点。以end-webpack-plugin为例:</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="class EndWebpackPlugin { constructor(doneCallback, failCallback) { this.doneCallback = doneCallback; this.failCallback = failCallback; } apply(compiler) { // 监听webpack生命周期里的事件,做相应的处理 compiler.plugin('done', (stats) => {<br /> this.doneCallback(stats);<br /> });<br /> compiler.plugin('failed', (err) => {<br /> this.failCallback(err);<br /> });<br /> }<br /> }</p> <p>module.exports = EndWebpackPlugin;" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">EndWebpackPlugin</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/constructor" title="浏览关于“constructor”的文章" target="_blank" class="tag_link">constructor</a></span>(doneC<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a>back, failCallback) { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.doneCallback = doneCallback; <span class="hljs-keyword">this</span>.failCallback = failCallback; } apply(compiler) { <span class="hljs-comment">// 监听webpack生命周期里的事件,做相应的处理</span> compiler.plugin(<span class="hljs-string">'done'</span>, (stats) =&gt; { <span class="hljs-keyword">this</span>.doneCallback(stats); }); compiler.plugin(<span class="hljs-string">'failed'</span>, (err) =&gt; { <span class="hljs-keyword">this</span>.failCallback(err); }); } } <span class="hljs-built_in">module</span>.exports = EndWebpackPlugin;</code></pre> <p><code>loader</code>的入口需要导出一个<a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>, 在<code><a href="http://www.js-code.com/tag/new" title="new" target="_blank">new</a> EndWebpackPlugin()</code>的时候通过构造函数传入这个插件需要的参数,在webpack启动的时候会先实例化<code>plugin</code>再调用<code>plugin</code>的<code>apply</code>方法,插件需要在<code>apply</code>函数里监听webpack生命周期里的事件,做相应的处理。<br />webpack plugin 里有2个核心概念:</p> <ul> <li> <code>Compiler</code>: 从webpack启动到推出只存在一个<code>Compiler</code>,<code>Compiler</code>存放着webpack配置</li> <li> <code>Compilation</code>: 由于webpack的监听文件变化自动编译机制,<code>Compilation</code>代表一次编译。</li> </ul> <p><code>Compiler</code> 和 <code>Compilation</code> 都会广播一系列事件。<br />webpack生命周期里有非常多的事件可以在<a href="https://webpack.js.org/api/plugins/compiler/#event-hooks" rel="nofollow noreferrer" target="_blank">event-hooks</a>和<a href="https://webpack.js.org/api/plugins/compilation/" rel="nofollow noreferrer" target="_blank">Compilation</a>里查到。以上只是一个最简单的demo,更复杂的可以查看 <a href="https://github.com/webpack/docs/wiki/how-to-write-a-plugin" rel="nofollow noreferrer" target="_blank">how to write a plugin</a>或参考<a href="https://github.com/gwuhaolin/web-webpack-plugin" rel="nofollow noreferrer" target="_blank">web-webpack-plugin</a>。</p> <h2 id="articleHeader13">总结</h2> <p>webpack其实很简单,可以用一句话涵盖它的本质:</p> <blockquote><p>webpack是一个打包模块化js的工具,可以通过loader转换文件,通过plugin扩展功能。</p></blockquote> <p>如果webpack让你感到复杂,一定是各种loader和plugin的原因。<br />希望本文能让你明白webpack的原理与本质让你可以在实战中灵活应用webpack。</p> <p><a href="https://github.com/gwuhaolin/blog/issues/4" rel="nofollow noreferrer" target="_blank">阅读原文</a></p> <p></code></p>

总结

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

webpack原理与实战

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

webpack原理与实战

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

80%的人都看过