webpack

 webpack是一个静态资源打包工具，前端工程化中最重要的构建工具之一，是基于 Node.js 运行的。个人人为，他在前端中的是很重要的。类似的打包工具还要vite，group这些。

这里只是会演示下我们是去如何使用的。

webpack的核心概念的：

module.exports = {
  // 入口
  entry: "",
  // 输出
  output: {},
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "",
};

改一下配置，确定我们的打包入口文件和输出的文件路径

const path = require("path");

module.exports = {
  entry: "./src/main.js",//（这也是为什么我们在一些脚手架中的的入口文件一般都会index.js或者main.js）

  output: {
    path: path.resolve(__dirname, "dist"),//输出的路径为dist
    filename: "main.js",
  },
  module: {
    rules: [],
  },
  plugins: [],
  mode: "development", // 开发模式
};

指定下我们的入口文件和输出的路径，其实我们也是可以配置多个入口文件的，这里的话也是使用的path来处理文件路径的.

运行

npx webpack

在如果使用到了对应的loader与plugin时记得下载对应的依赖包，引入是使用的commonjs规范

module:模块的处理。

举个栗子，用来处理less文件

 module: {
    rules: [
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },

test: 一个正则表达式，用于匹配特定类型的模块文件。use: 一个数组或字符串，指定要使用的加载器来处理匹配到的模块。还有其他的属性。后面会较为详细的讲到。

当然在开发中要处理的其实是很多的，例如我们使用的是react框架的话就需要去babel loader中使用react提供的一些预设，去处理jsx，tsx文件，当然对于ts，es6也是通过babel去处理的，，但是对于vue的话是由专门去处理vue文件的loader的。

去处理jsx时就需要去在rules中添加babel的配置

 {
            test: /\.(jsx|js)$/,
            include: path.resolve(__dirname, "../src"),
            loader: "babel-loader",
          },

plugin：插件能做的事情很多，例如打包优化，资源管理，注入环境变量。

简单的使用：eslint代码检查与html文件的处理

  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],

mode：模式，其实有三种的：'none' , 'development' ,'production',默认的话是production也就是生产环境。

在development和production，webpack的一些配置是不同的，emmm，举个栗子，

在开发环境下其实更多的是追求打包速度，这个时候是可以去配置构建缓存，热更新这些，也需要去解决跨域，那么怎么 去处理的呢，是通过devserve这个配置去处理的，其实都是利用的nodejs去做的代理。

在生产环境中，其实更多是最求代码包的体积，有时根据需要也需要去配置懒加载，代码切割，通过插件去除项目中的冗余代码，压缩代码，压缩静态资源这些。

看看开发环境下使用devserve去配置反向代理以及端口设置吧

   devServer: {
        host: "localhost",
        port: 3000,
        open: true,
        hot: true,//热更新 默认为开启
        //Proxy 开发环境反向代理的配置
    },

这也只是对webpack的一个简单的认识