对于Webpack的两种打包模式的讲解

打包模式

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

分类

文件名称	模式名字	特点	场景
开发模式	development	调试代码，实时加载，模块热替代等	本地开发
生产模式	production	压缩代码，资源优化，更轻量等	打包上线

设置方式

• 方法一 ：在 webpack.config.js 配置文件 mode 选项

//...
module.exports = {
    // ...
    mode : 'development'
}

• 方法二：在 package.json 命令行设置 mode 参数

"scripts" : {
    "build" : "webpack --mode=production",
    "dev" : "webpack serve --mode=development"
}

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

打包效果区别

生产模式: 将代码极致的压缩，体积更小

开发模式：代码会变成一块一块的，有一个地方更改打包只改一块地方，加载速度很快（更适合热加载）

结束语

感谢大家的阅读，希望这篇文章给你的启发，我们的开发环境此时已经搭建完成，如果你有任何的建议或问题，欢迎在评论区我们一起讨论

无论前方等待我们的是什么，让我们保持勇气和决心，一路向前！