说来也是一时兴起的捣腾，在一门课上老师要求我们写一个静态网站，作为作业要求我们交上去，当然关于部署这一块是没有要求的，是我自己无了这样做的，因为我刚好有一个服务器，刚好装了bt和nginx，刚好域名备案通过，刚好我就打算部署一下，话不多说，下面是我的一些理解！

我的前端项目是这样的

一共有三个文件，index.html 、index.css 、index.js
想要把它部署到服务器上，当然你可直接拖到对应目录下，在nginx配置好即可，我这使用的是利用webpack打包工具打包好才部署的，将css文件和js文件打包成一个文件部署，html当然也可以打包，但是一般不这样做，主要有以下两点原因：

1. 主要用途： Webpack 的主要设计目标是处理 JavaScript 模块的打包和管理，使得在开发过程中能够更好地组织、加载和使用各种模块。因此，Webpack 默认情况下只处理 JavaScript 文件。

2. HTML 文件不需要编译： HTML 文件通常是静态的，不需要经过编译或转换，因此没有必要由 Webpack 进行打包处理。

打包之前，先安装webpack相关依赖库，一共需要两个，分别是webpack 和webpack-cli，通过一条命令直接安装即可，需要注意的是得有足够的权限，不然是运行不成功的（特别是利用IDE控制台运行指令的同学，一定要注意这个）

npm install webpack webpack-cli --save-dev

在安装成功之后，你的项目会生成一些文件，如下图所示：

这些都是一些配置信息之类的，不用管，但你也可以在里面配置东西。
接着就是编写配置文件，为什么呢？
因为你得让webpack知道你要打包那些文件，打包这些文件的方式是什么样的，要用什么？
那怎么让他知道呢？这里我们需要编写一个配置文件 命名为 webpack.config.js

那这个文件要写点什么东西呢？先看看吧！

 

const path = require('path');  module.exports = {     mode: "development",     entry: './pattern/index.js',     output: {         path: path.resolve(__dirname, 'dist'),         filename: 'bundle.js'     },     module: {         rules: [             {                 test: /\.css$/,                 use: ['style-loader', 'css-loader']             }         ]     } };

这是一个基于 Node.js 的配置文件，用于配置 webpack 打包工具。下面是对每一行的解释：
 

// 这一行代码引入了 Node.js 的 path 模块，用于处理文件路径。 const path = require('path');   // 定义一个对象，用于存储 webpack 的配置项。 // 这段代码导出一个对象作为配置项，其中： module.exports = {      // mode: "development"：设置打包模式为开发模式，     // 这样打包后的代码不会被压缩和优化，便于调试。     // 也有生产模式，但默认是生产模式。     // 这样打包后的代码会被压缩和优化，适合用于生产环境。     mode: "development",      // entry: './pattern/index.js'：     // 指定入口文件为 ./pattern/index.js，     // 即 webpack 将从这个文件开始分析和打包相关依赖。     entry: './pattern/index.js',          // output：定义输出配置项，包括打包后文件的输出路径和名称。     output: {         // path: path.resolve(__dirname, 'dist')：         // 使用 path.resolve 方法将相对路径转换为绝对路径，         // 将打包后的文件输出到 dist 目录下。         path: path.resolve(__dirname, 'dist'),          // filename: 'bundle.js'：指定打包后生成的文件名称为 bundle.js。         filename: 'bundle.js'     },     // module：定义模块配置项。     module: {         // rules：定义模块解析规则。         rules: [             {                 //  { test: /\.css$/, use: ['style-loader', 'css-loader'] }：                 // 使用正则表达式匹配所有以 .css 结尾的文件，                 test: /\.css$/,                 // 并使用 style-loader 和 css-loader 进行处理。                 use: ['style-loader', 'css-loader']             }         ]     } };  // 总的来说 // 这个配置文件的作用是指定 webpack 的打包入口、 // 输出路径和一些模块解析规则， // 以便将多个文件打包成一个浏览器可识别的 JavaScript 文件。 

值得注意的是，index.js 入口文件可以是项目中的任意一个 JavaScript 文件。在 webpack 配置中，你可以指定任何一个 JavaScript 文件作为入口文件，作为 webpack 构建过程的起点。一般来说，index.js 是一个约定俗成的命名，用来表示项目的主入口文件，但并不是强制要求。你可以根据实际情况将任何一个 JavaScript 文件作为入口文件进行打包。

需要注意的是，如果你的项目中有一些 JS 文件或 CSS 文件没有被入口文件直接引用到，webpack 可能无法正确地识别并将它们包含在最终的输出文件中。在这种情况下，你可以通过在入口文件中手动引入这些文件，或者使用 webpack 的其他配置选项来处理这些额外的文件和模块。就像我一样，引入了css文件。

接下来就是打包过程了，有两种方式，通过命令行或者脚本语言执行

命令行方式     npx webpack     终端直接运行即可。
脚本方式，在package.json文件输入以下脚本。点击红色方框里的运行图标即可

  "scripts": {     "build": "webpack --config webpack.config.js"   }

运行成功后，会生成dist目录（自己配置的是啥就是啥）


到此，js文件和css文件就被打包成一个静态文件啦，以下是服务器部署部分！！！！！！！

打开我们的bt面板，在文件那里将我们的html文件和生成的dist目录下的所有文件上传到指定的文件夹中，新手阶段就直接放在nginx里的html目录下，层级没关系，在这下面就行

还有一点需要注意的是，既然你的css文件和js文件打包成了一个文件，记得要修改html里的引入，将这个bundle.js文件引入到html中，不然渲染不了哦！！！之前的引入就可以注释掉了。

然后就是修改nginx配置文件，这里假定你的域名为 www.超喜欢邓紫棋的.com,用的是80端口，
那么在配置文件里加上如下内容：（养成好习惯，修改之前先备份）

server {     listen 80;     server_name www.超喜欢邓紫棋的.cn;          location /{       // 你上传的路径       root /www/server/nginx/html/LableDescription/dist;       index index.html;     }

然后 restart 或者 reload 以下即可生效

然后访问你的域名就可以成功访问到你写的网页啦！！！