webpack第二節

標籤：java   amp   mod      work   紅色   模組   上傳   es6   

安裝webpack在檔案夾中

安裝完成

牛刀小試

在webpack-test根目錄下建立一個hello.js （不建立在node-modules檔案夾下面的目的是，該檔案夾是webpack的依賴，我們自定的檔案不去破壞它，並且我們以後上傳代碼的時候不會上傳該檔案夾，只需在上一節的package.json中配置該檔案的版本，用到的時候只需npm下載）

 

這裡我用的是es6的寫法，編輯器報錯，必須的設定一下IDEA(右上方File -> Settings -> Languages & Frameworks -> JavaScripts) 選擇ECMAscript 6 -> OK 設定完成會發現沒有紅色警告了

  

 

 打包第一個webpack檔案 輸入命令webpack hello.js hello.bundle.js  按斷行符號打包  文法是webpack 打包的檔案名稱 打包完成後的檔案名稱 hello.js是要被打包的檔案名稱 hello.bundle.js是打包完成後的檔案名稱

 

 打包完成後 會出現一些選項 例如 Hash Version Time 這些可供你參考

開啟我們打包完成後的 hello.bundle.js 上面webpack自動產生的程式碼 你可以忽視它 拉倒最下面 這是第0個模組 在裡面就是我們的代碼。第一個webpack打包完成。

 

webpack第二節