webpack echarts配置執行個體

簡單介紹

本例介紹怎樣在webpack中建構依賴echats的項目，echarts有好幾種方式引入項目：

标簽單檔案引入：自1.3.5開始，ECharts提供标簽式引入。假設項目本身并非基于子產品化開發，建議採用srcipt标簽式引入，Srcipt标簽引入echarts後将能夠直接使用兩個全局的命名空間：echarts。zrender。

子產品化單檔案引入：ECharts開發了專門的壓縮合并工具echarts-optimizer。通過依賴關系分析同一時候去除與echarts.js的反複子產品後為echarts的每個圖表類型單獨打包生成一個獨立檔案，依據應用需求可實作圖表類型按需載入。在build路徑下包括了由echarts-optimizer生成的單檔案：

build/dist/：經過合并、壓縮的單檔案

echarts.js : 這是包括AMD載入器的echarts主檔案。須要通過script最先引入

chart/: echarts-optimizer通過依賴關系分析同一時候去除與echarts.js的反複子產品後為echarts的每個圖表類型單獨打包生成一個獨立檔案。依據應用需求可實作圖表類型按需載入

echarts-line.js : 折線圖（如需折柱動态類型切換，require時還須要echarts/chart/bar）

echarts-bar.js : 柱形圖（如需折柱動态類型切換，require時還須要echarts/chart/line）

echarts-scatter.js : 散點圖

echarts-k.js : K線圖

echarts-pie.js : 餅圖（如需餅漏鬥圖動态類型切換，require時還須要echarts/chart/funnel）

echarts-radar.js : 雷達圖

echarts-map.js : 地圖

echarts-force.js : 力導向布局圖（如需力導和弦動态類型切換。require時還須要echarts/chart/chord）

echarts-chord.js : 和弦圖（如需力導和弦動态類型切換，require時還須要echarts/chart/force）

echarts-funnel.js : 漏鬥圖（如需餅漏鬥圖動态類型切換，require時還須要echarts/chart/pie）

echarts-gauge.js : 儀表盤

echarts-eventRiver.js : 事件河流圖

source/ : 經過合并，但并沒有壓縮的單檔案，内容同dist，可用于調試

子產品化包引入：假設項目本身是子產品話的且遵循AMD規範，則僅僅須要使用一個符合AMD規範的子產品載入器。如RequireJS，配置好package路徑指向src就可以。

因為echarts依賴底層zrendar，也須要配置好對應的package。

配置

echarts既然支援子產品化包引入，符合AMD規範，那麼我們稍加配置下webpack。便能夠引入到webpack建構的項目中了

webpack.config.js

entry.js