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 模式内容请搜素我们以前的文章或下面相关文章，希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈webpack devtool里的7种SourceMap模式

    浅谈webpack devtool里的7种SourceMap模式

    我们先来看看文档对这 7 种模式的解释: 模式 解释 eval 每个module会封装到 eval 里包裹起来执行,并且会在末尾追加注释 //@ sourceURL. source-map 生成一个SourceMap文件. hidden-source-map 和 source-map 一样,但不会在 bundle 末尾追加注释. inline-source-map 生成一个 DataUrl 形式的 SourceMap 文件. eval-source-map 每个module会通过eval()来执

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

    模式(mode) 提供 mode 配置选项,告知 webpack 使用相应模式的内置优化. 用法 只在配置中提供 mode 选项: module.exports = { mode: 'production' }; 或者从 CLI 参数中传递: webpack --mode=production 支持以下字符串值: 1.development 会将 process.env.NODE_ENV 的值设为 development.启用 NamedChunksPlugin 和 NamedModulesPl

  • Android中mvp模式使用实例详解

    MVP 是从经典的模式MVC演变而来,它们的基本思想有相通的地方:Controller/Presenter负责逻辑的处理,Model提供数据,View负 责显示.作为一种新的模式,MVP与MVC有着一个重大的区别:在MVP中View并不直接使用Model,它们之间的通信是通过Presenter (MVC中的Controller)来进行的,所有的交互都发生在Presenter内部,而在MVC中View会从直接Model中读取数据而不是通过 Controller. 在MVC里,View是可以直接访问

  • 在 webpack 中使用 ECharts的实例详解

    Webpack 是目前比较流行的模块打包工具,你可以在使用 webpack 的项目中轻松的引入和打包 ECharts,这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用. npm 安装 ECharts 在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的,从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package. 你可以使用如下命令通过 npm 安装 ECharts npm instal

  • Java中Builder模式的实现详解

    前言 本文主要给大家介绍了关于如何实现Builder模式,大家在构建大对象时,对象的属性比较多,我们可以采用一个构造器或者使用空的构造器构造,然后使用setter方法去设置.在使用者使用这些方法时,会很多冗长的构造器参数列表或者setter方法.我们可以使用Builder模式来简化大对象的构造,提高代码的简洁性,同时提高使用者的编码体验. 下面我们将介绍在Java8之前.使用极简代码利器Lombok.Java8之后的Builder模式. Pre Java8 我们先来看下在Java8之前的Buil

  • JS中正则表达式全局匹配模式 /g用法详解

    本文章来详细介绍js中正则表达式的全局匹配模式 /g用法,代码如下: var str = "123#abc"; var re = /abc/ig; console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出false console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出false 在创建正则表达式对象时如果使用了"g&q

  • Java 中桥接模式——对象结构型模式的实例详解

    Java 中桥接模式——对象结构型模式的实例详解

    Java  中桥接模式--对象结构型模式的实例详解 一.意图 将抽象部分与它的实现部分分离,使他们都可以独立的变化. 二.适用性 以下一些情况使用Bridge模式 你不希望在抽象和它的实现部分之间有一个固定的绑定关系.例如这种情况可能因为,在程序运行时刻实现部分应可以被选择或者切换. 类的抽象以及它的实现都应该可以通过生成子类的方法加以扩充.这时Bridge模式使你可以对不同的抽象接口和实现部分进行组合,并分别对他们进行扩充. 对一个抽象的实现部分的修改应对客户不产生影响,即客户代码不必重新编译

  • 发布订阅模式在vue中的实际运用实例详解

    订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态. 比如addEventListener 这个api就是个发布订阅模式 如果用过vue的同学,可以把他类比于 watch 下面我们看一个例子 var observe={ fnsObj:{}, // 订阅方法 on:function(key,fn){ if(!observe.fnsObj[key]){ observe.fnsObj[key]

  • Vue-router中hash模式与history模式的区别详解

    Vue-router中hash模式与history模式的区别详解

    VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,这个题其实就是考验你的开发经验是否属实. 小白回答:hash模式url带#号,history模式不带#号. 大牛解答: 形式上:hash模式url里面永远带着#号,开发当中默认使用这个模式.如果用户考虑url的规范那么就需要使用history模式,因为history模式没有#号,是个正常的url,适合推广宣传: 功能上:比如我们在开发app的时候有分享页面,那么这个分享出去的页面就是用vue或是react做的,咱们把这个

  • Java  中桥接模式——对象结构型模式的实例详解

    Java  中桥接模式——对象结构型模式的实例详解

    Java  中桥接模式--对象结构型模式的实例详解 一.意图 将抽象部分与它的实现部分分离,使他们都可以独立的变化. 二.适用性 以下一些情况使用Bridge模式 你不希望在抽象和它的实现部分之间有一个固定的绑定关系.例如这种情况可能因为,在程序运行时刻实现部分应可以被选择或者切换. 类的抽象以及它的实现都应该可以通过生成子类的方法加以扩充.这时Bridge模式使你可以对不同的抽象接口和实现部分进行组合,并分别对他们进行扩充. 对一个抽象的实现部分的修改应对客户不产生影响,即客户代码不必重新编译

  • Vue 中使用 typescript的方法详解

    什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescript npm install -g ty

随机推荐