webpack构建流程
- 首先你需要一个空文件夹。
- 对空文件夹进行初始化：执行npm init后你会得到一个package.json文件。
- 安装项目所需要的webpack依赖：npm i -D webpack webpack-cli。
- 在根路径下手动创建webpack的配置文件 webpack.config.js 并将如下内容写入。
/**
* path模块是node.js中处理路径的核心模块。可以很方便的处理关于文件路径的问题。
* path.resolve当前的文件的绝对路径
* __dirname当前模块的目录名
* */
const path = require('path')
module.exports = {
// 需要构建的入口文件
entry:path.resolve(__dirname, './src/index.js'),
// 构建后导出的文件夹路径及文件名称
output:{
// 请提前创建dist目录
path: path.resolve(__dirname, './dist'),
filename: 'index-bundle.js'
}
}
- 引入echart的依赖：npm i -S echarts 该模块安装成功后会在package.json中的 dependencies 下出现
- 根目录下新建 index.html 并写入如下内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>this is webpack echarts</title>
<style>
#chart{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="./dist/index-bundle.js"></script>
</body>
</html>
- 在根目录下新建src目录，在src目录下新建index.js。
import EChart from 'echarts'
const chart = EChart.init(document.getElementById('chart'));
chart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
})
目录.png
- package.json中新增webpack命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
- 执行npm run build 打包
-
打开index.htmlecharts.png
完美！！！！！！！！！
其实webpack不一定要跟vue，react捆绑使用，可以根据实际需求配置webpack。
你和你的代码都有无限可能！！！
