脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 节点排序实现代码

    javascript 节点排序实现代码

    为了让自定义选择选择出的节点集合尽可能接近原生API选出的结果，我们往往要对结果集进行排序，此顺序当然是从上到下，从左到右的DOM树顺序。
    2011-01-01
  • JavaScript直接调用函数与call调用的区别实例分析

    JavaScript直接调用函数与call调用的区别实例分析

    这篇文章主要介绍了JavaScript直接调用函数与call调用的区别,结合额实例形式分析了JavaScript直接调用函数与call调用的基本用法、区别及相关注意事项,需要的朋友可以参考下
    2020-05-05
  • 详解如何在JS代码中消灭for循环

    详解如何在JS代码中消灭for循环

    这篇文章主要介绍了详解如何在JS代码中消灭for循环，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • javascript实现函数柯里化与反柯里化过程解析

    javascript实现函数柯里化与反柯里化过程解析

    这篇文章主要介绍了javascript实现函数柯里化与反柯里化过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • JavaScript基于setTimeout实现计数的方法

    JavaScript基于setTimeout实现计数的方法

    这篇文章主要介绍了JavaScript基于setTimeout实现计数的方法,涉及javascript中setTimeout方法的使用技巧,需要的朋友可以参考下
    2015-05-05
  • window.onload的页面加载技巧

    window.onload的页面加载技巧

    大家仔细看下面两段代码，代码一的window.onload = doIt()函数后面有();而代码二的window.onload = doIt函数名后面没有括号。
    2008-09-09
  • JavaScript使用indexOf获得子字符串在字符串中位置的方法

    JavaScript使用indexOf获得子字符串在字符串中位置的方法

    这篇文章主要介绍了JavaScript使用indexOf获得子字符串在字符串中位置的方法,涉及javascript中indexOf方法操作字符串的技巧,需要的朋友可以参考下
    2015-04-04
  • javascript实现显示和隐藏div方法汇总

    javascript实现显示和隐藏div方法汇总

    本文章通过几个简单的实例告诉你如何来实例关于隐藏与显示div层及关闭层与隐藏的区别分析哦，有需要的同学可以参考一下本文章。
    2015-08-08
  • JavaScript switch语句使用方法简介

    JavaScript switch语句使用方法简介

    这篇文章主要介绍了JavaScript switch语句使用方法简介,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • javascript淘宝评星简版

    javascript淘宝评星简版

    基本js实现的星星投票选择功能代码。
    2010-07-07

最新评论