webpack3.x的entry,output,module解析-js教程-PHP中文網

首頁

web前端

js教程

webpack3.x的entry,output,module解析

php中世界最好的语言

Mar 10, 2018 pm 01:56 PM

module output

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

熱AI工具

熱工具

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1318

PHP教程

1268

C# 教程

1248

Related knowledge

ModuleNotFoundError：如何解決Python找不到模組錯誤？ Jun 25, 2023 pm 09:30 PM

在Python的開發過程中，常常會遇到找不到模組的錯誤。這個錯誤的具體表現就是Python在導入模組的時候報出ModuleNotFoundError或ImportError這兩個錯誤之一。這種錯誤很困擾，會導致程式無法正常運作，因此在這篇文章裡，我們將會探討這個錯誤的原因及其解決方法。 ModuleNotFoundError和ImportError在Pyth

Java9新特性Module模組化程式設計的方法 May 19, 2023 pm 01:51 PM

在Java9版本中Java語言引入了一個非常重要的概念：模組(module)。如果對javascript程式碼模組化管理比較熟悉的小夥伴，看到Java9的模組化管理，應該會有似曾相識的感覺。一、什麼是Javamodule？與Java中的package有些類似，module引入了Java程式碼分組的另一個層級。每個這樣的分組（module）都包含許多子package套件。透過在一個模組的原始碼檔案package的根部，加入檔案module-info.java來聲明該資料夾及其子資料夾為一個模組。該文件語法

前端輸出設定 Feb 19, 2024 am 09:30 AM

前端output配置，需要具體程式碼範例前端開發中，output配置是一項非常重要的配置。它用於定義專案打包後產生的檔案路徑、檔案名稱以及相關的資源路徑等。本文將介紹前端output配置的作用、常用設定選項，並給出具體的程式碼範例。 output配置的作用：output設定項用於指定專案打包後產生的檔案路徑和檔案名稱。它決定了專案的最終輸出結果。在webpack等打包

如何解決Linux系統下掛載ntfs磁碟時出現'module fuse not found'的問題？ Dec 31, 2023 pm 03:17 PM

1.先確認Linux系統核心[root@localhost~]#uname-r-p2.6.18-194.el5i6862.到http://sourceforge.net/projects/linux-ntfs/files/下載對應核心的rpm包如果找不到完全一致的，可以找最相近的。我的沒有找到完全一致的，我下載的是：kernel-module-ntfs-2.6.18-128.1.1.el5-2.1.27-0.rr.10.11.i686.rpm3.安裝rpm包rpm-ivhkernel -m

PHP將 GD 映像輸出到瀏覽器或文件 Mar 21, 2024 am 10:41 AM

這篇文章將為大家詳細講解有關PHP將GD圖像輸出到瀏覽器或文件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章後可以有所收穫。 PHP將GD影像輸出到瀏覽器或檔案引言phpGD函式庫為處理影像提供了強大的功能，可讓您建立、編輯和輸出映像。可以將影像輸出到瀏覽器或文件，以進行顯示或進一步處理。輸出到瀏覽器要將映像輸出到瀏覽器，請使用下列步驟：建立映像資源：使用imagecreate()函數建立映像資源。載入圖片資料：使用imagepng()、imagejpeg()或imagegif()

webpack核心概念之輸出（Output） Aug 09, 2022 pm 06:32 PM

將所有的資源(assets)歸攏在一起後，還需要告訴 webpack 在哪裡打包應用程式。 webpack 的 output 屬性描述如何處理歸攏在一起的程式碼(bundled code)。以下這篇文章就來帶大家深入了解一下webpack核心概念中的輸出（Output），希望對大家有幫助！

Vuex Module-狀態倉庫分割的使用介紹 Aug 10, 2022 pm 04:01 PM

vuex主要包含以下五個部分:State、Getter 、Mutation 、Action 、Module ，以下就跟大家介紹Vuex Module-狀態倉庫分割，希望對需要的朋友有幫助！

Python的OS模組的使用方法及範例 Apr 22, 2023 pm 10:19 PM

Python的os模組是用於與作業系統互動的標準函式庫之一，它提供了許多有用的函數和變量，以便處理檔案和目錄。以下是一些常見的os模組函數的用法：1.取得目前工作目錄：importoscwd=os.getcwd()print(cwd)2.切換目前工作目錄：importosos.chdir('/path/to/new/directory' )3.列出目錄中的所有檔案和子目錄：importosfiles=os.listdir('/path/to/dire

See all articles

webpack3.x的entry,output,module解析

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題