当前位置： 首页 > article >正文

【Webpack--011】配置开发和生产模式的webpack.config.js

article 2024/9/20 1:09:21

🤓😍Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主
🐱‍🐉若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍*
🐞🐞文章若有错误或某个内容有更优的解决方案，还望指正！👍*
更多webpack入门知识，详细解读webpack的基本使用、进阶优化等；请阅读专栏：sam9029–CSDN博客—Webpack入门笔记
或者访问 作者个人博客网站：sam9029.asia—Webpack入门笔记

配置开发和生产模式的config

生产模式介绍

生产模式是开发完成代码后，我们需要得到代码将来部署上线。

这个模式下我们主要对代码进行优化，让其运行性能更好。

优化主要从两个角度出发:

  1. 优化代码运行性能
  2. 优化代码打包速度

生产模式准备

我们分别准备两个配置文件来放不同的配置

文件目录

├── webpack-test (项目根目录)
    ├── config (配置文件目录)
    ├── node_modules (下载包存放目录)
    ├── src (项目源码目录，除了html其他都在src里面)
    │    └── 略
    ├── public (项目html文件)
    │    └── index.html
    ├── .eslintrc.js(Eslint配置文件)
    ├── babel.config.js(Babel配置文件)
    └── package.json (包的依赖管理配置文件)
    ├── webpack.dev.js(开发模式配置文件!！！！)
    └── webpack.prod.js(生产模式配置文件！！！)

拓展 package.json 文件

{
  "name": "testdemo4",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "private": "true",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "npx webpack serve --config ./webpack.dev.js",
    "build:prod": "npx webpack --config ./webpack.prod.js",
    "build": "npx webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.24.9",
    "@babel/preset-env": "^7.24.8",
    "babel-loader": "^9.1.3",
    "css-loader": "^7.1.2",
    "css-minimizer-webpack-plugin": "^7.0.0",
    "eslint": "^9.7.0",
    "eslint-webpack-plugin": "^4.2.0",
    "html-webpack-plugin": "^5.6.0",
    "less-loader": "^12.2.0",
    "mini-css-extract-plugin": "^2.9.0",
    "postcss": "^8.4.39",
    "postcss-loader": "^8.1.1",
    "postcss-preset-env": "^9.6.0",
    "sass": "^1.77.8",
    "sass-loader": "^14.2.1",
    "style-loader": "^4.0.0",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  },
  "browserslist": [
    "last 2 version",
    "> 1%",
    "not dead"
  ]
}

配置 webpack.dev.js

因为文件目录变了，所以所有绝对路径需要回退一层目录才能找到对应的文件

/**
 * 开发模式配置
 */

/** nodejs -- path文件路径模块 */
const path = require("path");

/** eslint代码检测 */
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
/** html文件处理  */
const HtmlWebpackPlugin = require("html-webpack-plugin");
/** css文件提取处理 */
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/** css文件压缩处理 */
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

//#region ===== tool 工具函数集
/**
 * @description 获取处理css样式的loaders工具配置函数, 配置了基础的loader，同时接收传参自定义loader
 * @param {Array} preProcessorList []
 * @returns
 */
const setStyleLoaders = (preProcessorList = []) => {
  return [
    // 单独提取css文件loader
    MiniCssExtractPlugin.loader,
    // 基础css-loader
    "css-loader",
    // css代码兼容处理loader配置
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    // 外部传入自定义 loader
    ...preProcessorList,
  ].filter(Boolean); // 筛选所有存在的loader
};
//#endregion

module.exports = {
  /** 入口文件 */
  entry: "./src/main.js",

  /** 输出文件配置 */
  output: {
    path: undefined, // 开发模式没有输出，不需要指定输出目录
    // 注意这里配置的是所有JS文件的输出路径，其他类型单独在 module-rules中配置
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    // clean: true, // 开发模式没有输出，不需要清空输出结果
  },

  /** 路径别名 */
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src/"),
    },
  },

  /** module  */
  module: {
    rules: [
      /** 处理 CSS 文件 */
      {
        test: /\.css$/,
        use: setStyleLoaders(), // 结果为： [MiniCssExtractPlugin.loader, "css-loader"],
      },

      /** 处理 less 文件 */
      {
        test: /\.less$/,
        use: setStyleLoaders(["less-loader"]), // 结果为： [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
      },

      /** 处理 scss or sass 文件 */
      {
        test: /\.s[ac]ss$/,
        use: setStyleLoaders(["sass-loader"]), // 结果为： [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },

      /** 处理 图片资源 */
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset", // 资源类型为 asset，Webpack 会根据文件类型选择合适的加载器进行处理, 比如 url-loader
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },

      /** 字体资源输出目录 */
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },

      /** 媒体资源输出目录 */
      {
        test: /\.(mp4|mp3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },

      /** JS 文件的 babel 处理代码语法兼容性 */
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        // 也可以用包含 include: path.resolve(__dirname, "../src"),
        loader: "babel-loader",
        options: {
          cacheDirectory: true, // 开启babel编译缓存
          cacheCompression: false, // 缓存文件不要压缩
        },
      },
    ],
  },

  /** plugins */
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "./src"), // 注意路径
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js、css等资源
      template: path.resolve(__dirname, "./public/index.html"), // 注意路径
    }),
    /** css文件提取处理 */
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
    /** css压缩  */
    new CssMinimizerPlugin(),
  ],

  /** 配置开发服务器 */
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, // 热更新
  },

  /** 环境模式---开发模式 */
  mode: "development", // development or production
  devtool: "eval-source-map",
};

