前言：webpack打包工具讓整個專案的不同資料夾相互關聯，遵循我們想要的規則。想 .vue檔案， .scss檔案瀏覽器並不認識，因此webpage暗中做了很多轉譯，編譯等工作。
事實上，如果我們在沒有加配置檔案之前 webpack是有預設配置的，比如在專案最開始的時候我們沒有加上webpack.config.js,但是我們依然可以終端執行 npx webpack index.js
來進行打包。但是這並不能滿足乙個專案中繁雜的各種檔案的配置，因此我們可以自己配置符合當前專案的 配置檔案-->webpack.config.js。
第一步：在專案中第一級目錄新增webpack.config.js檔案。
第二部：編寫打包的入口，各種配置項和打包出口
第三部：匯出配置
如下圖：
上圖是最基礎的打包配置：
1，打包的入口檔案是index.js,它的路徑是 "./src/index.js"。main的意思是預設打包成main.js。
2， 打包的出口檔案可以隨意設定，比如：bundle.js。引入path模組並使用 path.resolve()方法，
使得在src平級目錄下建立dist（隨意起名都可以）資料夾來存放bundle.js等檔案。
3，在入口，出口配置之間應該有很多按照我們需求的很多配置，本篇只是初識基本配置，後面繼續記錄。
另外，如果習慣了用 npm，可以在package.json檔案中的指令碼配置中這樣寫：
這樣打包的時候 執行 npm run bundle就可以了。
最後：來看看如果專案打包命令列裡都是一些什麼
上圖是一次打包：
1：本次打包對應的唯一乙個雜湊值。
2：本次打包所使用的webpack版本。
3：本次打包耗時。
4：本次打包的日期。
5：本次打包出的檔案，檔案的大小，chunks相當於檔案的身份id。
6：打包的入口檔案，預設名 main
7：打包所涉及到的檔案，一些模組檔案和各種業務檔案等。
webpack學習之webpack基本配置
壓縮檔案 分割 提取公用 模組合併 把多個模組合併 自動重新整理 熱更新 改變，自動重新整理頁面 由於外掛程式可以攜帶引數 選項，必須在 webpack 配置中，向 plugins 屬性傳入的是外掛程式的例項。let require clean webpack plguin new cleanweb...
webpack系列二 webpack打包優化探索
雖然webpack的已經公升級到了webpack4，而我們目前還在使用webpack3，但其中的優化點都大同小異，公升級後同樣適用。這三條原則永遠是一切優化的前提 1 主要配置 2plugins 3 new webpack.optimize.moduleconcatenationplugin 4 1...
webpack學習1 webpack打包報錯
在打包時，出現了報錯 檢查自己的webpack版本是 4.22.0，發現是自己的webpack版本太高，之前的命令已經不適用了，後來改用命令 webpack src entry.js o dist bundle.js 可以看到entry.js已經被打包為了bundle.js檔案,但是,這個並沒有打包...