webpack基本配置

// webpack.config.js
const path = require("path");

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const { DefinePlugin } = require("webpack");

module.exports = {
  target: "web",
  // 采用哪种模式进行打包  默认值为 production
  // development 开发阶段, 会设置development
  // production 准备打包上线的时候, 设置production
  // 如果设置了mode为development，那么必须设置devtool
  mode: "development", // 设置source-map, 建立js映射文件, 方便调试代码和错误
  devtool: "source-map",
  // webpack给我们提供了watch模式：
  // 在该模式下，webpack依赖图中的所有文件，只要有一个发生了更新，那么代码将被重新编译
  // watch: true,
  // 默认去找当前所在文件夹下的src下的index.js文件
  entry: "./src/main.js",
  // 默认输出的路径当前文件夹下的dist文件夹下的bundle.js
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "js/bundle.js",
  },
  // 如果使用了devserve 就不必使用watch了
  devServer: {
    // 告知 devServer，从什么位置查找文件webpack以外的文件
    // 新版的webpack-dev-server中移除了contentBase 使用static代替
    // 如果不设置，非webpack的内容将从public目录提供
    static: {
      directory: "./public",
    },
    // 开启HMR(模块热替换)  需要配置 target: "web",
    hot: true,
    // host设置主机地址：
    // 默认值是localhost； 如果希望其他地方也可以访问，可以设置为 0.0.0.0、
    // host: "0.0.0.0",
    // port设置监听的端口，默认情况下是8080
    port: 8088,
    // open是否打开浏览器：默认值是false，设置为true会打开浏览器
    open: true,
    // compress是否为静态文件开启gzip compression。 默认值是false，可以设置为true
    // compress: true
    proxy: {
      "/api": {
        // target：表示的是代理到的目标地址
        target: "http://localhost:8888",
        // pathRewrite：默认情况下，我们的 /api-hy 也会被写入到URL中，可以使用pathRewrite进行替换
        pathRewrite: {
          "^/api": "",
        },
        // 默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false
        secure: false,
        // 表示是否更新代理后请求的headers中host地址
        changeOrigin: true,
      },
    },
  },
  //resolve用于设置模块如何被解析
  resolve: {
    //extensions是解析到文件时自动添加扩展名
    extensions: [".ts", ".js", ".json", ".css", ".scss", ".less", ".vue"],
    // 配置别名alias
    alias: {
      "@": path.resolve(__dirname, "./src"),
      js: path.resolve(__dirname, "./src/js"),
    },
  },
  module: {
    // 匹配的规则
    rules: [
      // 处理css的loader，可以添加多个loader
      {
        test: /\.css$/,
        // 第一种写法  一种语法糖
        // loader: "css-loader",
        // 第二种写法 可以写多个loader use的执行顺序是闲执行后面的loader 需要注意
        use: ["style-loader", "css-loader"],
        // 完整写法  如果给loader添加参数这样书写
        /* use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
        ], */
      },
      // 处理less的loader
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
      },
      // webpack4及以下打包资源的方式
      // #region
      /**
      // 文件的loader
      // {
      //   test: /\.(jpg|jpeg|png|gif|svg)$/,
      //   use: [
      //   {
      //     loader: "file-loader",
      //     options: {
      //       // outputPath:"img"
      //       name: "img/[name]_[hash:8].[ext]",
      //     },
      //   },
      // ],
      // },
      //url-loader
      // {
      //   test: /\.(jpg|jpeg|png|gif|svg)$/,
      //   use: {
      //     // 默认会对所有的URL图片进行编码
      //     loader: "url-loader",
      //     options: {
      //       // outputPath:"img"
      //       name: "img/[name]_[hash:8].[ext]",
      //       limit: 30 * 1024,
      //     },
      //   },
      // },
       */
      // #endregion
      // webpack5打包资源的方式
      {
        test: /\.(jpg|jpeg|png|gif|svg)$/,
        // type: "asset/resource",
        type: "asset",
        // 设置文件的出口以及文件名称  设置文件名称的时候不需要添加点
        generator: {
          filename: "img/[name]_[hash:8][ext]",
        },
        // 设置文件大小
        parser: {
          dataUrlCondition: {
            maxSize: 30 * 1024,
          },
        },
      },
      // 字体的loader
      // 可以选择使用file-loader来处理，也可以选择直接使用webpack5的资源模块类型来处理
      {
        test: /\.(eot|ttf|woff2?)$/,
        type: "asset/resource",
        // 设置文件的出口以及文件名称  设置文件名称的时候不需要添加点
        generator: {
          filename: "font/[name]_[hash:8][ext]",
        },
      },
      // babe-loader
      {
        test: /\.js$/,
        use: ["babel-loader"],
        // #region
        // use: [
        //   {
        //     loader: "babel-loader",
        //     options: {
        //       // 使用插件的形式  传入相应的插件对代码进行解析
        //       // plugins: [
        //       //   "@babel/plugin-transform-arrow-functions",
        //       //   "@babel/plugin-transform-block-scoping",
        //       // ],
        //       // preset-env 使用预设的形式
        //       // 如常见的预设有三个：env react TypeScript
        //       // presets: ["@babel/preset-env"],
        //       // 使用babel.config.js文件中的配置
        //     },
        //   },
        // ],
        // #endregion
      },
      // vue-loader
      {
        test: /\.vue$/,
        use: ["vue-loader"],
      },
    ],
  },
  plugins: [
    // 每次打包前删除上次打包的文件夹
    new CleanWebpackPlugin(),
    // webpack 定义导出的index.html模版
    // 可以定义生成模版的title 注意title要写在template后面。
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      title: "测试Title",
    }),
    // 在自定义的模版中使用 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    // <%= BASE_URL %> 是EJS模块填充数据的方式
    // 可以使用 webpack本身自带的 DefinePlugin 插件定义这个变量
    new DefinePlugin({
      BASE_URL: "'./'",
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false,
    }),
    new CopyWebpackPlugin({
      // 匹配的文件夹，可以书写多个
      patterns: [
        // from：设置从哪一个源中开始复制；
        // to：复制到的位置，可以省略，会默认复制到打包的目录下
        // globOptions：设置一些额外的选项，其中可以编写需要忽略的文件：
        {
          from: "public",
          to: "./",
          globOptions: {
            ignore: ["**/index.html"],
          },
        },
      ],
    }),
    // 帮助vue-loader做一些操作
    new VueLoaderPlugin(),
  ],
};


// postcss loader的配置文件
module.exports = {
  plugins: [require("postcss-preset-env")],
};


// babel loader配置文件
module.exports = {
  // plugins: [
  //   "@babel/plugin-transform-arrow-functions",
  //   "@babel/plugin-transform-block-scoping",
  // ],
  // 使用预设
  presets: ["@babel/preset-env"],
};