webpack4.x如何打包

这篇文章将为大家详细讲解有关webpack4.x如何打包，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联致力于互联网品牌建设与网络营销，包括成都网站制作、成都网站设计、外贸营销网站建设、SEO优化、网络推广、整站优化营销策划推广、电子商务、移动互联网营销等。创新互联为不同类型的客户提供良好的互联网应用定制及解决方案，创新互联核心团队十年专注互联网开发，积累了丰富的网站经验，为广大企业客户提供一站式企业网站建设服务，在网站建设行业内树立了良好口碑。

一、全局安装 webpack-cli 脚手架

npm install webpack-cli -g

二、新建一个项目wp，并在wp目录下初始化一个package.json文件。

npm init -y

在wp目录下新建一个src目录，并在该目录下新建一个index.js 作为入口文件

webpack4.x 给我们提供了两种打包模式：

development 为开发模式
production 为生产模式，打包出的 main.js 代码自动压缩

我们可以直接使用命令 webpack --mode development 进行开发模式打包

我们使用生产模式webpack --mode production 打包

此时代码已经被压缩。

不管哪种模式，我们每次打包都使用 webpack --mode development 或者 webpack --mode production 都有点麻烦，我们可以修改下package.json文件里面的 scripts 属性：

"dev": "webpack --mode development",
"build: "webpack --mode production"

最后我们就可以使用 npm run dev 进行开发模式打包，使用 npm run build 进行生产模式打包。

关于“webpack4.x如何打包”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。