草庐IT

javascript - webpack 开发和生产构建模式有什么区别？

coder 2024-07-24 原文

在 Grunt 或 Gulp 中，我过去常常自己定义所有要求，例如:只应为生产缩小内容，只应在开发服务器中启用 livereload。

Webpack 通过 its -d and -p options 自行处理这个问题，切换加载器的 minimize 模式(大多数加载器都附带了相关的缩小器)、devtool 和类似的东西(我不知道到底是什么)。其中大部分“有效”。

但另一方面，也有一些库具有开发和生产模式。例如，React 会查看 process.NODE_ENV，如果是 production，则 disables the propTypes checking (稍后将被 minifier 剥离为死代码，从而减少包大小)。在 Webpack 中，一个 common way to do this is to use the DefinePlugin .

问题是，这个插件应该只在生产版本中启用。有些人甚至having 2 separate webpack configs因为那个。这似乎有些矫枉过正，因为大部分工作已经由 webpack 完成。我想避免这种情况。

为了找到更好的解决方案，我想了解当我使用 -d 或 -p 选项时到底发生了什么变化，以及它如何影响所有加载程序和插件。我没有在任何地方找到它的记录。现有文档仅提及“ Debug模式”或“监视模式”，而没有解释其实际含义。

请注意，我不是在要求做这个做那个的答案。一个好的、详细的解释将不胜感激。

最佳答案

快捷方式

就像你说的，-d 是 --debug --devtool source-map --output-pathinfo 的快捷方式，其中:

  1. --debug 激活加载程序的 Debug模式，其行为取决于每个加载程序。您可以通过 param { debug: true } 在您的 webpack.config.js 中激活它
  2. --devtool 基本上允许通过参数 { devtool: "sourcemap"} 为您的文件选择源映射类型，或者如果您使用 webpack@2: { devtool: 'eval-cheap-module-source-map' }( See all options )
  3. --output-pathinfo 会将原始文件路径写入 webpack 的 require 中，如下所示:__webpack_require__(/* ./src/containers/App/App.js */15)。
    您可以通过以下方式激活它:{ output: { pathinfo: true } }

第二个快捷方式，-p 代表--optimize-minimize --optimize-occurence-order 其中:

  1. --optimize-minimize 会将 webpack.optimize.UglifyJsPlugin 添加到您的模块插件中，这将缩小您的代码(删除空格、压缩变量名和其他优化)

  2. --optimize-occurence-order 会将 webpack.optimize.OccurenceOrderPlugin 添加到插件列表，这将分配您最常用的依赖项较低的 id，因此代码会更小。

    例如:您在每个文件中都导入了 react，webpack 将尝试像那样要求它 __webpack_require__(1); 而不是 __webpack_require__(1266);

放在一起

因此，在您的情况下，如果您有 webpack.config.js，您可以像这样更改它:

var webpack = require('webpack');
var webpackConfig = {
   // here goes your base config
};

// -d shortcut analogue
if (process.env.NODE_ENV === 'development') {
  webpackConfig.debug = true;
  webpackConfig.devtool = 'sourcemap';
  webpackConfig.output.pathinfo = true;
}

// -p shortcut analogue
if (process.env.NODE_ENV === 'production') {
  webpackConfig.plugins.push(new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
  }));
  webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin());
  webpackConfig.plugins.push(new webpack.optimize.OccurenceOrderPlugin());
}

module.exports = webpackConfig;

If you want to look at actual parsing of these params, look at https://github.com/webpack/webpack/blob/master/bin/convert-argv.js#L19

关于javascript - webpack 开发和生产构建模式有什么区别？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37208950/

javascriptwebpackcodestrongproduction-environment

有关javascript - webpack 开发和生产构建模式有什么区别？的更多相关文章

  1. ruby - 为什么我可以在 Ruby 中使用 Object#send 访问私有(private)/ protected 方法？ - 2

    类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc

  2. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  3. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  4. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  5. ruby-on-rails - 建模收藏夹 - 2

    我希望将Favorite模型添加到我的User和Link模型。业务逻辑用户可以有多个链接(即可以添加多个链接)用户可以收藏多个链接(他们自己的或其他用户的)一个链接可以被多个用户收藏，但只有一个所有者我对如何为这种关联建模以及在模型就位后如何创建用户收藏夹感到困惑？classUser 最佳答案 下面的数据模型怎么样:classUser:destroyhas_many:favorite_links,:through=>:favorites,:source=>:linkendclassLink:destroyhas_many:favor

  6. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

    为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

  7. ruby - 使用 C 扩展开发 ruby​​gem 时，如何使用 Rspec 在本地进行测试？ - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时，我会遵循TDD的过程，我会写一个失败的规范，然后处理代码直到它通过，等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb，如何运行我的规范并仍然加载我的C扩展？当我更改C代码时，我需要采取哪些步骤来重新编译代码？这可能是个愚蠢的问题，但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时，我确实得到了一个Makefile(在整个项目的根目录中)，然后当

  8. ruby - ruby 中的 TOPLEVEL_BINDING 是什么？ - 2

    它不等于主线程的binding，这个toplevel作用域是什么？此作用域与主线程中的binding有何不同？>ruby-e'putsTOPLEVEL_BINDING===binding'false 最佳答案 事实是，TOPLEVEL_BINDING始终引用Binding的预定义全局实例，而Kernel#binding创建的新实例>Binding每次封装当前执行上下文。在顶层，它们都包含相同的绑定(bind)，但它们不是同一个对象，您无法使用==或===测试它们的绑定(bind)相等性。putsTOPLEVEL_BINDINGput

  9. ruby - Infinity 和 NaN 的类型是什么？ - 2

    我可以得到Infinity和NaNn=9.0/0#=>Infinityn.class#=>Floatm=0/0.0#=>NaNm.class#=>Float但是当我想直接访问Infinity或NaN时:Infinity#=>uninitializedconstantInfinity(NameError)NaN#=>uninitializedconstantNaN(NameError)什么是Infinity和NaN？它们是对象、关键字还是其他东西？ 最佳答案 您看到打印为Infinity和NaN的只是Float类的两个特殊实例的字符串

  10. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

随机推荐