【Webpack】生产模式和开发模式

已于 2024-09-25 15:06:44 修改
阅读量925 收藏 6
点赞数 6
分类专栏： 前端工程化 文章标签： webpack javascript 前端
于 2024-02-17 17:30:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/XiugongHao/article/details/136140229
版权

生产模式介绍

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

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

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

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

生产模式和开发模式

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

1. 文件目录

├── 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 (包的依赖管理配置文件)

2. 修改 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 目录中
    // 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"),
    }),
  ],
  // 其他省略
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  mode: "development",
};

运行开发模式的指令：

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

3. 修改 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"),
    }),
  ],
  // devServer: {
  //   host: "localhost", // 启动服务器域名
  //   port: "3000", // 启动服务器端口号
  //   open: true, // 是否自动打开浏览器
  // },
  mode: "production",
};

运行生产模式的指令：

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

Webpack 命令中的 --config 选项用于指定 webpack 配置文件的路径。默认情况下，Webpack 会寻找项目根目录下的 webpack.config.js 文件作为配置文件。如果你需要使用不同名称或位置的配置文件，可以通过 --config 选项来指定。

4. 配置运行指令

为了方便运行不同模式的指令，我们将指令定义在 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

总结：在 Webpack 中切换开发环境和生产环境

1）创建两个单独的 Webpack 配置文件：一个用于开发环境（如 webpack.dev.js），另一个用于生产环境（如 webpack.prod.js）。每个配置文件包含特定环境下的依赖和优化。

2）Webpack 通常通过 NODE_ENV 环境变量来区分当前的运行环境。开发环境下，设置为 “development”；生产环境设置为 “production”。在 package.json 中使用不同的 npm 脚本来执行不同的配置文件。例如：

"scripts": {
  "start": "NODE_ENV=development webpack serve --config webpack.dev.js",
  "build": "NODE_ENV=production webpack --config webpack.prod.js"
}

3）利用 DefinePlugin 插件来定义全局常量，使得在编写代码时能够依据环境变量做出不同的行为。比如：

const webpack = require('webpack');

module.exports = {
  // ... other configurations
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
};

开发环境和生产环境的配置文件通常会有以下不同：

  • 开发环境（webpack.dev.js）：
    • 启用 source-map 以便调试
    • 开启 Watch Mode
    • 启用 Hot Module Replacement（HMR）
  • 生产环境（webpack.prod.js）：
    • 启用代码压缩（如使用 TerserWebpackPlugin）
    • 开启 Tree Shaking
    • 添加 Chunk Splitting 以优化加载速度

这样，Webpack 就能根据不同的环境变量构建出适合开发或者生产环境的代码。

此外，还有一些可以注意。

使用 merge 函数来管理 Webpack 配置。通过 webpack-merge 包，可以将公共配置和环境特定的配置合并在一起，提高配置的可维护性：

复制代码
// webpack.common.js
module.exports = {
  // common configurations
};

// webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'development',
  // specific dev configurations
});

// webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
  mode: 'production',
  // specific prod configurations
});

可以使用 dotenv-webpack 插件来更方便地管理环境变量。这个插件允许将环境变量存储在 .env 文件中，并在 Webpack 构建过程中注入，简化环境配置的流程。

