webpack是乙個開源的j**ascript模組打包工具，其最核心的功能是解決模組之間的依賴，把各個模組按照特定的規則和順序組織在一起，最終合併為乙個js檔案（有時會有多個，這裡討論的只是最基本的情況）。這個過程就叫作模組打包。webpack是以commonjs來書寫指令碼的，但是對amd/cmd的支援也全面
目標：理解它的『一切皆模組』的思想，並基本了解其常用配置選項和 loader 的概念/使用方法即可，下面的內容是17年的內容 需要與時俱進
1.路徑中@的作用
import from '@main/screens/list';webpack中配置resolve 選項，其中的 alias 用來表示進行模組引入時的別名， 用於指定當打包時遇到引入某個模組時，引入檔案的實際路徑或檔名，可以簡化引入操作的引數。
resolve: ,這樣上面的引入路徑就是 下面完整路徑的縮寫了},
import from一些實際應用注意'';
在 vue 例項資料中僅僅使用路徑不會使得 webpack 進行檔案打包的操作，陣列中的也必須作為模組引入，在其一切皆模組的思想下才會進行打包處理，因此列表的陣列資料應該寫成這樣：
var products =[, , , ]webpack 打包時會自動按配置進行打包，給各個product 的 img 返回乙個 base64 dataurl，或者將檔案改名儲存，並給各 img 返回乙個字串表示改名後的檔案路徑。
我們知道在專案配置中設定檔案改名是為了消除瀏覽器快取對應用發布的負面影響，如果這些產品檔案「萬年不變」，專案模板中還提供了乙個 /static 目錄，可以將產品拷貝到 /static/img/products 目錄下，那麼，產品列表的陣列資料就不需要使用 require 將這些作為模組來引入了，但需要將路徑改寫為 /static/img/products，具體寫法如下：
var products =[, , , ]/src/assets 和 /static 目錄的區別詳見vue webpack 專案模板官方文件。
2.eslint 校驗 xx is defined but never used
package.json中 新增
"view coderules
":],
}
3.loader
loader能夠將所有檔案轉換為js語言的模組
例子：對***格式的檔案配置loader
}view code
配置將會對低於 10000 位元組的 *** 檔案使用 url-loader 載入器，而對等於或超過 10000 位元組的 *** 檔案使用 file-loader 載入器
相關鏈結
入門webpack 二）webpack概論
從官網 github 上的描述可以看到webpack可以將眾多模組打包成很少的的資源，將 分割成細小的部分這樣使應用程式按需要載入 塊。通過loader，webpack可以處理的模組有很多，amd定義的模組，commonjs，css，images，scss等以及自定義模組。webpack自身只能處理...
webpack入門記錄
webpack介紹 1.四大核心概念，入口 出口 外掛程式 loaders 載入器 2.webpack模組化原理 3.分割配置檔案 4.優化打包 3.在當前目錄下面建立src的資源目錄 4.在src下面建立index.js 作為需要打包的檔案 5.建立webpack的配置檔案 有兩種方式 a 直接在...
webpack入門秘籍
前面的modules 代表自定義接收 moudules 裡面default的函式 modules 執行方法 index.html 引用生成好的檔案modules.js 匯出預設的方法，使用default系統自動生成預設方法 export default function 在專案的根目錄開啟git n...