示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
1 webpack概述
????webpack网站 ：https://webpack.docschina.org
????webpack文档 ：https://webpack.docschina.org/concepts/
????webpack 是一个前端资源构建工具，用于现代 JavaScript 应用程序的静态模块打包工具。当webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
????webpack步骤：
??????(1)全局下载包 ??cnpm install -g webpack webpack-cli
??????(2)初始化项目 npm init -y
??????(3)下载webpack包
????????????cnpm i --save-dev webpack webpack-cli
????????????或者cnpm i -D webpack webpack-cli
???对于webpack可以分为五大模块来学习。
?? ?? 入口(entry)、输出(output)、loader加载器 (module)、插件(plugin)、模式(mode)
1.1 入口
????入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。入口的默认值是 ‘./src/index.js’，但你可以通过在 webpack configuration中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：
在webpack.config.js文件中配置：
module.exports = {
entry: './path/to/my/entry/file.js',
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
}
};
1.2 输出(output)
???????output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
在webpack.config.js文件中配置：
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
filename: './js/my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist'),
}
};
1.3 loader(加载)
???在 webpack 的配置中，loader 有两个属性：
????????test: 识别出哪些文件会被转换。
????????use: 定义出在进行转换时，应该使用哪个 loader。
在webpack.config.js文件中配置：
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{
test: /\.html$/,
use: 'html-loader'
}
]
}
};
对于CSS和JS的加载，推荐使用style-loader和css-loader加载器
安装命令： cnpm i -D style-loader css-loader
对于html的加载，推荐使用html加载器
安装命令： cnpm i -D style-loader css-loader
对于文件的加载，推荐使用fileloader文件加载器
安装命令： cnpm i -D fileloader
1.3.1 css文件加载
安装style-loader和css-loader
安装命令：cnpm i -D style-loader css-loader
配置项
{
test: /\.css$/,
use: [
"style-loader",
"css-loader",
]
}
1.3.2 less和css中的图片使用，不处理html中的img
1.url-loader(url-loader依赖file-loader)
安装: cnpm i -D url-loader file-loader
配置
{
test: /\.(JPG|jpg|png|gif)$/,
use: 'url-loader',
options: {
outputPath: 'images',
limit: 8 * 1024,
name: '[hash:10].[ext]',
}
}
2.或者file-loader（file-loader不会使用base64处理小文件，原文件会保留）
安装： cnpm i -D url-loader file-loader
配置
{
test: /\.(JPG|jpg|png|gif)$/,
use: [
{
loader: 'file-loader',
options: {
outputPath: 'images'
}
}
],
}
1.4 插件(plugin)
???????打包优化，资源管理，注入环境变量。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。
???????在下面的示例中，html-webpack-plugin为应用程序生成HTML一个文件，并自动注入所有生成的 bundle。
在webpack.config.js文件中配置：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
1.5 模式(mode)
???????通过选择 development、production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
在webpack.config.js文件中配置：
module.exports = {
mode: 'development',
}
2 webpack-dev-server 开发服务器
???????webpack-dev-server是一个简单的web服务器，在代码修改后能重新构建代码并且刷新浏览器。
???特点：只会在内存中编译打包，不会有任何实体文件输出
???启动devServer指令： webpack-dev-server，本地下载的话需要npx webpack-dev-server查找包并运行，可以将该命令配置到package.json中。
???安装：cnpm i -D webpack-dev-server
??? 配置：
在webpack.config.js文件中：
module.exports = {
devServer: {
static: './build',
compress: true,
port: 3000,
open: true
}
}
|