vue里配置水球图

Posted 2023-04-23

参考技术A 记得配置项要配置在data里，如下链接所示，不然水波出不来（虽然在echarts的示例里没问题，但放在vue里就出不来水波，不知为何）
https://www.cnblogs.com/guolintao/p/8029289.html

webpack打包原理

参考技术A webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

webpack.config.js里配置

webpack.config.js里配置

webpack loader 将所有类型的文件，转换为应用程序的依赖图可以直接引用的模块

通过require()将想要使用的插件添加到plugins数组中,多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

npm init -y
安装webpack
npm i webpack_dome webpack-cli -D

在根目录下新建src文件夹,在src里新建index.js文件
index.js文件

创建并配置webpack.config.js文件
webpack.config.js文件

配置 package.json 文件，在scripts中添加'build'使得运行 npm run build 可以直接执行 webpack 命令,在根目录内会生成dist文件夹,里面是对应生成的文件,
安装 npm install --save-dev express webpack-dev-middleware ,添加'start'使得运行 npm run start 可以直接执行 webpack-dev-server 命令,
package.json 文件

再次打包时需要删除旧文件
执行 npm install clean-webpack-plugin --save-dev 命令，安装依赖。
修改webpack.config.js文件配置

新建index.html文件,并手动引入打包后的js文件

执行 npm i html-webpack-plugin --save-dev 命令，安装依赖。
新建index.ejs文件

修改webpack.config.js文件配置

重新运行 npm run build，生成新的 dist 包，包内会生成一个新的 index.html 文件，并自动引入了 index.min.js 文件。

执行 npm i open-browser-webpack-plugin webpack-dev-server --save-dev 命令，安装依赖。
修改 webpack.config.js 配置

修改webpack.config.js文件配置