webpack5基础使用（2）-生产环境使用

已于 2023-08-25 17:57:19 修改
阅读量380 收藏
点赞数
分类专栏： 大杂烩 文章标签： webpack 前端
于 2022-07-22 15:22:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lalala_dxf/article/details/125632592
版权

文章目录

webpack5基础

1、生产环境介绍

生产环境是开发完代码后，需要将得到的代码部署上线，这个模式下主要对代码进行优化，让其运行性能更好。优化主要从这两个角度出发：
1、优化代码运行性能
2、优化代码打包速度

2、生产模式准备

文件目录

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

将配置文件都放在config目录下，其中webpack.dev.js是开发模式配置文件，webpack.prod.js是生产模式配置文件

webpack.dev.js文件内容

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: undefined, // 开发模式没有输出，可以不指定输出目录
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        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: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  // 开发服务器：用来实时更新打包内容
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  mode: "development",
};

webpack.prod.js文件内容

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js", // 入口文件
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        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: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  
  // 生产模式
  mode: "production",
};

运行命令配置

  • 运行生产模式的指令
npx webpack --config ./config/webpack.prod.js
  • 运行开发模式的指令
npx webpack serve --config ./config/webpack.dev.js
  • 配置运行指令
    为了方便运行不同模式的指令，可以将指令定义在 package.json 中 scripts 里面，用于简化运行命令
// package.json
{
  // 其他省略
  "scripts": {
    "start": "npm run dev",
    "dev": "npx webpack serve --config ./config/webpack.dev.js",
    "build": "npx webpack --config ./config/webpack.prod.js"
  }
}

简化后的指令就变为

开发模式：npm start 或者 npm run dev
生产模式：npm run build

3、css处理

3.1 提取css成单独文件

如果Css 文件被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式，这样就会造成先执行完js代码再执行css代码，从而导致闪屏现象，使得用户体验不好，解决方式就是将css抽出来单独形成一个css文件，通过link标签加载。

  • 1、下载包
npm i mini-css-extract-plugin -D
  • 2、配置webpack.prod.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        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: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
  mode: "production",
};

使用MiniCssExtractPlugin插件提取css，并且注意要将rules中其他样式的模块中添加MiniCssExtractPlugin.loader，也就是将style-loader替换为MiniCssExtractPlugin.loader

  • 3、运行
npm run build

3.2 不同浏览器样式兼容性处理

  • 1、下载包
npm i postcss-loader postcss postcss-preset-env -D
  • 2、配制文件修改
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "less-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
          "stylus-loader",
        ],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        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: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],

  mode: "production",
};
  • 3、控制兼容性
    在package.json中添加browserlist控制样式的兼容性
{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}

3.3 合并相同内容配置

通过将相同部分代码封装成一个函数来合并配置，使用的时候调用函数即可

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 获取处理样式的Loaders
const getStyleLoaders = (preProcessor) => {
  return [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", // 能解决大多数样式兼容性问题
          ],
        },
      },
    },
    preProcessor,
  ].filter(Boolean); // filter的作用是将不需要用到的配置过滤掉
};

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "../dist"), // 生产模式需要输出
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true,
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: getStyleLoaders(),
      },
      {
        test: /\.less$/,
        use: getStyleLoaders("less-loader"),
      },
      {
        test: /\.s[ac]ss$/,
        use: getStyleLoaders("sass-loader"),
      },
      {
        test: /\.styl$/,
        use: getStyleLoaders("stylus-loader"),
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        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: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
  ],
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};

3.4 css压缩

  • 安装插件
npm i  css-minimizer-webpack-plugin --save-dev

-webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
	// ...
    plugins: [
		// ...
		// 提取css成单独文件
	    new MiniCssExtractPlugin({
	      // 定义输出文件名和目录
	      filename: "static/css/main.css",
	    }),
	    new MiniCssExtractPlugin(),
	};
}
持久的棒棒君
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue打包前优化
Wen_Tao98的博客
03-10 345
打包优化 项目开始时webpack配置 vue-cli3以后，我们修改webpack配置，需要自己在项目根路径下创建vue.config.js文件。 一、 配置 proxy 跨域 使用vue-cli发开项目，在本地开发环境中，如果遇到跨域的问题。可以通过配置proxy的方式，解决跨域问题： module.exports = { devServer: { open: false, // 自动启动浏览器 host: '0.0.0.0', // localhost port: 6060,
Webpack配置全解析（基础篇）
最新发布
2401_84435152的博客
04-29 1620
我们也可以在项目目录新建一个html引入打包后的bundle.js文件查看效果。配置文件命令行的打包方式仅限于简单的项目，如果我们的项目较为复杂，有多个入口，我们不可能每次打包都把入口记下来；因此一般项目中都使用配置文件来进行打包；
webpack5开发环境和生产环境配置
welcome to my blog!
06-28 497
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
webpack5 学习（十三）—— 生产环境
且听风吟的博客
03-10 567
在Webpack4.0中，通过mode指定环境，用于配置运行环境。 mode的值可以为development，表示的是开发模式，或者是production，表示的是生产模式。 webpack 会将 production 作为 mode 的默认值去设置。 development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。 在开发环境中，需要：强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module re
webpack学习之5.环境配置
皮蛋很白的博客
05-02 472
环境 项目一般要配置两个环境： 开发环境 development ：配置侧重于实时重载、模块热替换HMR、便捷的source map等，在本地搭建服务器运行。 生产环境 production ：配置侧重于文件压缩、轻量的source map、其他发布配置等，打包上传到服务器运行。 遵循逻辑分离，通常建议为每个环境编辑彼此独立的webpack配置。 遵循不重复原则，我们还要保留一个“通用”的配置。 ...
Webpack5 process is not defined
zshsats博客
03-28 1539
Webpack5 process is not defined
webpack-----视频讲解
09-23
- **生产环境配置**：代码分割、按需加载、压缩、优化，提高性能。 - **多页应用配置**：处理多个入口文件，生成对应HTML文件。 - **库或组件开发**：配置libraryTarget和libraryExport，使代码可被其他项目作为...
webpack-develop.zip
11-01
10. **生产环境优化**：在构建生产版本时，Vue CLI 3会自动应用各种优化策略，如代码压缩、去除console语句、Tree Shaking等，以提高应用性能和加载速度。 这个"webpack-develop.zip"压缩包中的内容应该包括了基本...
webpack的配置和插件的使用介绍代码
12-25
Webpack 是一个现代JavaScript应用程序的模块打包工具，它能够将各种资源如JavaScript、CSS、图片等文件打包成一个或多个优化过的静态资源，便于部署到生产环境。本教程将深入讲解Webpack的配置和插件的使用。 一、...
html-webpack-inject-env-plugin:添加将环境变量注入到window.env下的浏览器全局空间中的功能，以便在运行时获取它们
05-01
这个功能在开发JavaScript应用时非常实用，尤其是在进行前后端分离或者构建多环境版本（如开发、测试、生产环境）的应用时。 首先，我们需要理解Webpack的基本概念。Webpack是一个模块打包工具，它将JavaScript、...
webpack5:webpack5基础配置vue框架
04-17
5. **Improved Tree Shaking**：增强tree shaking效果，进一步减少生产环境代码体积。 ### 配置Vue与Webpack5 创建一个新的Vue项目，可以使用Vue CLI，它已经内置了Webpack5配置。如果没有安装Vue CLI，可以使用...
webpack5升级踩坑（process、Buffer is not defined）
张兴华的博客
03-30 1130
执行提示@types/node 版本和ts版本问题，https://www.npmjs.com/package/@types/node?activeTab=versions 可查看版本对应的ts版本。
webpack5 基础知识篇
wxid_mtnujb6ipc0322的博客
04-30 511
本篇为webpack基础篇，包含webpack的概念.资源打包配置、js/css的兼容性配置等 一、webpack是什么？ webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 四个核心概念 入口(entry) 输出(output) loader 插件(plugins) 在这里对webpack的四个核心概念就不做多余的描述，详情课参考官网：https://www.webpackjs.com/concepts/ 二、webpack 安装 npm ini
webpack5 基础配置
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
12-29 1080
利用webpack5 打包 html，优雅书写支持多语言的利于 SEO 优化的官网
[万字逐步详解]使用 webpack 打包 vue 项目（优化生产环境）
欢欢的博客
07-14 442
[万字逐步详解]使用 webpack 打包 vue 项目（优化生产环境） 之前在 [万字逐步详解]使用 webpack 打包 vue 项目（基础生产环境） 中比较详尽的手把手带着过了一遍 production 环境的部署，以及在 [万字逐步详解]使用 webpack-dev-server + ESLint 配置 vue 项目的开发环境中过了一遍使用 webpack-dev-server 配置开发环境，以及使用 ESLint 去提高代码质量的过程。 webpack 配置最后一节就讲一下怎么提高生产环境中打.
webpack打包8之生产环境和开发环境
qq_40922656的博客
09-06 487
我们程序是要区分环境的，生产环境和开发环境。开发环境是在本地运行，而生产环境是要产出，运行在服务器给用户使用的代码，因此两者还是有一定区别的，比如打包后的文件在生产环境要尽可能的小，逻辑代码分离，优化静态资源（压缩图片等） 但是两个环境的很多配置还是可以共用的，比如entry oupput module等，因此可以把这些公共代码抽离出来放到一个独立文件进行合并，可以依赖webpack-merge工具来合并。 1、安装依赖 yarn add webpack-merge -D 2、开始拆分webpack.co
webpack知识点下
weixin_44956916的博客
12-21 356
十六、自动编译打包运行 1)安装 cnpm install webpack-dev-server -D 2）代码 devServer:{ open:true,//在浏览器中开发项目 openPage:"home.html",//默认会打开index.html文件，但是我们更改为home.html，所以要指定 host:"127.0.0.1",//设置打开的地址 port:"8000",//设置打开的端口号 } npx w
webpack自动化打包webpack-dev-server
jieyucx的博客
06-13 5176
是一个基于Node.js构建的Web服务器，它可以在本地开发环境中启动一个实时的Web服务器，并且能够自动编译并且刷新浏览器，为前端开发提供了很大的便利。支持热模块替换（HMR），即在应用程序运行中更新模块而无需刷新整个页面，它还提供了一些其它的特性包括压缩、编译、转换、代码分离等等。通常用来搭建本地开发环境，而部署时则需要使用其它的Web服务器。
webpack基础篇（七）：拆分开发环境和生产环境配置
知之为知之，不知为不知
12-02 1027
我们手工的调整 `mode` 选项，可以实现`生产环境`和`开发环境`的切换，但很多配置在生产环境和开发环境中存在不一致的情况，比如开发环境没有必要设置缓存，生产环境还需要设置公共路径等等。 拆分开发环境和生产环境，让打包更灵活。
Webpack5入门到精通：从基础到高级实战
课程还涵盖了Babel的使用，代码分离策略，缓存优化，以及如何拆分开发和生产环境的配置。此外，高级部分涉及到提升开发效率的方法，如Source Map、DevServer、模块热替换、ESLint和Git Hooks的实践。" Webpack是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值