摘要：运行该语句会执行如下步骤使用进行文件压缩。设置环境变量，触发某些包，以不同的方式进行编译。在原始的源码中执行查找和替换操作。等同于表示任何出现的地方都会被替换为。提供函数用来合并配置对象当文件小于限制，会返回。
选项
1.devtool：通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试。
2.resolve.alias:创建 import 或 require 的别名，来确保模块引入变得更简单。取别名时在给定对象的键后的末尾添加 $，表示精准匹配，详见文档
3.resolve.extensions：自动解析确定的扩展，能够使用户在引入模块时不带扩展。
4.module.rules.options:传递给loader的参数。
命令语句webpack -p与webpack --optimize-minimize --define process.env.NODE_ENV=""production""等效。运行该语句会执行如下步骤：
使用 UglifyJsPlugin 进行 JS 文件压缩。
运行LoaderOptionsPlugin。
设置 NodeJS 环境变量，触发某些 package 包，以不同的方式进行编译。
webpack内置插件1.UglifyJsPlugin:运行 UglifyJS 来压缩输出文件。在命令行中指定 --optimize-minimize，或在 plugins 配置中添加使用。
2.DefinePlugin：在原始的源码中执行查找和替换操作。
--define process.env.NODE_ENV=""production""等同于
plugins:[
new webpack.DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("production")
})
]
表示任何出现 process.env.NODE_ENV的地方都会被替换为"production"。
3.HotModuleReplacementPlugin:webpack的内置HMR(模块热替换)插件。
4.CommonsChunkPlugin:是一个可选的用于建立一个独立文件(又称作 chunk)的功能，这个文件包括多个入口文件的公共模块。通过将公共模块拆出来，最终合成的文件能够在最开始的时候加载一次，便存起来到缓存中供后续使用。这个带来速度上的提升。new webpack.optimize.CommonsChunkPlugin(options)
5.NoEmitOnErrorsPlugin：在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。
插件1.html-webpack-plugin：用于生成一个html5文件，将输出的webpack包通过script标签插入body中。若输出的webpack中包含任何的css资源，则这些CSS将通过标签插入html的head中。
2.clean-webpack-plugin：用于在构建之前删除/清理你的构建文件夹。
3.webpack-merge：提供merge函数用来合并配置对象
url-loaderurl-loader当文件小于限制，会返回DataURL。可传递limit，mimetype，prefix三个参数。
为什么可以传递nameurl-loader的limit参数：如果文件大于限制（以字节为单位），则使用file-loader，并将所有参数传递给它。默认为无限制。
因此可以在options里面写上file-loader的一些参数，比如name
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91384.html
摘要：引言最近在学习，发现好多知识点，之前一点都没有接触过，如等等。使用本地安装，会存于文件夹内与属性内，更方便项目文件迁移以及协同开发等情况。 引言 最近在学习webpack，发现好多知识点，之前一点都没有接触过，如babel、core-js、browserslist等等。以前习惯了使用cli构建项目，很多东西不用考虑，拿来就用，这样的码农是不会有能力提升的，必须了解更多的知识点，才能成为...
摘要：新搭建的个人博客，本文地址学习笔记环境搭建本文的书写环境为，之后会补充下的差异创建学习目录初始化项目根据相关提示完善信息，入口文件安装相关包，并且使用也就是支持，需要包，因为我之前做个一些相关项目，所以部分包已经全局安装，比如等等，大家 新搭建的个人博客，本文地址：React学习笔记1：环境搭建 本文的书写环境为mac，之后会补充windows下的差异 1、创建学习目录 mkdir l...
摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。 前言 在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...
摘要：前言在上一篇文章中我介绍了学习前的准备工作，下面开始的学习。目标一般我们接触到的关于的文章，都是以解读官方文档为主，而且是针对单页面项目的应用。我先在假设要做一个多页面应用，该如何去通过打包。 前言 在上一篇文章中我介绍了学习webpack前的准备工作，下面开始webpack的学习。 *创建webpack-demo文件夹 $ mkdir webpack-demo $ cd webpac...
阅读 2027·2023-04-25 19:03
阅读 1200·2021-10-14 09:42
阅读 3364·2021-09-22 15:16
阅读 902·2021-09-10 10:51
阅读 1494·2021-09-06 15:00
阅读 2381·2019-08-30 15:55
阅读 452·2019-08-29 16:22
阅读 880·2019-08-26 13:49
