首頁 > web前端 > js教程 > 主體

webpack3.x的entry,output,module解析

php中世界最好的语言
發布: 2018-03-10 13:56:07
原創
1970 人瀏覽過

這次帶給大家webpack3.x的entry,output,module解析,使用webpack3.x的entry,output,module的注意事項有哪些,下面就是實戰案例,一起來看一下。

 webpack作為如今的熱門工具跟前端三大框架密不可分,是有學一下的必要的;

  先決條件: 有node環境,有npm工具;(新版的node自帶了npm工具);

  下面開始一步一步的做吧:

  1.先選擇一個目錄作為你的項目存放的位置;

  cmd工具進入專案目錄(假設我的是D:\webpack-demo4); 然後使用nmp安裝webpack: npm install webpack --save-dev("不推薦全域安裝"); 

       完了之後使用npm init 你的專案目錄,後面都是一些描述性的內容,如何想省略直接npm init -y;

webpack3.x的entry,output,module解析

 dist和src目錄是自己創建的,dist用於存放編譯後的文件,src用於存放源文件; node_modules是剛初始化生成的文件夾,裡面各種模組,以後關於與項目構建有關的模組全部都是(也應該是)放在此目錄下的;webpack.config.js是webpack設定檔;package.json是node操作一些設定(其實也就是針對webpack);

  webpack.config.js設定(暫時這麼多);

webpack3.x的entry,output,module解析

先說這個設定用來幹嘛的,其實就是告訴webpack怎麼打包;一一說明;

  entry:是入口檔案;意思是從哪個js檔案開始的;說一下這個相對路徑,這個是你cmd命令列進入那個目錄開始計算的;比如我的是: 

      [ webpack- demo4] -->下面有dist目錄,有src目錄; 那我運行配置的時候應該到webpack-demo4下面然後webpack --config webpack-config.js(或直接webpack);

      output設定的輸出:以上的設定結果是,webpack打包後會在dist目錄下的js資料夾產生app.bundle.js和print.bundle.js   name其實就是entry中的鍵;

      module中存放了兩個載入檔案和css的載入器;

      當然在執行webpack之前要 npm install style-loader css loader --save -dev 和npm install file-loader --save -dev;安裝的時候要cd到webpak-demo4目錄;

  現在我在dist目錄下有一個自己寫的index002.html:如下;

<html>
  <head>
   <title>Output Management(输出)</title>
    <meta charset=utf-8>
  </head>
  <body> 
  </body>
</html>
<script src="./js/app.bundle.js"></script>
登入後複製

# 在src目錄有兩個js檔;

 index.js
import _ from &#39;lodash&#39;;     
import &#39;../css/style1.css&#39;;
import icon1 from &#39;../img/aa00.jpg&#39;;
import printMe from &#39;./print.js&#39;;
function component() {
    var div = document.createElement(&#39;div&#39;);
    var btn = document.createElement(&#39;button&#39;);
    // Lodash(目前通过一个 script 脚本引入)对于执行这一行是必需的
    div.innerHTML = _.join([&#39;Hello&#39;, &#39;webpack&#39;], &#39; &#39;);
    var img = new Image();
    img.src = icon1;
    div.appendChild(img);
    btn.innerHTML = &#39;Click me and check the console!&#39;;
    btn.onclick = printMe;
    div.appendChild(btn);
    return div;
}
document.body.appendChild(component()); //放回元素给到页面;
登入後複製

說些重要的;  import '../css/style1.css'; 是在相對於index.js的上級目錄(src)下的css下有個style1.css;比如我寫了body的背景時藍色;同樣在img下存放了一張圖片;

 再分別引入了圖片和print.js;

 print.js:

export default function printMe() {    console.log(&#39;print.js...&#39;);}
    完成之后,直接
登入後複製

在cmd 指令webpack一下;出現了圖片和樣式; 檢查一下dist目錄下會出現打包後的js以及圖片;上面示例了webpack如何打包css,圖片等一些簡單操作;

##相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

VUE如何使用anmate.css

#如何解決IE11的css Hack

以上是webpack3.x的entry,output,module解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!