webpack的一些使用方法
阿新 • • 發佈：2018-08-10
entry 1025. sch ade undle fault config 而是 導致
1. externals的使用（深入淺出webpack之externals的使用）
externals: 防止將某些 import 的包(package)打包到 bundle 中，而是在運行時(runtime)再去從外部獲取這些擴展依賴(external dependencies)。使用externals配置後，依舊可以在代碼中通過CMD、AMD或者window/global全局的方式訪問。
例如，從 CDN 引入 jQuery
（1）在HTML中引入第三方庫的cdn
（2）在webpack.config.js中配置externals
這樣就剝離了那些不需要改動的依賴模塊，下面展示的代碼還可以正常運行：
2. CommonsChunkPlugin 提取公共代碼（詳見詳解CommonsChunkPlugin的配置和用法）
CommonsChunkPlugin主要是用來提取第三方庫和公共模塊，避免首屏加載的bundle文件或者按需加載的bundle文件體積過大，從而導致加載時間過長
可配置的屬性：
- name：可以是已經存在的chunk（一般指入口文件）對應的name，那麽就會把公共模塊代碼合並到這個chunk上；否則，會創建名字為name的commons chunk進行合並
- filename：指定commons chunk的文件名
- chunks：指定source chunk，即指定從哪些chunk當中去找公共模塊，省略該選項的時候，默認就是entry chunks
- minChunks：既可以是數字，也可以是函數，還可以是Infinity
可以像這樣設置webpack.config.js：
這樣就會把公共模塊代碼合並到base.js文件中
（註意：如果在plugins配置了new webpack.optimize.CommonsChunkPlugin，生成了一個公共文件，頁面必須先引用這個公共文件，再引用其他的js文件）
3.webpack分離單獨打包css文件
（1）安裝插件
（2）配置webpack.config.js：
（3）在編譯之前安裝需要用到的style-loader和css-loader
（4）在終端進行webpack
webpack的一些使用方法