參考
技術(shù)胖webpack教程
webpack中使用echarts
實(shí)現(xiàn)方法
方式1
在webpack的入口文件中直接引入第三方類庫,向外全局暴露，以jquery插件使用為例
配置
1.創(chuàng)建本地項(xiàng)目webpack-demo
mkdir webpack-demo
cd webpack-demo
2.在webpack-demo的根目錄下創(chuàng)建package.json文件
npm init -y
- 安裝
webpack依賴包
npm i webpack webpack-cli webpack-dev-server --save-dev
模塊說明：
webpack
webpack核心webpack-cli
webpack的腳手架（啟動器）webpack-dev-server
開發(fā)環(huán)境下用于實(shí)時加載依賴
4.修改package.json文件的scripts屬性值,進(jìn)行打包資源的配置
"scripts": {
"dev": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
5.安裝相關(guān)的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.運(yùn)行命令
npm run dev
10.結(jié)果展示
方式2
通過webpack的ProvidePlugin插件全局引入第三方類庫,以echats使用為例
配置
1 ~ 5步同上
6.安裝echarts
npm install echarts --save
7.在webpack.config.js中進(jìn)行配置
const path = require('path');
// 顯示進(jìn)程的完成進(jìn)度
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
// 設(shè)置進(jìn)度字體顏色
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'),// 靜態(tài)資源根目錄
host: 'localhost',//服務(wù)器IP地址，默認(rèn)是localhsot
port: 5527,//服務(wù)監(jiān)聽的端口號
compress: true,// 是否開啟服務(wù)端壓縮（gzip）
},
module: {
rules: [
{
test: /\.jsx?$/,
use: [
{loader: 'babel-loader'}
]
},
{
test: /\.css$/,
use: [
// {
// loader: 'style-loader',
// options: {
// singleton: true,// 單獨(dú)的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.創(chuàng)建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 () {
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
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/> : {c} (u0z1t8os%)"
},
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: '聯(lián)盟廣告'
},
{
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.運(yùn)行命令
npm run dev
10.結(jié)果展示