秀秀_heo
关注
专栏目录
webpack打包8之生产环境和开发环境
qq_40922656的博客
09-06 544
我们程序是要区分环境的，生产环境和开发环境。开发环境是在本地运行，而生产环境是要产出，运行在服务器给用户使用的代码，因此两者还是有一定区别的，比如打包后的文件在生产环境要尽可能的小，逻辑代码分离，优化静态资源（压缩图片等） 但是两个环境的很多配置还是可以共用的，比如entry oupput module等，因此可以把这些公共代码抽离出来放到一个独立文件进行合并，可以依赖webpack-merge工具来合并。 1、安装依赖 yarn add webpack-merge -D 2、开始拆分webpack.co
前端必备技能 webpack - 7. webpack开发模式devServer
qq_39506551的博客
11-20 656
前端必备技能 webpack - 7. webpack开发模式devServer前端必备技能 webpack - 7. webpack开发模式devServer一、使用 devServer二、相关配置 每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。   点这里查看 webpack 系列文章目录   博客中的代码位于 码云Git仓库，如有需要可自行前往下载。 前端必备技能 webpack - 7. webpack开发模式devServer   我们在前面已经对 devServe
webpack生产环境配置文件
肖帅的博客
03-25 217
webpack生产环境配置文件 webpack.config.js const { resolve } = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCssAssetsWebpackPlugin = require('optimize-css-ass...
4. webpack 生产环境的基本配置
小丕的博客
03-13 1620
第 4 章：webpack 生产环境的基本配置 开发环境： 源代码 -> webpack+自动化 -> bundle 开发环境中：比如 1. css -> loader -> js ； css经过loader加载会加入到js代码中；会使js代码体积变大；由于先加载js后再插入style标签，会存在闪现现象； .... 生产环境中： 以下操作放在开发环境的话会拖慢开发环境的构建速度，即打包速度较慢，影响开发效率； 4.1 提取 css 成单独文件 1. 下载安装包 2
webpack生产环境的基本配置
小R.的博客
12-07 1157
文章目录一、提取css成单独文件二、css兼容性处理三、压缩css四、js语法检查五、js兼容性处理六、js压缩七、html压缩八、生产环境配置 一、提取css成单独文件 二、css兼容性处理 三、压缩css 四、js语法检查 五、js兼容性处理 六、js压缩 七、html压缩 八、生产环境配置 ...
webpack开发和生产环境配置
Amethyst的博客
02-04 231
首先完成webpack基础配置 创建webpack.dev.config.js和webpack.prod.js文件后配置package.json如下： 安装依赖包：html-webpack-plugin、css-loader、style-loader、less-loader、file-loader(图片相关)、CleanWebpackPlugin(清理上一次的记录)、MiniCssExtractPlugin(抽离css文件) 我的src文件夹内容如下： index.html index.css i.
webpack之生产环境配置
weixin_50238437的博客
09-20 534
webpack之生产环境配置
一个自己写的webpack单入口demo支持开发模式和生产模式两种方式
08-11
在这个名为"webpack-simple-demo-master"的压缩包中，我们很可能会找到一个简单的Webpack配置示例，它演示了如何为一个项目设置单个入口点，并支持两种模式：开发模式和生产模式。 在Web开发中，Webpack 负责将源...
webpack 开发和生产并行设置的方法
10-17
在webpack.config.js文件中，可以通过process.env.type区分开发模式和生产模式。例如： ```javascript module.exports = { // 其他配置... output: { publicPath: isProduction ? "***" : "***" }, // 其他...
webpack入门（十一）-- 配置双环境（开发环境和生产环境配置）
weixin_43516605的博客
10-25 699
webpack双环境配置
14、webpack生产环境构建
gosenkle的专栏
05-27 287
1）代码压缩 虽然UglifyJSPlugin是代码压缩方面比较好的选择，但是还有一些其他可选择项。以下有几个同样很受欢迎的插件： BabelMinifyWebpackPlugin ClosureCompilerPlugin 如果决定尝试以上这些，只要确保新插件也会按照tree shake指南中所陈述的，具有删除未引用代码(dead code)的能力足矣。 2）source map...
使用webpack打包代码——生产环境打包
m0_63238326的博客
10-14 634
在我们每次打包的时候（npm run dev），都是按照最新的 src 目录下的内容进行打包的，当你修改了 src目录 下的文件时，需要手动删除dist 目录，然后在进行最新一次的打包，生成最新的 dist 目录。使用 Webpack 打包代码的主要原因是将多个模块化的代码文件打包成一个或多个单独的文件，以便在浏览器中加载和执行。运行命令后，会默认生成一个叫做 dist 的目录，默认会把打包结果生成的 main.js 放在这个目录中。// title 就是生成的html文件的title 标签里面的内容。
WEBPACK开发|生产环境配置（抽离公共部分）
最新发布
kjl536566的博客
05-25 1092
这是webpack4演示，webpack5有些插件不在推荐，
React多页面应用7(webpack4 生产环境配置)
oKeYue的博客
04-13 859
本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.042、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.083、React多页面应用3(webpack4 多页面实现)---2...
webpack定制化 环境配置[开发环境、生产环境、前后端半分离环境]
黑日里不灭的light
09-03 907
前提：webpack5及其对应配套内容下文环境，已经配置好了的，一定先阅读README.md，，
webpack基础配置（开发模式&&生产模式）
mkbird的博客
10-05 1763
上面的配置会使css文件打包在js文件中，会出现先加载js再加载css的情况，用户体验不好，因此我们使用插件来单独打包css，参考官网教程即可。实际上字体图标也不需要进行处理，引入css即可，但是我们想将字体资源打包到一个单独的文件夹下，这样就需要进行配置。output可以设置入口文件即index.js打包输出的文件名，因此我们配置此处就可以设置js文件的输出。前面的内容中，我们所有打包好的js都需要在html中引入，非常不方便，webpack为我们提供了插件。事实上，开发模式本身就不需要输出；
webpack学习笔记5:生产环境的构建
qq_28458369的博客
04-04 215
不同的环境应该编写不同的配置文件，为了不必在不同的配置文件里写重复的配置，我们提取相同的部分作为通用的配置文件，首先安装以下插件 npm install --save-dev webpack-merge 然后创建文件webpack.common.js，webpack.dev.js和webpack.prod.js分别表示通用配置文件，开发环境配置文件和生产环境配置文件。 webpack....
webpack学习之五,生产环境的搭建
guxiansheng1991的博客
02-08 546
这部分的学习可以不按照官网的开头(https://doc.webpack-china.org/guides/production/),可以搭建项目之后,按照如下文档,直接搭建生产环境 写在前面 生产环境的搭建是采用的复用配置文件的方式 1.需要使用的插件 npm install --save-dev webpack clean-webpack-plugin html-...
webpack设置为开发模式
08-20
要将webpack设置为开发模式，你可以在配置文件中设置`mode`属性为`development`。在webpack.config.js文件中，可以添加以下...这将告诉webpack将项目设置为开发模式，以便在构建过程中进行更多的调试和开发工具的支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秀秀_heo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值