Webpack之不同模式的区分打包

最新推荐文章于 2024-01-04 09:19:55 发布

Meskjei

最新推荐文章于 2024-01-04 09:19:55 发布

阅读量1.1k

点赞数

分类专栏：前端 Webpack

本文链接：https://blog.youkuaiyun.com/hjc256/article/details/100116965

版权

本文介绍了Webpack在开发和生产环境中的不同配置，包括如何通过创建不同的配置文件（webpack.dev.js, webpack.prod.js）来区分打包，并实现代码复用。在开发模式下，Webpack通常与HMR结合，提供详细的错误信息；而在生产模式下，Webpack会启用Tree shaking和代码压缩。通过调整package.json中的scripts命令，可以方便地切换打包环境。进一步优化时，可以引入webpack-merge库来合并通用配置与特定环境的配置，减少代码冗余。" 42780785,1231135,C++实现复数类与快速傅里叶变换(FFT),"['编程', 'C++编程', '数值计算', '算法实现', 'FFT']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入

Webpack针对development和production两种模式各自有一些默认的配置，以及个人设置的一些配置。

例如在开发环境中，我们通常会使用devServer搭配HMR，而且错误信息也会更加全面。而到了生产环境时，Webpack则会默认开启Tree shaking，也会对代码进行压缩。

用过create-react-app的人肯定都知道这些脚手架工具针对不同的模式，也有不同的命令，例如：yarn start、yarn dev等。

初步的区分打包

新建两个文件，分别是：webpack.dev.js和webpack.prod.js。一个代表开发模式下打包所使用的配置文件，另一个则是生产环境下所使用的配置文件。

然后把原有的webpack.config.js内的内容拷贝到两个文件中去，对不同环境做差异化修改。例如，生产环境下就没必要使用devServer。最重要的当然还是修改mode。

接着对package.json进行修改，在script中添加两个命令：

"script":{
   
    ...,
    "dev": "webpack-dev-server --config ./webpack.dev.js",
    "build": "npx webpack --config ./webpack.prod.js"
}

这样我们就可以直接使用yarn dev或yarn build来对应不同环境下的打包。

更进一步的区分打包

上面的那样的区分打包有一个很显然的问题，就是拆分出来的两个配置文件重复代码太多了。

那么自然的，我们就会想到代码的复用，再拆分一个通用的配置，然后原有的两个配置文件就编写不同模式下针对性的配置，使用的使用两者进行融合即可。

webpack.dev.js：

const webpack = require('webpack');
const merge =

最低0.47元/天解锁文章