webpack3.x的entry,output,module解析

來源：懂視網責編：小采時間：2020-11-27 20:01:28

webpack3.x的entry,output,module解析

webpack3.x的entry,output,module解析:這次給大家帶來webpack3.x的entry,output,module解析，使用webpack3.x的entry,output,module的注意事項有哪些，下面就是實戰案例，一起來看一下。 webpack作為如今的熱門工具跟前端三大框架密不可分,是有學一下的必要的; 先決條件: 有node環境,有n

推薦度：

點擊下載本文 文檔為doc格式

導讀webpack3.x的entry,output,module解析:這次給大家帶來webpack3.x的entry,output,module解析，使用webpack3.x的entry,output,module的注意事項有哪些，下面就是實戰案例，一起來看一下。 webpack作為如今的熱門工具跟前端三大框架密不可分,是有學一下的必要的; 先決條件: 有node環境,有n

這次給大家帶來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;

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

　　webpack.config.js配置(暫時這么多);

首先說一下這個配置用來干嘛的,其實就是告訴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 'lodash'; 
import '../css/style1.css';
import icon1 from '../img/aa00.jpg';
import printMe from './print.js';
function component() {
 var div = document.createElement('div');
 var btn = document.createElement('button');
 // Lodash（目前通過一個 script 腳本引入）對于執行這一行是必需的
 div.innerHTML = _.join(['Hello', 'webpack'], ' ');
 var img = new Image();
 img.src = icon1;
 div.appendChild(img);
 btn.innerHTML = 'Click me and check the console!';
 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('print.js...');}
 完成之后,直接

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

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

webpack3.x的entry,output,module解析

推薦度：

點擊下載本文 文檔為doc格式

標簽：解析 module entry

熱門焦點

webpack3.x的entry,output,module解析

webpack3.x的entry,output,module解析

webpack3.x的entry,output,module解析

最新推薦

猜你喜歡

熱門推薦