https://www.sdvcrx.com/tags/webpack/Recent content in Webpack on sdvcrx - A tech blogHugozhSat, 22 Jul 2017 11:08:13 +0800https://www.sdvcrx.com/post/2017-07-22-webpack-define-plugin/Sat, 22 Jul 2017 11:08:13 +0800https://www.sdvcrx.com/post/2017-07-22-webpack-define-plugin/<p><a href="https://webpack.js.org">webpack</a> 的 <a href="https://webpack.js.org/plugins/define-plugin/">DefinePlugin</a> 是经常使用的一个 plugin。它常常用来定义变量以区分环境。它的用法如下：</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="k">new</span> <span class="nx">webpack</span><span class="p">.</span><span class="nx">DefinePlugin</span><span class="p">({</span> </span></span><span class="line"><span class="cl"> <span class="s1">&#39;process.env&#39;</span><span class="o">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="s2">&#34;production&#34;</span><span class="p">),</span> </span></span><span class="line"><span class="cl"> <span class="nx">debug</span><span class="o">:</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">(</span><span class="kc">true</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="p">})</span> </span></span></code></pre></td></tr></table> </div> </div><p>一开始我以为它只是把这些变量挂在了全局变量下面，使得代码中能直接用变量，但是经过仔细查看，<strong>并不是这样的</strong>。</p>