webpack打包jquery and echarts

目录结构

初始化开发环境

① npm init -y生成package
② npm install [email protected] -D   npm install echarts --save  npm install jquery -D安装webpack、echarts、jquery
③ main.js引入echarts和jquery

const $ = require("jquery");
var echarts = require('echarts');

④ 配置webpack.config.js

module.exports = {
    entry:{
        main:'./js/main.js'//要打包的位置
    },
    output:{//输出的位置
        filename:'[name].bundle.js',
        path:__dirname+'/dist'
    }
}

⑤ 配置package.json

echarts样式编辑

http://echarts.baidu.com/theme-builder/ ←
下载json引入

$.getJSON('./data/walden.json', function (d) {
    console.log(d)
    echarts.registerTheme('walden', d)//不需要转换json，echarts文档写错了，本身就是json对象
    var myChart = echarts.init(document.getElementById('main'), 'walden');
// 绘制图表
    myChart.setOption({
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                roseType: 'angle',
                data:[
                    {value:235, name:'视频广告'},
                    {value:274, name:'联盟广告'},
                    {value:310, name:'邮件营销'},
                    {value:335, name:'直接访问'},
                    {value:400, name:'搜索引擎'}
                ]
            }
        ]
    })
});

完整的main.js代码

打包输出

会生成dist文件夹并在里边生成js包 main.bundle.js是一个111561行的js大包。

在html里只需要调用这个main.bundle.js不需要再引入jquery和echarts。