webpack5 打包环境抽离分环境基本配置

news2025/7/7 4:25:54
  • 两种开发模式
    • 开发模式:代码能编译自动化运行
    • 生产模式:代码编译优化输出
  • Webpack 基本功能
    • 开发模式:可以编译 ES Module 语法
    • 生产模式:可以编译 ES Module 语法,压缩 js 代码
  • Webpack 配置文件
  • 5 个核心概念
    • entry
    • output
    • loader
    • plugins
    • mode
  • devServer 配置
    • webpack 直接打包输出
    • webpack serve 启动开发服务器,内存编译打包没有输出

仓库代码:

https://gitee.com/zhouyunfang_admin/webpack5-base/tree/webpack-base/icon-default.png?t=M85Bhttps://gitee.com/zhouyunfang_admin/webpack5-base/tree/webpack-base/ 

生产环境路径D:\myProject\webpack5\webpack5-demo\config\webpack.prod.js

// 生产环境 npx webpack --config ./config/webpack.pro.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
// https://webpack.docschina.org/plugins/mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//eslint文档 https://webpack.docschina.org/plugins/eslint-webpack-plugin/
const ESLintPlugin = require("eslint-webpack-plugin");
const path = require("path");
// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader, //单独生成css文件
    "css-loader", //将css资源编译成commonjs的模块到js中
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean); //过滤掉preProcessor为undefined值
};

// webpack都是在nodejs平台运行所以要用到node语法
module.exports = {
  // 入口 (相对路径)
  entry: "./src/main.js",
  // 输出
  output: {
    // 文件输出路径
    path: path.resolve(__dirname, "../dist"),
    // 入口文件打包输出文件名
    filename: "static/js/main.js",
    clean: true, //webpack5特性打包前清除上一次打包记录
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/, //只检测.css文件
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        // use与loader的区别,use可以用多个loader;loader只能用一个(loader:'xxxx')
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/, //a和c结尾的文件都行(sass|scss)
        use: getStyleLoaders("sass-loader"),
      },
      // https://webpack.docschina.org/guides/asset-modules/#resource-assets
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/, //$匹配结尾,在多行检测中,会匹配一行的结尾
        type: "asset", //转base64
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片转为base64,用于减少请求数据,但体积会大一点点
          },
        },
        generator: {
          // 生成输出的图片名字[hash:10]表示只取前10位
          // ext:扩展名
          // query图片参数
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?|mp3|mp4|avi)$/, //匹配字体图标库或者视频文件
        type: "asset/resource", //resource对文件原样的输出
        generator: {
          //输出media名称
          filename: "static/media/[hash:10][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/, //排除node_modules不做js转换处理
        use: {
          loader: "babel-loader",
          // options: {options配置可以写到babel.config.js文件中好维护
          //   presets: ["@babel/preset-env"],
          // },
        },
      },
    ],
  },
  // 插件
  plugins: [
    new ESLintPlugin({
      //context指定文件根目录,类型为字符串(检查src下的文件)
      context: path.resolve(__dirname, "../src"),
    }),
    /*
    https://webpack.docschina.org/plugins/html-webpack-plugin/
    该插件将为你生成一个 HTML5 文件, 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
    */
    // new HtmlWebpackPlugin()会将原来的结构覆盖生成一个新的文件
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点:1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    //  提取css成单独文件
    new MiniCssExtractPlugin({
      // 针对css打包后放置指定路径
      filename: "static/css/main.css",
    }),
    // css压缩
    new CssMinimizerPlugin(),
  ],

  // 模式
  mode: "production",
};

开发环境配置路径D:\myProject\webpack5\webpack5-demo\config\webpack.dev.js

