参考

1、 webpack的很详细的教程 阮一峰大神写的 https://github.com/ruanyf/webpack-demos#demo01-entry-file-source

2、 官方的文档,我看了一点太多了没有仔细的看完 http://webpack.github.io/docs/usage.html

3、 Echarts教程,使用模块化规范
http://echarts.baidu.com/tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts

使用

1、安装Node

2、初始化项目结构

npm init

3、安装需要的webpack,ECharts,可以使用全局安装,-g或者安装到项目中,安装自己需要的全部的模块。

npm install --save-dev webpack  
npm install --save jquery
npm install --save echarts

4、创建webpack.config.js 文件,这里就是进行webpack配置的文件,比如你要使用react或者ES6的语法就需要配置转换成浏览器可以认识的,还有就是将模块化的文件就行打包成浏览器可以识别的。
这里就配置一个简单的,不需要特别的复杂,我们仅仅是使用一下,看看模块化的特性!

module.exports = {
    entry: {
        bundle1: './main.js',
    },
    output: {
        filename: 'bundle2.js'
    }
};

5、通过 npm 上安装的 ECharts 和 zrender 会放在node_modules目录下。可以直接在项目代码中 require(‘echarts’) 得到 ECharts。
ECharts:使用的主要的关键点在于,或者ehcarts对象,将一个结点绑定到一个新的图表上,然后在进行设置其属性,setOption();这里的属性配置文件,你可以从各种的地方去获取,通过ajax,或者其他的路径
这里是通过jquery获取Json文件,在进行绑定,刷新图表。
main.js

var echars = require("echarts");
var $ =require("jquery");
var mychars = echars.init(document.getElementById("test"));
var options ={
    title: { text: 'ECharts 入门示例' },
    tooltip: {},
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
};
mychars.setOption(options);
$.get("data.json").done(function (data) {
    mychars.setOption({
        xAxis: {
            data: data.data
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.cat
        }]
    })
});

data.json

{
 "cat":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
  "data":[5, 20, 36, 10, 10, 20]
}

index.html 非常的简单

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="test" style="width: 500px;height: 500px;position: fixed;left: 50px;top:50px"></div>
<script src="./bundle2.js" type="text/javascript"></script>
</body>
</html>

6、 此时,我们只需要将main.js这个模块化的文件进行打包处理,转换到bundle2,这样我们才可以看到数据显示

#在控制台中输入 webpack 即可处理

然后进行访问浏览器即可看到图片
Webpack打包简单的使用ECharts,模块化处理的简单演示_json

7、 到现在为止,我们可以简单的体验一下子模块化打包工具的使用。

8、我是弄后台的,可能或喜欢上前端啊!恐怖!