运行开发模式的指令：

npx webpack serve --config ./config/webpack.dev.js

配置 webpack.prod.js

/**
 * webpack.config.js 配置参考标准
 */

/** nodejs -- path文件路径模块 */
const path = require("path");

/** eslint代码检测 */
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
/** html文件处理  */
const HtmlWebpackPlugin = require("html-webpack-plugin");
/** css文件提取处理 */
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
/** css文件压缩处理 */
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

//#region ===== tool 工具函数集
/**
 * @description 获取处理css样式的loaders工具配置函数, 配置了基础的loader，同时接收传参自定义loader
 * @param {Array} preProcessorList []
 * @returns
 */
const setStyleLoaders = (preProcessorList = []) => {
  return [
    // 单独提取css文件loader
    MiniCssExtractPlugin.loader,
    // 基础css-loader
    "css-loader",
    // css代码兼容处理loader配置
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    // 外部传入自定义 loader
    ...preProcessorList,
  ].filter(Boolean); // 筛选所有存在的loader
};
//#endregion

module.exports = {
  /** 入口文件 */
  entry: "./src/main.js",

  /** 输出文件配置 */
  output: {
    // 输出到本地根目录，所有输出文件的跟目录 ，dist文件夹下
    path: path.resolve(__dirname, "dist"),
    // 注意这里配置的是所有JS文件的输出路径，其他类型单独在 module-rules中配置
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    // 自动将上次打包目录资源清空
    clean: true,
  },

  /** 路径别名 */
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src/"),
    },
  },

  /** module  */
  module: {
    rules: [
      /** 处理 CSS 文件 */
      {
        test: /\.css$/,
        use: setStyleLoaders(), // 结果为： [MiniCssExtractPlugin.loader, "css-loader"],
      },

      /** 处理 less 文件 */
      {
        test: /\.less$/,
        use: setStyleLoaders(["less-loader"]), // 结果为： [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
      },

      /** 处理 scss or sass 文件 */
      {
        test: /\.s[ac]ss$/,
        use: setStyleLoaders(["sass-loader"]), // 结果为： [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },

      /** 处理 图片资源 */
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset", // 资源类型为 asset，Webpack 会根据文件类型选择合适的加载器进行处理, 比如 url-loader
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },

      /** 字体资源输出目录 */
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },

      /** 媒体资源输出目录 */
      {
        test: /\.(mp4|mp3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },

      /** JS 文件的 babel 处理代码语法兼容性 */
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        // 也可以用包含 include: path.resolve(__dirname, "../src"),
        loader: "babel-loader",
      },
    ],
  },

  /** plugins */
  plugins: [
    /** eslint 检测 */
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
      exclude: "node_modules", // 默认值
    }),
    /** 模板 html 处理 */
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js、css等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
    /** css文件提取处理 */
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
    /** css压缩  */
    new CssMinimizerPlugin(),
  ],

  /** 配置开发服务器--生产环境不用配置 */

  /** 环境模式 */
  mode: "production", // development or production
};

运行生产模式的指令：

npx webpack --config ./config/webpack.prod.js

配置运行指令

为了方便运行不同模式的指令，我们将指令定义在 package.json 中 scripts 里面

// package.json
{
  // 其他省略
  "scripts": {
    "start": "npm run dev",
    "dev": "npx webpack serve --config ./config/webpack.dev.js",
    "build:prod": "npx webpack --config ./config/webpack.prod.js",
  }
}

以后启动指令：

  • 开发模式：npm start 或 npm run dev
  • 生产模式：npm run build:prod

http://www.kler.cn/news/311167.html

相关文章：

  • 【算法】滑动窗口—找所有字母异位词
  • 解决使用nvm ls命令没有出现*的问题
  • 华为OD机试 - 打印机队列 - 优先队列（Python/JS/C/C++ 2024 E卷 200分）
  • 【分立元件】案例：新人加了个TVS管为什么可能导致系统不能正常工作
  • 【Unity】URP Rendering总结
  • 【C++STL简介】——我与C++的不解之缘（八）
  • 【PyTorch】深入浅出PyTorch
  • 模版进阶（template）
  • Java项目: 基于SpringBoot+mybatis+maven洗衣店订单管理系统(含源码+数据库+开题报告+任务书+毕业论文)
  • 【Flink Flick CDC】学习笔记
  • 架构设计 - 常用日志收集方案选型对比与推荐
  • 【java面试每日五题之基础篇一】（仅个人理解）
  • ACL 2024：交叉领域情感分析——论文阅读笔记
  • Kotlin cancel CoroutineScope.launch的任务后仍运行
  • PDF标准详解（五）——图形状态
  • 104. 二叉树的最大深度【 力扣(LeetCode) 】
  • VIM使用技巧
  • 从openAI最新模型GPT-o1再谈思维链(Cot)技术，大模型该怎么提升其逻辑推理能力？
  • 在 pika.SelectConnection 和 gevent 中实现高效异步：事件驱动与协程模型的冲突与优化
  • linux入门到实操-2 linux桌面、终端基本操作，文件系统、目录结构、挂载点
  • [数据集][目标检测]车窗状态检测车窗开关检测数据集VOC+YOLO格式299张3类别
  • CSS入门笔记
  • 【AI大模型-提示词的技巧】
  • python解析ip范围，拆分为所有ip数组
  • Qt快捷键说明与用法
  • 在Docker容器中执行命令
  • 数据湖-方案对比
  • ceph之osd扩容和缩容
  • 一个有个性的使用工具thefuck@Ubuntu
  • Java-list集合转成前端需要的json格式