https://jchu.cc/tags/webdev/Recent content in Webdev on 只放拖鞋的鞋櫃Hugozh-TWTue, 23 Feb 2016 17:18:43 +0800https://jchu.cc/2016/02/23-webpack.htmlTue, 23 Feb 2016 17:18:43 +0800https://jchu.cc/2016/02/23-webpack.html<p>通常以直接下指令的方式使用 <strong>webpack-dev-server</strong>，可能會配合一些參數。當我們更動其中一個檔案的時候，webpack 會在 console 顯示剛剛重編的那唯一一個檔案。</p> <p>如果你想用 <strong>gulp + webpack</strong>，照著官方的<a href="https://webpack.github.io/docs/usage-with-gulp.html">文件</a>做下去，你會發現結果有些不同</p> <p>Usually we invoke command directly to launch <strong>webpack-dev-server</strong>, maybe adding some parameters. Once we modified one of files, webpack rebuild it and displays related message to that one only.</p> <p>If you follow official <a href="https://webpack.github.io/docs/usage-with-gulp.html">tutorial</a> to use <strong>gulp + webpack</strong>, then you find something different.</p> <div class="highlight"><div style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"> <table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;"> <pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1 </span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2 </span></code></pre></td> <td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%"> <pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span><span style="color:#75715e"># run webpack-dev-server directly</span> </span></span><span style="display:flex;"><span>$ webpack-dev-server --content-base _tmp --hot --inline</span></span></code></pre></td></tr></table> </div> </div><p>Update file by <code>touch</code>, webpack just rebuild it and print clean messages.</p> <img src="https://jchu.cc/2016/02/23-webpack/expected.png" alt="expected.png" style="max-width: 800px; margin: auto;">