// 开发环境 运行模式npx webpack serve --config ./config/webpack.dev.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
//eslint文档 https://webpack.docschina.org/plugins/eslint-webpack-plugin/
const ESLintPlugin = require("eslint-webpack-plugin");
// webpack都是在nodejs平台运行所以要用到node语法
module.exports = {
  // 入口 (相对路径)
  entry: "./src/main.js",
  // 输出
  output: {
    // 文件输出路径(开发模式下没有输出)
    path: undefined,
    // 入口文件打包输出文件名
    filename: "static/js/main.js",
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/, //只检测.css文件
        use: [
          //执行顺序,从右到左(从下到上)
          "style-loader", //将js中css通过创建style标签添加到html中动态生效
          "css-loader", //将css资源编译成commonjs的模块到js中
        ],
      },
      {
        test: /\.less$/,
        // use与loader的区别,use可以用多个loader;loader只能用一个(loader:'xxxx')
        use: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/, //a和c结尾的文件都行(sass|scss)
        use: [
          // 将 JS 字符串生成为 style 节点
          "style-loader",
          // 将 CSS 转化成 CommonJS 模块
          "css-loader",
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
      },
      // https://webpack.docschina.org/guides/asset-modules/#resource-assets
      {
        test: /\.(png|jpe?g|gif|webp|svg)$/, //$匹配结尾,在多行检测中,会匹配一行的结尾
        type: "asset", //转base64
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片转为base64,用于减少请求数据,但体积会大一点点
          },
        },
        generator: {
          // 生成输出的图片名字[hash:10]表示只取前10位
          // ext:扩展名
          // query图片参数
          filename: "static/images/[hash:10][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?|mp3|mp4|avi)$/, //匹配字体图标库或者视频文件
        type: "asset/resource", //resource对文件原样的输出
        generator: {
          //输出media名称
          filename: "static/media/[hash:10][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/, //排除node_modules不做js转换处理
        use: {
          loader: "babel-loader",
          // options: {options配置可以写到babel.config.js文件中好维护
          //   presets: ["@babel/preset-env"],
          // },
        },
      },
    ],
  },
  // 插件
  plugins: [
    //plugins的配置
    new ESLintPlugin({
      //context指定文件根目录,类型为字符串(检查src下的文件)
      context: path.resolve(__dirname, "../src"),
    }),
    /*
    https://webpack.docschina.org/plugins/html-webpack-plugin/
    该插件将为你生成一个 HTML5 文件, 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
    */
    // new HtmlWebpackPlugin()会将原来的结构覆盖生成一个新的文件
    new HtmlWebpackPlugin({
      /**
       * 模板以public/index.html文件创建新的html文件,
       * 新的html文件特点:
       * 结构和原来的一致
       * 自动引入打包输出的资源
       */
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  // 模式
  mode: "development", //设置为开发  mode: "development |production ",
};

package.json文件配置启动环境

  "scripts": {
    "start": "npm run dev",
    "dev": "webpack server --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.prod.js"
  },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/6992.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

FL Studio21最新演示测试版本下载FL水果V21

FL Studio是市场上最受欢迎的音乐制作软件之一。它被世界各地的许多专业制作人和艺术家使用。FL Studio音乐软件的每日下载量超过40,000次,其增长是不断的,而且没有迹象表明很快就会放缓。随着新的 FL 产品版本在 Windows 和 Mac 上不断发布&…

25.gateway的Filter 过滤器工厂(springcloud)

1 概述 gateway 里面的过滤器和 Servlet 里面的过滤器,功能差不多,路由过滤器可以用于修改进入Http 请求和返回 Http 响应2 分类 2.1 按生命周期分两种 pre 在业务逻辑之前 post 在业务逻辑之后2.2 按种类分也是两种 GatewayFilter 需要配置某个路由&…

阿里同步神器Canal原理+安装+快速使用

文章目录前言Canal简介MySQL主备复制原理canal 工作原理1、MySQL配置1.1 修改MySQL配置支持binloglog-binmysql-binbinlog-formatROW1.2 创建canal用户1.3 重启mysql服务1.4 基本的查看binlog命令2、下载安装canal2.1 解压canal2.2 配置与mysql信息2.3 启动canal3. 快速使用3.1…

【文件传输】实现下载

文章目录下载:下载的过程:单文件传输:多文件传输:下载: 如下图: 如果刚发完size,客户端不回复ok,直接发送数据,会出现粘包问题。如果想要确保客户端收到数据&#xff0…

流行的前端开源报表工具有哪些?适合在企业级应用的

前端开源报表工具有很多,但是如果是企业级应用真心不建议选用。比如非要选择开源的报表工具,你需要投入一个或多个程序员来做这个事情,他们还得先学习这个开源报表工具的界面、功能使用操作等等,尤其是很多开源工具的学习资料还是…

dpdk Vhost 库

1、 怎么实现vhost_dev的VhostOps的vhost_set_vring_kick和vhost_set_vring_call; vhost_net kernel方式的vhost_set_vring_kick和vhost_set_vring_call依赖于/dev/vhost_net的ioctl。 有两种实现方式: 1、guest是server,dpdk vhost user是…

Sourcetree的实际使用开发笔记

目录 前言 一、Sourcetree是什么 二、Sourcetree使用步骤 1.创建仓库 2.拉取和推送的使用 3.创建新的自己的分支 三、使用Sourcetree来进行不提交本地的代码,而获取最新的代码拉取 总结 前言 本章主要是记录一下Sourcetree的基本使用功能。 一、Sourcetree是…

Android:Binder思考笔记

基础知识 进程空间划分 一个进程空间分为用户空间与内核空间。用户空间与内核空间都是虚拟内存,映射到物理内存。所有进程的内核空间映射到同一块物理内存,是共享的二者区别: 进程间,用户空间的数据不可共享,即用户空…

线性与树型数据结构可视化模拟器

线性与树型数据结构可视化模拟器 题目2:线性与树型数据结构可视化模拟器 [问题描述] 数据结构课程是计算机类专业的核心课程之一,是计算机科学与技术必修的专业基础课程。数据结构研究的范围和计算机软件有着密切的联系。课程涉及到大量的概念、定义以及数据结构的…

JS数据类型的探究

JS数据类型的探究 分思考三部曲? 是什么?为什么?怎么做? 一:什么是数据类型? 在程序设计的类型系统中,数据类型(英语:Data type),又称资料型态、资料型别,是用来约束数据的解释。在编程语言中&…

我去面试聊了半天MySQL索引,结果面试官黑脸让我回家等结果...

V-xin:ruyuanhadeng获得600页原创精品文章汇总PDF 目录 1、面试真题2、面试官心理分析3、面试题剖析 1、面试真题 MySQ索引的原理和数据结构能介绍一下吗?b树和b-树有什么区别?MySQL聚簇索引和非聚簇索引的区别是什么?他们分别是…

影响网站排名的4个因素,教你提高网站排名的方法

我们优化网站的目的是,使网站的排名靠前,让更多的用户看到并访问网站,达到营销的效果。网站排名靠前,可以提高企业品牌的知名度,对网站是非常有益的。在网络多变的环境下,影响网站排名有哪些因素呢&#xf…

JAVA使用springboot整合佳博标签打印机(三)

在JAVA使用springboot整合佳博标签打印机(二)的文章中使用的是花生壳进行的内网穿透 花生壳内网穿透会有异常情况,因为使用的是花生壳免费版本的内网穿透,可能会有服务异常的情况出现,免费服务没有保障 优化方案使用NGINX替换花生壳来实现内网穿透 准…

从头开始实现一个留言板-README

前言 仓库地址:da1234cao/RestFulAPIDemo 由于我没做过C服务器的开发,没有这方面的工程经验,所以代码中,大概率有一些我意识不到的问题,欢迎提issue。 PS: 代码使用C实现restful接口,给前端提供数据读取…

如何封装一个实用的上传组件

前言 马上放假了,时间上相对宽裕,对最近做的东西进行一些总结。今天我们来看一个非常实用的组件,上传组件 我们先从组件的定位、组件的应用场景、组件的特性几个方面进行归纳 定位: 对于上传组件,基础的组件功能属…

【C++】-- 继承

目录 继承的概念及定义 继承的概念 继承的定义 定义格式 继承基类成员访问方式的变化 基类和派生类对象赋值转换 子类对象可以赋值给父类对象/指针/引用 派生类对象赋值给基类的对象 派生类对象赋值给基类的指针 派生类对象赋值给基类的引用 继承中的作用域 派生类的默认成员函…

IM开源项目OpenIM部署文档-从准备工作到nginx配置

IM开源项目OpenIM部署文档-从准备工作到nginx配置 2022-11-14 22:27OpenIM 一、准备工作 运行环境 linux系统即可, Ubuntu 7.5.0-3ubuntu1~18.04最优 图片视频文件存储 支持cos/MinIO https/wss协议 1. 需申请域名或者子域名(web im端登录注册及im…

C# HTML

一 HTML 超文本标记语言 在HTML当中存在着大量的标签,我们用HTML提供的标签,将要显示在网页中的内容包含起来。就构成了我们的网页。 二 CSS CSS 控制网页内容显示的效果。 HTMLCSS静态网页。 JSJquery 动态效果。 三 开始动手写HTML页面 ① 首先在…

XSS进阶二

目录实验目的预备知识实验环境实验步骤一实例四、换一个角度,阳光依旧实验步骤二实例五、限制了我的左手,我还有右手实验步骤三实例六、大胆去思考,小心去求证实验目的 1.深入理解xss工作原理。 2.怎么去绕过规则实现xss。 3.培养学生的独立…

Spring Cloud(十):Spring Cloud Skywalking

链路追踪组件选型 Zipkin是Twitter开源的调用链分析工具,目前基于springcloud sleuth得到了广泛的使用,特点是轻量,使用部署简单。Pinpoint是韩国人开源的基于字节码注入的调用链分析,以及应用监控分析工具。特点是支持多种插件&…