webpack的兩個難點

webpack4目前已經開箱即用，常規用法可以讀部落格：根據部落格一步一步測試，收穫會不少，我花了3天測試完。

難點有兩個:

1.1：庫檔案（js、css）引用放入模板中。不需要webpack構建。（用copy-webpack-plugin）直接把靜態庫檔案copy到path目錄中對應的檔案。

1.2: 入口js檔案中的引用資源需要打包到指定的目錄下：使用(extract-text-webpack-plugin)，該外掛程式的主要是為了抽離css樣式，如果框架是vue,需要在rules中處理vue檔案的options

配置解析css檔案的modules中用extract-text-webpack-plugin.extract來處理：

options: )
}}

接著在外掛程式中設定抽離出來的css名字，

new
extracttextplugin()

打包可能發現css中的資源獲取不到（目錄資源為根路徑），需要在output中配置publicpath即可。

第2個難點是抽離公用模組，參考：理解 webpack抽離的原理。基本上webpack的常規用法可以在專案中實戰了，難點在於理解初始模組和非同步模組；非同步模組是包括在初始模組中的，非同步模組也需要打成乙個chunk包，在頁面互動中載入非同步模組chunk包，這在單頁面應用很有用。