参考
技术胖webpack教程
webpack中使用echarts
实现方法
方式1
在webpack的入口文件中直接引入第三方类库,向外全局暴露，以jquery插件使用为例
配置
1.创建本地项目webpack-demo
mkdir webpack-demo
cd webpack-demo
2.在webpack-demo的根目录下创建package.json文件
npm init -y
- 安装
webpack依赖包
npm i webpack webpack-cli webpack-dev-server --save-dev
模块说明：
-
webpack
webpack核心 -
webpack-cli
webpack的脚手架（启动器） -
webpack-dev-server
开发环境下用于实时加载依赖
4.修改package.json文件的scripts属性值,进行打包资源的配置
"scripts": {
"dev": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
5.安装相关的loader
npm install url-loader --save-dev
6.安装jquery
npm install jquery -save
7.在入口文件app.js中引入jquery
import $ from 'jquery'
8.给按钮绑定事件
$('#btn1').on('click', () => {
alert('welcome!')
})
9.运行命令
npm run dev
10.结果展示
方式2
通过webpack的ProvidePlugin插件全局引入第三方类库,以echats使用为例
配置
1 ~ 5步同上
6.安装echarts
npm install echarts --save
7.在webpack.config.js中进行配置
const path = require('path');
// 显示进程的完成进度
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
// 设置进度字体颜色
const chalk = require('chalk');
// 输出html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 分离css代码
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 引入webpack
const webpack = require('webpack')
module.exports = {
mode: 'development',
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[hash].js'
},
devServer: {
baseContent: path.resolve(__dirname, '../dist'),// 静态资源根目录
host: 'localhost',//服务器IP地址，默认是localhsot
port: 5527,//服务监听的端口号
compress: true,// 是否开启服务端压缩（gzip）
},
module: {
rules: [
{
test: /\.jsx?$/,
use: [
{loader: 'babel-loader'}
]
},
{
test: /\.css$/,
use: [
// {
// loader: 'style-loader',
// options: {
// singleton: true,// 单独的style
// }
// },
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
}
]
},
{
test: /\.less$/,
use: [
// {
// loader: 'style-loader'
// },
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'less-loader'
}
]
},
{
test: /\.scss$/,
use: [
// {
// loader: 'style-loader'
// },
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(jpg|png|jpe?g|gif|svg)(\?.*)?$/i,
use: [
{
loader: 'url-loader',
options: {
outputPath: 'images/',// 输出目录
name(file) {// 输出名称
if(process.env.NODE_ENV === 'development') {
return '[path][name].[ext]'
}
return '[hansh].[ext]'
},
limit: 5*1024
}
}
]
},
{
test: /\.(htm?l)/i,
use: {loader: 'html-withimg-loader'}
},
{
test: /\.(eot|woff2?|ttf|svg)$/,
use: [{
loader: 'url-loader',
options: {
name: '[name]-[hash:5].min.[ext]',
limit: 5000,
publicPath: '../static/fonts/',
outputPath: 'fonts/'
}
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack Study Demo',
filename: 'index.html',//指定生成的HTML文件名
template: path.join(__dirname, '../public/index.html') // 指定模板路径
}),
new ProgressBarPlugin({
format: chalk.green('Progressing') + '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)',
clear: false
}),
new MiniCssExtractPlugin({
filename: '[name].css',// 分离后的文件名
chunkFilename: '[id].css',//
ignoreOrder: false
}),
new webpack.ProvidePlugin({
$: 'jquery',
echarts: 'echarts'
})
]
}
7.创建echart容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Webpack Demo</title>
</head>
<body>
<div id="app">
<div class="container">
<h1 class="web-font de-title">塑造自己的过程很疼，但最终能收获一个更好的自己</h1>
<!-- <button class="btn" id="btn1">按钮</button> -->
<div class="user-avatar">
<img src="../static/img/avatar.jpeg" alt="图片加载失败...">
</div>
<div class="echarts" id="mycharts">
</div>
</div>
</div>
</body>
</html>
8.初始化echarts
$(function () {
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('mycharts'));
let option = {
backgroundColor: '#2c343c',
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [{
value: 335,
name: '直接访问'
},
{
value: 310,
name: '邮件营销'
},
{
value: 274,
name: '联盟广告'
},
{
value: 235,
name: '视频广告'
},
{
value: 400,
name: '搜索引擎'
}
].sort(function (a, b) {
return a.value - b.value;
}),
roseType: 'radius',
label: {
normal: {
textStyle: {
color: 'rgba(255, 255, 255, 0.3)'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}]
};
myChart.setOption(option)
});
9.运行命令
npm run dev
10.结果展示
网友评论