首页 > 网络编程 > JavaScript > node.js > Webpack搭建开发环境并打包

一会带你学会用Webpack搭建开发环境并打包代码

2023-08-29 08:58:43 作者：小周不摆烂

这篇文章主要给大家介绍了关于如何用Webpack搭建开发环境并打包的相关资料,webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler),需要的朋友可以参考下

搭建开发环境

问题：之前改代码，需重新打包才能运行查看，效率很低

开发环境：配置 webpack-dev-server 快速开发应用程序

作用：启动 Web 服务，自动检测代码变化，热更新到网页

注意：dist 目录和打包内容是在内存里（更新快）

步骤：

1. 下载 webpack-dev-server 软件包到当前项目

2. 设置模式为开发模式，并配置自定义命令

3. 使用 npm run dev 来启动开发服务器，试试热更新效果

打包模式

打包模式：告知 Webpack 使用相应模式的内置优化

分类：

设置： 方式1：在 webpack.config.js 配置文件设置 mode 选项

方式2：在 package.json 命令行设置 mode 参数

注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置

打包模式的应用

需求：在开发模式下用 style-loader 内嵌更快，在生产模式下提取 css 代码

方案1： webpack.config.js 配置导出函数，但是局限性大（只接受 2 种模式）

方案2：借助 cross-env （跨平台通用）包命令，设置参数区分环境

步骤：

1. 下载 cross-env 软件包到当前项目

2. 配置自定义命令，传入参数名和值（会绑定到 process.env 对象下）

3. 在 webpack.config.js 区分不同环境使用不同配置

4. 重新打包观察两种配置区别

方案3： 配置不同的 webpack.config.js （适用多种模式差异性较大情况）

前端-注入环境变量

需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效

问题：cross-env 设置的只在 Node.js 环境生效，前端代码无法访process.env.NODE_ENV

解决：使用 Webpack 内置的 DefinePlugin 插件

作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式

DefinePlugin

DefinePlugin 允许在 编译时 将你代码中的变量替换为其他值或表达式。这在需要根据开发模式与生产模式进行不同的操作时，非常有用。例如，如果想在开发构建中进行日志记录，而不在生产构建中进行，就可以定义一个全局常量去判断是否记录日志。这就是 DefinePlugin 的发光之处，设置好它，就可以忘掉开发环境和生产环境的构建规则。

new webpack.DefinePlugin({  // 定义...});

Usage

传递给 DefinePlugin 的每个键都是一个标识符或多个以 . 连接的标识符。

如果该值为字符串，它将被作为代码片段来使用。
如果该值不是字符串，则将被转换成字符串（包括函数方法）。
如果值是一个对象，则它所有的键将使用相同方法定义。
如果键添加 typeof 作为前缀，它会被定义为 typeof 调用。

这些值将内联到代码中，从而允许通过代码压缩来删除冗余的条件判断

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'),
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1',
  'typeof window': JSON.stringify('object'),
  'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
});