项目中webpack处理require()引入echarts的问题

我们按照echarts的官网用npm安装echarts并用require(“echarts”)引入echarts对象，但是如果直接运行js脚本会报“Uncaught ReferenceError: require is not defined”的错误，因为require()是nodejs的语法，应用于服务端，所以浏览器不能识别require()方法。
所以我们就需要借助webpack、glup、grunt等打包工具把require()转化为浏览器能识别的语法。这里我使用简单的webpack对项目中的echarts进行打包

1. 新建一个目录，在目录中新建两文件夹dist、src和一个webpack.config.js的js文件，再在根目录npm init新建一个项目(前提是你的电脑安装了nodejs和npm),如图示：
   
   == 注：webpack.config.js不能随便命名，因为它是webpack打包时的默认入口==

2.在src->js目录下新建一个main.js的js文件，引入官方demo：

var echarts = require('echarts');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
console.log(myChart);
myChart.setOption({
   
   title: {
   
       text: 'ECharts 入门示例'
   },
   tooltip