脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → webpack 模式

webpack中的模式(mode)使用详解

 更新时间：2020年02月20日 11:22:50   作者：刘亦枫  
这篇文章主要介绍了webpack中的模式(mode)使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

模式(mode)

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

用法

只在配置中提供 mode 选项：

module.exports = {
 mode: 'production'
};

或者从 CLI 参数中传递：

webpack --mode=production

支持以下字符串值：

1.development

会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。

// webpack.development.config.js
module.exports = {
+ mode: 'development'
- plugins: [
-  new webpack.NamedModulesPlugin(),
-  new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}

2.production

会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

// webpack.production.config.js
module.exports = {
+ mode: 'production',
- plugins: [
-  new UglifyJsPlugin(/* ... */),
-  new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
-  new webpack.optimize.ModuleConcatenationPlugin(),
-  new webpack.NoEmitOnErrorsPlugin()
- ]
}

production模式下会启用UglifyJsPlugin插件（移除未使用的内容和文件压缩），分别用production和development打包，编译的区别：

1.development打包后，一些没有依赖的方法 变量 文件会保留，production则会移除。

2.production打包后，代码会进行压缩，比development的文件小。

到此这篇关于webpack中的模式(mode)使用详解的文章就介绍到这了,更多相关webpack 模式内容请搜素脚本之家以前的文章或下面相关文章，希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • javascript移出节点removeChild()使用介绍

    javascript移出节点removeChild()使用介绍

    这篇文章主要介绍了javascript节点操作移出节点removeChild()的使用,需要的朋友可以参考下
    2014-04-04
  • 详解JavaScript实现继承的五种经典方式(附图解)

    详解JavaScript实现继承的五种经典方式(附图解)

    JavaScript中的继承是一种机制,通过它可以创建一个对象,该对象可以享有另一个对象的属性和方法,本文将详细的为大家介绍实现继承的五种经典方式,感兴趣的小伙伴跟着小编一起来看看吧
    2023-08-08
  • 用js实现博客打赏功能

    用js实现博客打赏功能

    经常在一些博客中看到有一个打赏功能，本篇文章主要介绍了博客打赏功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2016-10-10
  • javascript代码简写的几种常用方式汇总

    javascript代码简写的几种常用方式汇总

    任何一种编程语言的简写小技巧都是为了帮助你写出更简洁、更完善的代码,让你用更少的编码实现你的需求,这篇文章主要给大家介绍了关于javascript代码简写的几种常用方式,需要的朋友可以参考下
    2021-08-08
  • 微信小程序swiper-dot中的点如何改成滑块详解

    微信小程序swiper-dot中的点如何改成滑块详解

    swiper组件是滑块视图容器,这篇文章主要给大家介绍了关于微信小程序swiper-dot中的点如何改成滑块的相关资料,实现以后的效果还是不错的,需要的朋友可以参考下
    2021-07-07
  • 理解JavaScript中的事件

    理解JavaScript中的事件

    理解JavaScript中的事件...
    2006-09-09
  • JavaScript构造函数举例详解

    JavaScript构造函数举例详解

    Javascript构造函数是非常强大的,它可能也是Javascript能被充分利用的特点之一,文中通过实例代码介绍的非常详细,这篇文章主要给大家介绍了关于JavaScript构造函数的相关资料,需要的朋友可以参考下
    2023-04-04
  • 详解JS数组方法

    详解JS数组方法

    这篇文章主要为大家介绍了JS的数组方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-11-11
  • JS实现网站换肤

    JS实现网站换肤

    这篇文章主要为大家详细介绍了JS实现网站换肤，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript中的Array 对象（数组对象）

    JavaScript中的Array 对象（数组对象）

    Array 对象用于在单个的变量中存储多个值。
    2016-06-06

最新评论