那麼，這邊我將以一個最基礎的例子來將這個流程跑一邊，包括過程當中會遇到哪些問題，怎麼解決的，也會一一奉上；javascript
第一步：html
咱們須要安裝npm，這個只要你有NodeJS運行環境的確定會有的；這邊這個塊也就不做敘述前端
第二步：java
咱們接下來會選擇在項目目錄中進行全部的安裝和操做，不去選擇全局安裝；node
在電腦任意盤中新建一個項目文件夾，如：webpackdemo （這裏千萬不要起"webpack"這個名字，不然報錯）webpack
接下來咱們經過cmd進入到這個項目文件夾下，並輸入執行npm init，回車，進行初始化：web
接下來，對於package name之類的配置項，咱們徹底選擇直接回車，到底！npm
到這一步，就OK了！json
此時咱們的項目文件夾裏就多了一個文件：package.jsonapp
第三步：
既然要使用webpack進行打包，那麼咱們就要來安裝webpack了，起初咱們就說過都在項目文件夾裏完成，不作全局安裝；那麼接下來輸入npm install --save-dev webpack，回車進行安裝：
此時咱們的項目文件夾，已經又多了一個文件夾和一個json文件：
第四步：
咱們如今能夠開始寫本身的項目了，那麼我這邊也就按一般各位大牛分享的例子來寫，首先，在項目文件夾下，新建兩個文件加app和public；
app文件夾中寫入test.js和main.js；public文件夾中寫入index.html；
借鑑一下別人的例子：
index.html
|
1
2
3
4
5
6
7
8
|
<!
DOCTYPE
html>
<
html
lang="en">
<
head
>
<
meta
charset="utf-8">
<
title
>Webpack demo</
title
>
</
head
>
<
body
>
<
div
id='root'></
div
><
br
><
br
>
|
<!--引入打包以後的文件-->
|
1
|
<
script
src="bundle.js"></
script
>
|
</body>
</html>
test.js
|
1
2
3
4
5
|
<!--寫入js,建立div元素，寫入一句話，而且導出test.js這個模塊--><br>module.exports =
function
() {
var
test= document.createElement(
'div'
);
test.textContent =
"Hi there and testing!"
;
return
test;
};
|
main.js
|
1
2
|
<!--導入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，在裏面寫入配置文件：
|
1
2
3
4
5
6
7
|
module.exports = {
entry: __dirname +
"/app/main.js"
,
//入口文件
output: {
path: __dirname +
"/public"
,
//打包後的文件存放目錄
filename:
"bundle.js"
//打包後輸出文件的文件名
}
}
|
這樣咱們就能夠經過node_modules/.bin/webpack開始運行了；
問題來了：
一、報錯！
解決方式：node_modules\.bin\webpack "/"改爲"\"
二、仍是不行！
還好不是原來的錯誤，那麼這個是什麼意思呢？
回看前面的截圖
倒數第二行，咱們會發現咱們安裝的webpack的版本是 4 的，那麼在4中，默認不須要配置文件（它吸取了Parcel的思想，零配置）；既然思想都不同了，是否是咱們前面這麼作就要去掉，重來，換成4的作法呢？很顯然不肯意了，畢竟作到如今了，那麼我就根據步驟一步一步的改吧；
再看這一步：
咱們順着來，輸入yes,回車，進行安裝webpack-cli
安裝完，已經自動運行了node_modules\.bin\webpack；
三、新的警告和報錯！
心態爆炸了？沒關係，很快就要OK了！
看前幾行，是正確的運行結果，可是，查看項目文件夾時，並非這樣，緣由就在後面那幾行黃色，紅色的警告和報錯！
首先看警告，簡單點，意思就是須要設置模式：4 無需配置文件，可是沒說不要設置模式，模式分爲兩個：生產模式和開發模式；只須要--mode標記一下就OK了！
再看報錯，什麼意思呢，其實就是他須要一個src 文件夾，其實這個src文件夾就是咱們以前的app文件夾，那麼咱們改下名字，app改爲src;
ok，再來接受一次打擊吧！
四、運行node_modules\.bin\webpack --mode development以後，還有一行錯誤！
很熟悉的報錯，剛纔給咱們報過，剛纔那麼改貌似沒用，這下問題在哪裏呢？咱們打開package.json看下；
第5行，"main":"index.js"，是否是已經知道了？那咱們把src裏的入口文件main.js改爲index.js，再運行！
成功！！！
而後咱們打包以後生成了一個新的文件main.js，而且是在一個新的文件夾dist裏；
最後把index.html文件裏的js路徑改一下就OK了！
對於咱們以前的webpack.congfig.js文件，徹底不用去在乎，由於webpack 4 默認不須要配置文件呀！
感受本身每次學的新東西都要把別人踩過的坑踩一邊，而後本身再經過查閱大量的資料來一一填好，心累，不過總算功夫不負有心人！繼續踩坑去吧。