原諒轉行小白比較笨，看了那麼多的文檔API仍是沒學好webpack，這陣子公司閑決定把webpack學完，現在開始表演，希望獲得老師轉身！ 1、開門見山首先就是安裝，先安裝node.js，然後打開命令行（cmd）安裝webpack，執行命令：npm install webpack -g ok，檢查你 ...
原諒轉行小白比較笨，看了那麼多的文檔API仍是沒學好webpack，這陣子公司閑決定把webpack學完，現在開始表演，希望獲得老師轉身！
1、開門見山首先就是安裝，先安裝node.js，然後打開命令行（cmd）安裝webpack，執行命令：npm install webpack -g
ok，檢查你是否安裝好了 輸入 webpack -v 出現版本號就是可以咯。接下來我們開始打包文件吧
2、首先讓我們在本地創建一個文件 輸入命令 mkdir wpk-test（wpk-test是文件名，愛叫啥叫啥），然後進入這個文件夾
3、然後我們打開編輯器，創建幾個文件咯，首先建立一個src文件夾，裡面有index,js、str.js。
我們在str.js寫下我們要的代碼，來個簡單的吧，比如
function init(s){
return s;
}
module.exports=init;
你是否會問module.exports=init;這句代碼是什麼？那麼我悄悄告訴你
module.exports 對象是由模塊系統創建的。在我們自己寫模塊的時候，需要在模塊最後寫好模塊介面，聲明這個模塊對外暴露什麼內容，module.exports 提供了暴露介面的方法。
懂了麽，不懂我也沒辦法了，我只知道這麼多，哈哈。
ok，現在在str.js寫下了這個代碼，那麼現在我們去index.js文件里寫下另外一段代碼
var fn = (require('./str.js'));
document.write(fn('你好世界，biubiubibiu'));
首先我們先看第一段代碼，只是一個簡單的函數，就是你穿個參數進去，傳什麼我就返回什麼。然後在index.js里 我們定義一個變數 fn，括弧里的require又要一些時間來解釋了，這裡先不解釋，文末在解釋。
別發呆了，快上車。代碼接下來就是輸出函數，傳個參數進去。ok，這個時候你會問了，那現在html文件那些在哪？網頁怎麼顯示？別急，馬上來
我們建個html文件，然後引入js，引入哪個？str.js還是index.js？都不是，我們引入main.js，main.js從何而來？從來處來，我們重新回來cmd，執行命令
webpack --mode development 或者 webpack --mode production
就已經打包好了，這個時候回到編輯器，是不是多了一個文件夾dist，裡面有個js文件叫做main？那麼你引入他們就好了
這個時候你打開頁面，就可以看到效果了，這就是最簡單的單文件打包了。
再來說一下require是什麼東西：不想打字，想知道直接去看阮雪峰老師的博文吧http://www.ruanyifeng.com/blog/2015/05/require.html
整理一下剛學踩了幾個坑；
剛開始是將文件統一放在一個層級下，那麼打包時就出現了下麵的情況：
1、當一切準備好了，興高采烈的輸入了 webpack str.js bundle.js，然後收穫一串錯誤
The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D
為啥？因為是要我們安裝webpack-cli，簡單啊，那我就在項目本地裝一個不就ok了
然後你又興高采烈的輸入了 npm install webpack-cli -D，然後再次執行打包命令，又收穫了一串錯誤，
The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D
哦豁？原來是要在全局安裝，那也還是很簡單的嘛，卸載了重裝不就好了，然後你又興高采烈的輸入了
npm uninstall webpack-cli
npm install -g webpack-cli
裝好以後迫不及待的打包，結果又收穫一串錯，哈哈哈哈，懷疑人生？頭皮發冷嗎？
WARNING in configuration The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this enviroment. ERROR in multi ./hello.js bundle.js Module not found:ERROR:Can't resolve 'bundle.js' in 'C:/Users/你的用戶名/Desktop/webpack-test' @ multi ./hello.js bundle.js
是因為沒有配置mode選項，然後我們輸入上面所說的兩種命令
webpack --mode development
或者
webpack --mode production
結果又報錯，對不起，我可能要去世了，不學了，先走一步。
少年，快完了，一步步來嘛，這個時候報錯是
ERROR in Entry module not found:ERROR:Can't resolve './src' in 'C:/Admin/pc/Desktop/webpack-test'
就是說沒有入口文件，那麼我們繼續創建就好了，將index.js或str.js一起丟進sec文件夾里，再來打包。其實這裡還是有一個問題的。
webpack4.x的打包已經不能用webpack 文件a 文件b的方式，而是直接運行webpack --mode development或者webpack --mode production，這樣便會預設進行打包，入口文件是'./src/index.js'，輸出路徑是'./dist/main.js'，
其中src目錄即index.js文件需要手動創建，而dist目錄及main.js會自動生成。 因此我們不再按webpack 文件a 文件b的方式運行webpack指令，而是直接運行，所以打包命令直接輸入webpack --mode development或者webpack --mode production就好了
好了，今天先到這，快去寫bug吧!
