溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
webpack在目前來說應該是前端用的比較多的打包工具了，那么對于之前沒有接觸過這塊的該怎么辦呢？答案很明顯嘛，看資料，查文檔，自己去琢磨，自己去敲一敲，跑一跑；
Webpack是當下最熱門的前端資源模塊化管理和打包工具，它可以將很多松散的模塊按照依賴和規則打包成符合生產環境部署的前端資源，還可以將按需加載的模塊進行代碼分割，等到實際需要的時候再異步加載。
webpack和Grunt以及Gulp相比有什么特性
Gulp/Grunt是一種能夠優化前端的開發流程的工具，而WebPack是一種模塊化的解決方案，不過Webpack的優點使得Webpack可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是：在一個配置文件中，指明對某些文件進行類似編譯、組合、壓縮等任務的具體步驟。
webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個瀏覽器可識別的JavaScript文件。
那么，這邊我將以一個最基礎的例子來將這個流程跑一邊，包括過程中會遇到哪些問題，怎么解決的，也會一一奉上；
第一步：
我們需要安裝npm，這個只要你有NodeJS運行環境的肯定會有的；這邊這個塊也就不作敘述
第二步：
我們接下來會選擇在項目目錄中進行所有的安裝和操作，不去選擇全局安裝；
在電腦任意盤中新建一個項目文件夾，如：webpackdemo
接下來我們通過cmd進入到這個項目文件夾下，并輸入執行npm init，回車，進行初始化：
接下來，對于package name之類的配置項，我們完全選擇直接回車，到底！
到這一步，就OK了！
此時我們的項目文件夾里就多了一個文件：package.json
第三步：
既然要使用webpack進行打包，那么我們就要來安裝webpack了，起初我們就說過都在項目文件夾里完成，不做全局安裝；那么接下來輸入npm install --save-dev webpack，回車進行安裝：
此時我們的項目文件夾，已經又多了一個文件夾和一個json文件：
第四步：
我們現在可以開始寫自己的項目了，那么我這邊也就按通常各位大牛分享的例子來寫，首先，在項目文件夾下，新建兩個文件加app和public；
app文件夾中寫入test.js和main.js；public文件夾中寫入index.html；
借鑒一下別人的例子：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack demo</title> </head> <body> <div id='root'></div><br><br> <!--引入打包之后的文件--> <script src="bundle.js"></script> </body> </html>
test.js
<!--寫入js,創建div元素，寫入一句話，并且導出test.js這個模塊--><br>module.exports = function() {
var test= document.createElement('div');
test.textContent = "Hi there and testing!";
return test;
};
main.js
<!--導入test模塊，將內容添加到#root這個div中--><br>var test= require('./test.js');
document.getElementById('root').appendChild(test());
第五步：
按道理，現在已經可以進行打包處理了，最后的結果就是將main.js作為主入口進行操作，最后在public文件夾中生成一個打包OK之后的文件：bundle.js；然后我們打開index.html文件就會在頁面顯示我們剛才的那句話了；
但是，忽略了一個問題，那就是我們的配置文件怎么辦呢？都在命令行去操作嗎？這肯定是很麻煩且不贊成的，那么我們就在項目目錄下再建一個文件：webpack.congfig.js，在里面寫入配置文件：
module.exports = {
entry: __dirname + "/app/main.js",//入口文件
output: {
path: __dirname + "/public",//打包后的文件存放目錄
filename: "bundle.js"http://打包后輸出文件的文件名
}
}
這樣我們就可以通過node_modules/.bin/webpack開始運行了；
問題來了：
1、報錯！
解決方式：node_modules\.bin\webpack "/"改成"\"
2、還是不行！
還好不是原來的錯誤，那么這個是什么意思呢？
回看前面的截圖
倒數第二行，我們會發現我們安裝的webpack的版本是 4 的，那么在4中，默認不需要配置文件（它吸收了Parcel的思想，零配置）；既然思想都不一樣了，是不是我們前面這么做就要去掉，重來，換成4的做法呢？很顯然不愿意了，畢竟做到現在了，那么我就根據步驟一步一步的改吧；
再看這一步：
我們順著來，輸入yes,回車，進行安裝webpack-cli
安裝完，已經自動運行了node_modules\.bin\webpack；
3、新的警告和報錯！
心態爆炸了？不要緊，很快就要OK了！
看前幾行，是正確的運行結果，但是，查看項目文件夾時，并不是這樣，原因就在后面那幾行黃色，紅色的警告和報錯！
首先看警告，簡單點，意思就是需要設置模式：4 無需配置文件，但是沒說不要設置模式，模式分為兩個：生產模式和開發模式；只需要--mode標記一下就OK了！
再看報錯，什么意思呢，其實就是他需要一個src 文件夾，其實這個src文件夾就是我們之前的app文件夾，那么我們改下名字，app改成src;
ok，再來接受一次打擊吧！
4、運行node_modules\.bin\webpack --mode development之后，還有一行錯誤！
很熟悉的報錯，剛才給我們報過，剛才那么改貌似沒用，這下問題在哪里呢？我們打開package.json看下；
第5行，"main":"index.js"，是不是已經知道了？那我們把src里的入口文件main.js改成index.js，再運行！
成功！！！
最后我們打包之后生成了一個新的文件main.js，并且是在一個新的文件夾dist里；
對于我們之前的webpack.congfig.js文件，完全不用去在意，因為webpack 4 默認不需要配置文件呀！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
