這次帶給大家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,圖片等一些簡單操作;
以上是webpack3.x的entry,output,module解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
