https://blog.iphpo.com/tags/webpack/Recent content in webpack on 戲中話Hugozh-twherb09638@gmail.com (Herb)herb09638@gmail.com (Herb)Sun, 09 Apr 2017 00:00:00 +0800https://blog.iphpo.com/blog/2017/04/webpack-%E7%AD%86%E8%A8%98%E4%BA%8C%E5%88%9D%E5%A7%8B%E5%8C%96%E8%A8%AD%E5%AE%9A%E6%AA%94/Sun, 09 Apr 2017 00:00:00 +0800herb09638@gmail.com (Herb)https://blog.iphpo.com/blog/2017/04/webpack-%E7%AD%86%E8%A8%98%E4%BA%8C%E5%88%9D%E5%A7%8B%E5%8C%96%E8%A8%AD%E5%AE%9A%E6%AA%94/<p>當剛安裝完Webpack</p> <p>第一次執行會看到如下的訊息</p> <p><img src="../%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7-2017-04-07-%E4%B8%8B%E5%8D%8811.09.36-300x31.png" alt=""></p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl"> $ webpack <span class="o">[</span>23:07:04<span class="o">]</span> </span></span><span class="line"><span class="cl">No configuration file found and no output filename configured via CLI option. </span></span><span class="line"><span class="cl">A configuration file could be named <span class="s1">&#39;webpack.config.js&#39;</span> in the current directory. </span></span><span class="line"><span class="cl">Use --help to display the CLI options. </span></span></code></pre></div><p>也就是他找不到 webpack.config.js 的設定檔</p> <p>所以就在專案目錄下新增一個webpack.config.js</p> <p>裡面的內容可以參考<a href="https://webpack.js.org/configuration/">官方的Document</a></p> <p>設定檔的基礎架構由幾個部分組成</p>https://blog.iphpo.com/blog/2017/04/webpack-%E7%AD%86%E8%A8%98%E4%B8%89%E7%94%A8npm-script%E7%AE%A1%E7%90%86%E9%96%8B%E7%99%BC%E6%B5%81%E7%A8%8B%E8%A3%A1%E7%9A%84%E6%8C%87%E4%BB%A4/Sun, 09 Apr 2017 00:00:00 +0800herb09638@gmail.com (Herb)https://blog.iphpo.com/blog/2017/04/webpack-%E7%AD%86%E8%A8%98%E4%B8%89%E7%94%A8npm-script%E7%AE%A1%E7%90%86%E9%96%8B%E7%99%BC%E6%B5%81%E7%A8%8B%E8%A3%A1%E7%9A%84%E6%8C%87%E4%BB%A4/<p><img src="../%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7-2017-04-09-%E4%B8%8B%E5%8D%883.06.01-300x64.png" alt=""></p> <p>通常開發跟最終的輸出會有一定差距</p> <p>像是在開發時需要自動compile</p> <p>或是autoreload</p> <p>而最終的輸出會需要minify</p> <p>所以這時候的webpack指令就會不同</p> <p>一般不使用config的使用方法是</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">webpack entry.js output.js </span></span></code></pre></div>https://blog.iphpo.com/blog/2017/04/webpack-%E7%AD%86%E8%A8%98%E4%B8%80%E5%AE%89%E8%A3%9Dwebpack/Fri, 07 Apr 2017 00:00:00 +0800herb09638@gmail.com (Herb)https://blog.iphpo.com/blog/2017/04/webpack-%E7%AD%86%E8%A8%98%E4%B8%80%E5%AE%89%E8%A3%9Dwebpack/<p><img src="../%E8%9E%A2%E5%B9%95%E5%BF%AB%E7%85%A7-2017-04-07-%E4%B8%8B%E5%8D%883.38.34-300x159.png" alt=""></p> <p>最近在看<a href="https://laracasts.com/series/webpack-for-everyone">Laracasts上的Webpack課程</a></p> <p>做點筆記加強記憶</p> <p>對我來說gulp比較清晰明瞭</p> <p>一個一個task各自獨立之後再以先後順序串起來</p> <p>但是Webpack就不是了</p>