首頁 > 文章 > web前端 > webpack3.x的entry,output,module解析

webpack3.x的entry,output,module解析

php中世界最好的语言原創: 2018-03-10 13:56:071971瀏覽

這次帶給大家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中文網其它相關文章！