本文已参与[新人创作礼]活动，一起开启掘金创作之路。

在B站学习了千峰webpack基础 记录一下，B站地址： www.bilibili.com/video/BV1YU…

webpack.config.js webpack配置入口文件

将针对开发环境和生成环境分开配置，

const { merge } = require('webpack-merge')

const commonConfig = require('./webpack.config.common')
const productionConfig = require('./webpack.config.prod')
const developmentConfig = require('./webpack.config.dev')

module.exports = (env) => {
  switch(true) {
    case env.development:
      return merge(commonConfig, developmentConfig)

    case env.production:
      return merge(commonConfig, productionConfig)

    defult:
      return new Error('No matching configuration was found')
  }
}

webpack.config.common.js 是开发环境和生产环境都需要用到的配置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

const toml = require("toml");
const yaml = require("yaml");
const json5 = require("json5");

module.exports = {
  entry: {
    index: "./src/index.js", //打包入口文件
    another: "./src/another-module.js", //打包入口文件
  },

  output: {
    path: path.resolve(__dirname, "../dist"), //打包到所在的目录 //path.resolve(__dirname 找到当前配置文件webpack.config.js的位置
    clean: true, //每次重新打包后清除到之前的打包文件
    assetModuleFilename: "images/[contenthash][ext]", //方法1： 打包图片资源，输出文件在images下，contenthash为动态生成的图片名称，ext为动态图片格式后缀
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html", //以开发目录下index.html为基础
      filename: "app.html", //打包出来的文件取名为app.html
      inject: "body", //将打包出来的<script defer src="bundle.js"></script>放在body标签下
    }),

    new MiniCssExtractPlugin({
      filename: "styles/[contenthash].css", //将css打包在styles文件夹下  contenthash自动生成的文件名
    }),
  ],

  module: {
    //导入规则
    rules: [
      {
        test: /\.png$/,
        type: "asset/resource",
        generator: {
          filename: "images/[contenthash][ext]", //方法2 ：优先级高于方法一 //用于导出一个资源的url地址 ?
        },
      },

      {
        test: /\.svg$/,
        type: "asset/inline", //inline 用于导出一个资源的data url base64 字符串的格式 打包没得本地文件
      },

      {
        test: /\.txt$/,
        type: "asset/source", //source 可以导出资源的源代码
      },

      {
        test: /\.jpg$/, //在导出一个data url 和一个单独的文件之间做一个选择 inline resource 默认图片资源大于8k 会选择生成一个本地资源 小于8k会按照inline方式去生成data url base64
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 * 1024, // 4M 可调整临界值8k变为其他大小
          },
        },
      },

      {
        test: /\.(css|less)$/, //从后向前加载 loader加载编译
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"], //css-loader 编译css样式文件 再通过style-loader将css放置在我们的页面上
      },

      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        type: "asset/resource",
      },

      {
        test: /\.(csv|tsv)$/, //利用csv-loader 编译csv/tsv文件  csv文件会转换为一个数组
        use: "csv-loader",
      },

      {
        test: /\.xml$/,
        use: "xml-loader", //利用xml-loader 编译xml文件 xml文件会转换为一个js对象
      },

      {
        test: /\.toml$/,
        type: "json", //自定义json模块来加载yaml toml 以及json5 文件
        parser: {
          parse: toml.parse,
        },
      },

      {
        test: /\.yaml$/,
        type: "json",
        parser: {
          parse: yaml.parse,
        },
      },

      {
        test: /\.json5$/,
        type: "json",
        parser: {
          parse: json5.parse,
        },
      },

      {
        test: /\.js$/,
        exclude: /node_modules/, //node_modules里的js 不需要用babel-loader进行编译
        use: {
          loader: "babel-loader", //babel-loader将es6转化为es5
          options: {
            presets: ["@babel/preset-env"],
            plugins: [["@babel/plugin-transform-runtime"]],
          },
        },
      },
    ],
  },
  // 优化
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          //node_modules 利用浏览器长效缓存的机制 缓存弟三方库到浏览器 命中的缓存来消除请求 从而减少向serve获取资源的次数 不变得时候就不用重新打包
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all",
        },
      },
    },
  },
};

webpack.config.dev.js 开发环境专属配置

module.exports = {
  output: {
    filename: "scripts/[name].js", //打包输出文件名
  },

  mode: "development", //将webpack编译的模式指定为开发模式

  devtool: "inline-source-map", //代码出错时 浏览器调试时 打包后的文件 能定位到源代码的位置 精准定位代码的行数
  // devtool: 'cheap-module-source-map',
  // source-map 会生成打包后和打包前的 调试代码的行数和列数的映射， cheap-source-map 会生成行数的映射
  // cheap-module-source-map 推荐使用这个
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"), //配置路径别名
    },

    extensions: [".json", ".js", ".vue"], //reqiure 同名文件 不同格式时 按配置顺序加载
  },
  devServer: {
    static: "./dist", //引入 webpack-dev-serve   当文件修改后 实时监听编译打包 自动刷新浏览器
    // webpack-dev-serve真正的没有输出任何的物理的文件，把输出的打包以后的bundle文件放在了内存里
     // static: path.resolve(__dirname, "./dist"),
    compress: false, //compress 设置是否在服务器中进行代码压缩，提高传输效率 network查看 content-ecoding :为gzip
    port: 3000,
    host: "0.0.0.0", //配置局域网内的其他人都可以访问本地

    headers: {
      "X-Access-Token": "abc123",
    },

    proxy: {
      "/api": "http://localhost:9000", //设置代理 解决跨域
    },

    // https: true //访问https请求
    http2: true, //访问http2请求

    historyApiFallback: true, //解决 h5 history路由模式 刷新404 的问题
    hot: true, //热更新
  },
};

webpack.config.prod.js 生产环境专属配置

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  output: {
    filename: "scripts/[name].[contenthash].js", //filename根据hash生产不同的字符串名字
    publicPath: "http://localhost:8080/", // 配置路由
  },

  mode: "production", //将webpack编译的模式指定为生产模式

  optimization: {
    minimizer: [
      new CssMinimizerPlugin(), //生产环境 压缩代码 //CssMinimizerPlugin压缩打包的css代码 去除空格等
      new TerserPlugin(),
    ],
  },
  optimization: {
    usedExports: true, //只打包用到的代码
  },
  performance: {
    hints: false, //去掉性能方面的提示 如 打包size过大
  },
};