利用webpack打包工具，打包前端项目，部署到装了bt和nginx的服务器上

本文链接：https://blog.csdn.net/qq_66450373/article/details/136781277

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

我的前端项目是这样的

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

主要用途： Webpack 的主要设计目标是处理 JavaScript 模块的打包和管理，使得在开发过程中能够更好地组织、加载和使用各种模块。因此，Webpack 默认情况下只处理 JavaScript 文件。
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 以下即可生效

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