当前位置:首页 >web安全类 >【webpack】插件 plugins

【webpack】插件 plugins

2019-12-06 23:10:12 [健康] 来源:郁金网
版权声明:本文是博客作者的原创文章,遵循CC 4.0 by-sa版权协议 。请附上原始资料和本声明的链接以便重印。 链接到本文:https://blog.csdn.net/lanwuying/article/details/99945959插件是网络包的支柱功能 插件是为解决加载程序无法实现的其他事情而设计的。 webpack插件是一个带有apply属性的JavaScript对象 webpack编译器调用apply属性,编译器对象在整个编译生命周期中都是可访问的 例如,console LogonBuildWebPackPlugin . js的tap方法的第一个参数:类console LogonBuildWebPackPlugin { Apply(编译器){//CompilerHook//应该是插件名称编译器. hooks.run.tap(插件名称,编译= >日志(“webpack构建过程开始!”);});}}一些插件简介:name description progressive investiring plug将原始块划分为更小的块:chunkBabelMinifyWebpackPlugin使用babel-minify来压缩BannerPlugin在生成的每个块的顶部添加bannerCom。MonsChunkPlugin提取由块之间共享的通用模块CompressionWebpackPlugin预先准备的资源压缩版本 。CopyWebpackPlugin,它使用CONTEXTRACEPLACEMENTPlugin提供的访问服务CONTEXTRACEPLACEMENTPlugin来覆盖所需表达式的推理上下文,在编译时将单个文件或整个目录复制到DefinePlugin允许的构建目录中为了大大减少构建时间,配置的全局常量dllplug被单独打包,这是environment PlugIne中process.env key的一种简写方式。 ExtractTextWebpackPlugin从包中提取文本(CSS)到单独的文件hot module replacement插件支持热模块替换——HMR HTMLWebPackPlugin只需创建HTMl文件。对于服务器访问I18nWebpackPlugin,添加对包IgnorePlugin的国际化支持,从包中排除某些模块限制块计数插件,以设置块的最小/最大限制。微调和控制从webpack 1迁移到web pack 2的chunkLoaderOptionsPlugin插件,以确保在输出阶段块大小超过指定的限制NoEmitOnErrorsPlugin。跳过常规模块放置插件替换匹配正则表达式的资源NpmInstallWebpackPlugin在开发过程中自动安装缺失的依赖项提供插件而不导入/要求使用模块SourceMapDevToolPlugin以更精细的粒度控制源映射时遇到编译错误。EvalSourceMapDevToolPlugin以更精细的粒度控制eval源映射。UglifyjsWebpackPlugin可以通过node-zopfli控制项目PfliWebpackPlugin预压缩资源中UglifyJS的Zo版本,要了解更多第三方插件,请参见awesome-webpack列表。 用法案例:CommonSchunkPlugIn CommonSchunkPlugIn已从webpack v4 legato中删除 要了解如何在最新版本中处理块,请检查SplitChunksPlugin(插件配置过程更加方便和高效) 以元素-用户界面初始化项目为例来看供应商 根据您的webpack使用情况,有许多方法可以使用插件。 //package.json引入了依赖关系“dev dependencies”:{..." html-webpack-plugin": "2.24.1 "," webpack": "2.4.1 ",...}//webpack.config.js引入//conshtml web pack plugin = require(' html-web pack-plugin ')直接通过npm安装;//访问内置在webpack中的插件//CommonsChunkPlugin是webpack = require('webpack ')的插件之一;功能:这个插件用于提取块之间共享的公共模块 使用CommonsChunkPlugin从“应用程序捆绑包”中提取供应商对供应商捆绑包的引用,并用_ _ webpack _ require _ _ _()替换引用供应商的部分,调用节点应用程序接口(O(≘_∞)O ~,这是什么)“TODO”即使使用了节点应用程序接口,用户也应该在配置中传递插件属性。 不建议使用编译器. apply //some-node-script . js//access web pack runtime const web pack = required(' web pack ');const配置=必需('。/web pack . config . js’);让编译器= webpack(配置);编译器. apply(新webpack。progress PlugIn());编译器. run(函数(错误,统计){//...});您知道上面看到的例子与webpack本身的运行时非常相似吗 wepback源代码隐藏了大量使用示例,您可以在自己的配置和脚本中使用这些示例。 官方网站插件HtmlWebpackPlugin根据配置的入口和出口自动生成index.html,并将自动引入相关的依赖关系 如果您想了解HtmlWebpackPlugin插件提供的所有功能和选项,您应该熟悉HtmlWebpackPlugin存储库。 您还可以查看html-webpack-template,它提供了默认模板之外的一些附加功能。 您可能已经注意到,由于过去的指导方针和代码示例的遗留,我们的/dist文件夹非常混乱。 网络包生成文件并将其放在/dist文件夹中,但是网络包无法跟踪项目中实际使用的文件 通常,建议在每次生成之前清理/dist文件夹 ,这样只会生成使用的文件。 让我们满足这个要求。 清洁网络包插件是一个流行的管理插件,让我们安装和配置它 Config.js: const path =必需(' path ');const HtmlWebpackPlugin =必需(' HTMl-webpack-plugin ');+ const CleanWebpackPlugin =必需(“clean-webpack-plugin”);module.exports = {entry: {app:'。/src/index.js ',打印:'。/src/print.js'},插件:[+新的CleanWebpackPlugin(['dist'],新的HtmlWebpackPlugin({title:'输出管理'})],输出:{文件名:'[名称] 。现在运行npm运行生成并检查/dist文件夹。 如果一切顺利,你现在不应该看到旧文件,只看到构建后生成的文件!这个插件可以在项目的根目录下生成一个清单文件。通过文件的映射关系,我们可以知道webpack如何跟踪所有模块并将它们映射到输出包中 。 webpack-manifest-plugin//安装插件:npmnstall-save-devweb pack-manifest-plugin//在webpack.config.js中引入,大致如下:varmanifest plugin = required(' web pack-manifest-plugin ');出口= {//...插件:[新显式插件()//显式插件方法可以接受一些选项参数选项 ,例如//新显式插件(选项)];//3。可选参数如下:options.fileName表示要生成的文件的名称,默认值为manifest . JSON options . public path表示生成映射文件的路径。默认为output.publicPath。有关其他参数,请参见HTTPS://github.com/dance瑟伯/webpack-manifest-pluginohotmoduleplacement插件开发环境HMR启用:启用此功能实际上非常简单。 我们需要做的是更新webpack-dev-server的配置,并忽略以下正则表达式匹配模块:// requestRegExp在使用HMR插件IgnorePluginimport或要求在webpack中内置时匹配(测试)资源请求路径的正则表达式。 // contextRegExp(可选)匹配(测试)资源上下文(目录)的正则表达式 新网络包。忽略插件(请求正则表达式,[上下文正则表达式)示例:矩包例如,我们想要使用矩,一个格式化时间并支持多种国家语言的第三方依赖库。 从“时刻”//设置语言时刻.区域设置(“zh-cn”)导入时刻;让r =力矩()。结束(“一天”) 。from NoW();console . log(r);这样,打印时间是中文的,因为当我使用这个应用程序接口时,语言类型矩。地区是中文zh-cn 然而,尽管我已经将语言设置为中文 ,所有语言在打包时都会打包。 结果,包装非常大,包装速度慢。因此 ,最好少打包无用的依赖目录和包含。/locate/例如,矩的字段路径是各种语言的目录。/locate/zh-cn是使用ignorpluginlet web pack = require(“web pack”)的中文目录;插件:[//瞬间这个库,如果内容。/locale/ directory被引用,//将被忽略,并且不会打包到新的web包中。忽略插件(\。\ /locale/ ,/moment/)。]尽管我们忽略了包含。/locale/字段路径根据上述方法,但是,当我们使用它时,也无法显示中文,因此我们可以在此时手动从“时刻”/“所需语言包导入”时刻/locale/zh-cn”导入目录导入时刻。moment . locale(' zh-cn ');让r =力矩()。结束(“一天”)。from NoW();console . log(r);没关系 不仅可以显示中文,还可以忽略不必要的语言包。DllPluginDLLPlugin和DLLReferencePlugin被打包成以某种方式拆分包。同时,构建速度大大提高(dll是最简单、最粗糙和最有效的优化方法) 当使用Webpack打包时,我们希望将一些不经常更新的第三方库(如react和lodash)从我们自己的代码中分离出来。Webpack社区有两个方案,CommonsChunkPlugin和DLLPlugin 。对于CommonsChunkPlugin:webpack打包webpack时,我们实际上需要处理这些第三方库,但是在打包之后 ,我们可以将第三方库与我们自己的代码分开。 每次重新打包项目时,verdors都会重新打包,打包的chunkhash也会改变 ,导致每次发布时供应商的缓存都会失败。 这增加了用户的流量消耗和首次屏幕加载时间。 而DLLPlugin可以完全分离第三方代码,也就是说,一次只能打包项目自己的代码。 进口的第三方包装无需重新包装,无需更改。 dllplug的具体用法:/* *要使用dllplug,您需要创建一个新的配置文件。 因此,对于以这种方式打包的项目,通常有以下两个配置文件:webpack . config . jswebpack . dll . config . js让我们来看看webpack . dll . config . js */const webpack = require(' webpack ')常量库= '[名称] _ lib '常量路径= require('路径')模块。导出= {条目:{供应商:['reach ' ,' lodash ']//以上供应商,见某人有lib},输出:{文件名:'[名称} 。dll.js ',路径:' dist/',库},插件:[新webpack . dll plug(//执行上下文,对后续DllReferencePlugin上下文有用:_ dirname ,路径:path.join (_ dirname ,' dist/[名称]-manifest.json '),//这必须匹配输出. library选项上方的name: library}),],}//更改webpack.config.js文件常量webpack =必需(' web pack ')模块。导出= {条目:{应用程序:'。/src/index'} ,输出:{文件名:' app.bundle.js ' ,路径:' dist/',} ,插件:[新网页包。dllreReferencePlugin({ context:_ _ dirname,//下面的供应商使用LIBS清单:REQUIRE(')。/DIST/供应商-清单。JSON')]}/* *清单:要求('。/DIST/供应商-清单。这里的路径应该对应于 然后运行:*/$ webpack-configmwebpack . dll . config . js $ webpack-configmwebpack.config.js//,您的html文件被引用如下。<。/script>。< 。脚本src="/dist/app.bundle.js ">。<。/script>。/* *上述用法也有一些不便 ,例如在webpack.config.js中指定相应的manifest.json文件 此外,当需要更新动态链接库时,例如react被升级或添加了新的第三方库 ,它需要按如下方式手动编译 */$ webpack-config webpack.dll.config.js/**-非官方插件(不需要注意,没有缓存效果?)-由于上述问题,有一个基于官方DllReferencePlugin的dllllinkplugin。 链接如下:www.npmjs.com/package/dll-link-webpack-plugin使用这个插件。只需对web pack . config . js */const web pack = require(' web pack ')constllinkplug = require(' dll-link-web pack-plugin ')模块进行少量更改,导出= {//...插件:[新链接插件({ config:required(' webpack . dll . config . js '))]}/* *直接替换DllReferencePlugin,然后传入相应的dll配置文件 每次打包时 ,您只需要运行*/$网络包配置webpack.config.js/**来自动生成相应的供应商文件,并在需要更新时自动更新它。 */SplitChunkSplin默认情况下 ,SplitChunkSplin只影响按需加载的代码块,因为更改初始块会影响运行项目时HTML文件应该包含的脚本标记。 webpack将根据以下条件自动拆分代码块:将要共享的代码块或卷大于30KB(gz压缩前)的node _ mudules文件夹中的代码块按需加载代码块时并行请求的数量不超过5个,加载初始页面时并行请求的数量不超过3个//例如://file 1: impvue.jsimport 'vue '...//文件2:index.js//动态加载IMPvue。JSImport('。/IMPVUE’).../* *打包的结果将创建一个包含VUE的单独代码块,当调用包含impvue.js的原始代码块时,将并行请求该代码块 原因:1)来自node_modules文件夹的vue 2)vue卷超过30KB3)导入调用时的并行请求数为24)不影响初始页面加载*/我们这样做的原因是vue代码不会像您的业务代码那样经常更改,并且可以通过单独提取它来将其与业务代码分开缓存,从而大大提高效率 拆分块:{/* *拆分块属性用于选择要拆分的代码块。可选值为:“all”(所有代码块)“async”(按需加载的代码块)“initial”(初始化代码块)*/chunks:“async”,minSize: 30000。//模块的最小块:1,//模块的最小引用数量最大异步查询:5 ,//按需加载的最大并行请求最大初始化:3,//每个条目的最大并行请求自动命名限制:~ ',//文件名连接器名称:真,/**缓存组是一个有趣的特性:默认情况下 ,节点_模块中的模块将被打包到“供应商”中,引用两次以上的模块将被分配到“默认”``捆绑包'中 您也可以通过“优先级”设置优先级 */缓存组:{//缓存组供应商:{测试:/[ /]节点_模块[ /]/,优先级:-10},默认值:{minchunks: 2,优先级:-20。重新查看现有库:true}}}添加SplitChunksPlugin/** *为了便于演示,我们首先安装两个类库:lodash和axios,以及npm i lodash axios -S modify main.js引入lodash和axios并调用相应的方法:*/importmodal from '。/components/modal/modal“import” 。/assets/style/common . less ' import _ from ' lo dash ' import axios from ' axios ' const App = function(){ let div = document . create ElEMENT(' div ')div . SetAttribute(' id ',我想知道您是否想看看它 。内容:“内容”,页脚:“底部”})} constapp = newapp()控制台。日志(_ 。camel case(' foobar ')axios . get(' AAA ')/* *-使用SplitChunksPlugin不需要安装任何依赖项。只需添加优化属性:*/优化:{splitchunks: {chunks:' initial ' ,automatnamedemander:'。,到webpack.config.js缓存组中的配置对象:{供应商:{测试:/[ /]节点_模块[ /]/,优先级:1}},//运行时间块:{名称:入口点= > `清单。$ {entrypoint.name} `}}/* *配置runtimeChunk将为每个条目添加一个仅包含运行时的额外代码块,名称的值也可以是字符串,但这将为每个条目添加相同的运行时。当配置为返回当前条目对象的函数时,可以按条目设置不同的运行时间。 *//* *我们将安装另一个webpack-bundle分析器。该插件将清楚地显示打包后每个包所依赖的模块:简介:*/ConstBundleAnalyserPlugin =必需(“网络包-包-分析器”)。使用了bundleAnalyserPlugIn//。将它添加到插件数组:新的BundleAnalyzerPlugin()您可以在Webpack4的SplitchunksPlugin中看到这里提到的问题。横幅广告将横幅广告(注释/版权)添加到每个区块文件的标题中 新网络包 。横幅插件(选项)//选项:{横幅:字符串,//其值是字符串,并将作为注释RAW:布尔值存在。//如果该值为真,它将是直截了当的,不会用作注释条目Only:布尔值。//如果该值为真,则仅测试:字符串|正则表达式|数组,包括:字符串|正则表达式|数组,排除:字符串|正则表达式|数组将被添加到条目块文件中。}复制WebpackPlugin:复制静态文件将单个文件或整个目录直接从源目录复制到构建目录。//配置:一些参数新的copy WebPackPlugin([{发件人:路径 。解析(_ _ dirname,)../static’)被配置。收件人:config.build.assets子目录,忽略:[。*]},//忽略上面的静态目录。//让我们先看看这个。该文件是一些客户可以自己修改的配置//它是独立的,并且可以方便地修改{从:path . resolve(config . directory . root,Js ')'到:' sysconfig.js'},])打包项目:ExtracTextWebPackPlugin:CSS文件MiniCssExtractPlugin怎么样?const ExtractTextPlugin=必需(“extract-text-web pack-plugin”);模块。导出= {模块:{规则:[{测试:/\)。css$/,使用:extractTextplugin . extract({ fallback:" style-loader ",使用:" css-loader"})}]},插件:[新ExtractTextPlugin("styles.css "),/* *我认为我们的项目配置如下:新extractExplugin({ filename:utils . asset path(' CSS/[名称))。[·content hash]。CSS’),allchunks: true),*/]}它将移动*。在所有条目块中引用css来分离CSS文件。 因此,您的样式将不再嵌入到JS包中,而是被放入一个单独的CSS文件中(即styles.css) 如果您的样式文件很大 ,它会更早加载,因为CSS捆绑包将与JS捆绑包并行加载。 让我们来看看另一个与CSS优化(压缩)-优化-CSS-资产-web pack-插件:/* *这个插件可以接受以下配置(全部可选):assetnameregxp:regular,用于匹配要优化的资源的名称 默认值为/\。/\。css$/gcssProcessor:用于压缩和优化css的处理器,默认值为cssnano。这是一个应该遵循cssnano.process接口的函数(接受CSS和options参数,返回一个承诺)可以打印:{bool}表示插件可以在控制台中打印信息。默认值为true *///web pack 4+constpoptizecsassetplugin = require(' optimize-CSS-assets-web pack-plugin ');const MiniCssExtractPlugin =必需(“mini-CSS-extract-Plugin”);//webpack 4 module . exports = { optimization:{ minimizer:[新UglifyJsPlugin({cache: true,parallel: true,sourcMap: true}),新OptimizesSassetSplugin({ assetnameregxp:/\)。优化\ 。css$/g,cssProcessor:required(' CSS nano '),CSS processor选项:{ safe: true ,discard comments:{ remove all:true } },canPrint: true}),] ,} ,模块:{rules: [{test: /。css$/,使用:[迷你提取插件。加载器,' css加载器'],},] ,},插件:[新迷你提取插件({文件名:“[名”)。css” ,组块文件名:“[id”。css"}),]};//通常与webpack 3中的ExtractTextPlugin一起使用 这个插件使用uglify-js来压缩js文件 以下解释来自:关闭开发环境的代码压缩UglifyJsPlugin开发环境不需要压缩代码。主要原因是它消耗了太多的性能。每次修改都需要几秒钟的时间来等待页面呈现,这浪费了大量的开发时间。解决方案是配置不同的环境变量,以便在开发环境时不使用UglifyJsPlugin插件。为此 ,webpack4中添加了一个新模式 ,默认值为生产;。此外,更新后的webpack默认配置了UglifyJsPlugin ,也就是说,总是会有压缩代码而不设置任何环境变量的行为,导致非常耗时的编译。然后我的解决方案是设置环境变量:树抖动:这个术语通常用来描述当软件包. json文件启动时,在JavaScript上下文中死代码的移除。 webpack 4的新官方版本扩展了这种检测能力,并使用package.json的sideEffects属性作为标签,向编译器提供提示,指示项目中哪些文件是纯的(纯ES2015模块),因此文件中未使用的部分可以安全删除。 这种方法是通过package.json的sideEffects属性实现的 {"name": "your-project ","副作用":false}如果您的代码确实有一些副作用,您可以提供一个数组来代替:{"name ":"your-project ","副作用":["../src/some-side-effective-file . js "]}从webpack 4开始,您还可以通过模式配置选项轻松切换到压缩输出,只需设置为生产。 Config.jsconstpath =必需(' path ');module.exports = {entry:'。/src/index.js ',输出:{文件名:“bundle.js”,路径:path.resolve(__dirname,' dist')},模式:“production”};defineplugin实用程序webpack插件的defineplugin允许创建一个可以在编译时配置的全局常量 这对于构建允许不同行为的开发模式和发布模式可能非常有用。 如果日志记录是在开发版本中执行的,而不是在发布版本中执行的,则可以使用全局常量来决定是否进行日志记录 这是使用定义移植,设置它 ,你可以忘记开发和发布构建的规则。 新的web pack.define plugin (/* *在vue-cli创建的项目中,src下的所有文件都可以访问以下变量,如VERSION,如main.js、App.vue等*/production: JSON.stringfy(真) 。版本:JSON。stringfy ("5fa3b9 "),browser _ supports _ html5: true,two:" 1+1 "//根据process.env.NODE_ENV区分环境,并介绍配置文件process . ENV:{ NODE _ ENV:" development " }。})环境插件:是通过定义环境插件设置过程.环境变量的快捷方式 新webpack。环境插件(['NODE_ENV ',DEBUG'])//上述编写方法与以下方法具有相同的效果:新的web pack . define plug(' process . ENV . NODE _ ENV ':JSON . string fy(process . ENV . NODE _ ENV),process . ENV . DEBUG ':JSON . string fy(process . ENV . DEBUG)})哈希模块插件此插件将根据模块的相对路径生成一个四位哈希作为模块id,建议用于生产环境 //有关其他具体说明 ,请参阅新网页包。HashFunction:' SHA256 ',HashDigest:' Hex ',HaShDigestLength:20 })ZIplugin(好像官方网站没有列出)可以用来压缩资源(图片、配置文件等)。)放入. zip文件//参数配置,如果(config . build . productivitozip){ const zip插件= required(' zip-web pack-plugin ')WebPackConfig . plugins . push(新的ZipPlugin({ path:config . build . AsetsZiproot,文件名为:' build.zip ',扩展名为:' zip ',})} module contentation plugin web pack 2处理的每个模块都由如下函数包装:/* 50 */* * */(函数,_ _ webpack _ exports _ _,_ _ web pack _ require _ _){ window lib =。.../*和声默认导出*/_ _ web pack _ exports _ _[“a”]=(window . lib);/* * */}),这将导致一个问题:降低浏览器中JS执行的效率,主要是因为闭包函数降低了JS引擎的解析速度 因此,webpack团队引用闭包编译器和汇总JS,并将一些相关模块放入闭包函数中,通过减少闭包函数的数量来加速JS的执行。 网络包3通过设置模块连接插件:模块来使用这个新功能。导出= {插件:[新网络包。优化 。模块连接插件()]}记住,这个插件只适用于网络包直接处理的ES6模块 当使用transpiler时,您需要禁用模块的处理(例如,巴别塔中的模块选项) 在开发:package.json自动安装之前,需要对其进行配置。//安装NPMINSTALL-SAVE-DEVENPM-INSTALL-Webpack-Plugin//用法//别忘了引入constanpminsTALLplugin = require(' NPM-INSTALL-Webpack-Plugin ')//插件配置:plugins:[new NPMINSTALLplugin()],//等效于:plugins:[new NPMINSTALLplugin(//use-SAVE或-SAVE-DEVED:false,/,//安装缺少的peerdependenciespeeddependencies:true。//减少控制台日志记录的数量quiet: false,//npmc commanded in company,yarnis不支持yet pm:“tnpm”});],//可以提供一个函数来动态设置开发:插件:[新公共软件插件(开发:函数(模块,路径){返回[“巴别-现在-到达-hmre” ,“网络包-开发-中间件”,“网络包-热中间件”,]。(模块)的索引!= =-1;你不必在任何地方进口或要求。 //要自动加载jquery ,我们可以将两个变量指向相应的节点模块:new webpack . provideplugin($:' jquery ',jquery:' jquery '})//然后在我们的任意源代码中:$(' # item ');// < 。= Jquery(“# item”)工作;// <。=工作//使用:lodash mapnewwebpack . provideplugin(_ map:[' lodash ',' map ']})//使用:vue . jsnewwebpack . provideplugin([' vue/dist/vue . ESM . js ' ,默认']})限制未知插件编写代码时,您可能已经添加了许多代码分割点来按需实现加载 编译后,您可能会注意到有一些非常小的块——这会产生大量的HTTP请求开销。 幸运的是 ,这个插件可以通过合并来后处理您的块,以减少请求的数量。 //用于改进“块”传输的插件//LimitunKtuntpluginnewWebpack . optimize . LimitunKtuntplugin({ max chunks:5,//必须大于或等于1 Minchunksize:1000 })/* * Minchunksize Plug:通过合并小于Minchunk大小的块,将块卷保持在指定的大小限制之上 */new webpack . optimize . min chunksizeplug(//最小字符数sminchanksize:10000 })/* *侵略性拆分插件可以将包拆分成更小的块,直到每个块达到选项设置的最大大小 它通过目录结构将模块组织在一起 */new webpack . optimize . attrivesplitting plugin({ min size:30000,//字节,分割点 默认值:30720兆大小:50000//字节,每个文件的最大字节数 默认值:51200chunkOverhead: 0,//默认值:0EntryChunK乘数:1。//默认值:1})源mappdevtoolbox开发模式中的插件工具了解生成源地图devtool//的两种配置配置。生成源地图的最简单方法是配置webpack.config.js,const path = require(' path ');模块. exports = {devtool: 'source-map ' ,条目:{index: path.resolve(__dirname,' src/index.js '),},输出:{ devtoolbmoduleFileName template:'[资源-path]',路径:path.resolve(__dirname,' dist/') ,文件名:' index.js ',},模块:{规则:[{test: /\) 。js$/,使用:{loader: 'babel-loader ',查询:{ presets:[' @ babel/preset-env '] } },]} ,};/* *其中devtool默认为false ,并被配置为源映射,以作为单独的文件生成源映射。 因此,在dist/ folder下,将生成两个文件。在index.jsindex.jsmapindex.js文件的末尾,webpack将自动添加一行注释,//# sourcemapppingul = index.js . map浏览器将在此解析并自动请求映射文件,并根据index . js的相对路径加载它。 */sourcemappdevtooplugin/* *除了直接配置devtool之外,您还可以使用source mappdevtooplugin(web pack的正式插件)以更精细的粒度配置source map 。 */const path =必需(' path ');const webpack =必需(“web pack”);模块. exports = {// devtool: 'source-map ',条目:{index: path.resolve(__dirname,' src/index.js '),},输出:{//devtool ModulefileName template:'[资源-路径]',路径:path.resolve(__dirname,' dist/'),文件名:“index.js ',},模块:{规则:[{test: /\)。js$/,使用:{loader: 'babel-loader ' ,查询:{ presets:[' @ babel/preset-env '] } },]},插件:[新网页包。sourceMapdevToolplugin({文件名:“[文件”)。“映射”,ModulefilenameTemplate:“[资源-路径]”,附加:“ N//# sourcemappingul = http://127 . 0 . 0 . 1:8080/dist/note:这里值得一提的是,不可能同时配置devtool和SourceMapDevToolPlugin插件。将在index.js文件的末尾添加两行sourcemappingul。//# source mappingul = http://127 . 0 . 0 . 1:8080/dist/index . js . map//# source mappingul = index . js . map,并且映射文件的内容不正确。这是一个地图文件空。评估源映射开发工具插件:对评估源映射的更细粒度控制——开发工具中的七种源映射模式让我们首先看看文档对这七种模式的解释:模式解释评估每个模块都将打包在评估中以供执行。并将添加注释//@ sourceURL.source-map以生成一个SourceMap文件。隐藏源地图与源地图相同 。但是,不会在包的末尾添加任何注释。内联源映射以DataUrl的形式生成源映射文件。eval-source-map每个模块将通过eval()执行 。并以DataUrl的形式生成source map廉价源映射,以生成不带列映射的source map文件。不包含加载程序(如babel的sourcemap)的廉价模块sourcemap生成不包含列映射的sourcemap文件,而加载程序的sourcemap被简化为只包含相应的行。 -注1:网络包不仅支持这7种类型,还可以任意组合上述评估、内嵌和隐藏关键字。正如文档中提到的,您可以将souremap选项设置为:廉价模块内嵌源代码映射 -注2:如果您的模块已经包含源映射,您需要使用源映射加载器来合并和生成新的源映射。 还有许多其他的 ,需要时可以自己搜索和学习...[网址= https://juejin.im/post/5ac9b716518825cb32e66cc]网络包4高级“目标= _空白>”}],};/* *在上面的配置中 ,我们注释掉了devtool和devtoolModuleFilenameTemplate,并将其配置为SourceMapDevToolPlugin。 使用这种配置,dist/ directory还将在最后生成两个文件。index.jsindex.js.map因为我们使用了插件的append函数并修改了sourceMappingURL地址,所以index.js末尾的源映射文件的地址将变为。//# sourcemappingul = http://127 . 0 . 0 . 1:8080/dist/index . js . map */[/code]注意:这里值得一提的是,不可能同时配置开发工具和源代码管理开发工具插件。在index.js文件的末尾,将添加两行sourcemapppingul,//# source mapppingul = http://127 . 0 . 0 . 1:8080/dist/index . js . map//# source mapppingul = index . js . map,并且映射文件的内容不正确。是空的映射文件,评估源地图开发工具插件:对评估源地图的更细粒度控制-开发工具中的七种源地图模式让我们首先看看文档对这七种模式的解释:模式解释评估每个模块都将打包在评估中以供执行 。并将添加一个注释//@ sourceURL.source-map来生成一个SourceMap文件。隐藏源地图与源地图相同。但是,不会在包的末尾添加任何注释。内联源映射以DataUrl的形式生成源映射文件。eval-source-map每个模块将通过eval()执行。并以DataUrl的形式生成source map廉价源映射,以生成不带列映射的source map文件。不包含加载程序(如babel的sourcemap)的廉价模块sourcemap生成不包含列映射的sourcemap文件,而加载程序的sourcemap被简化为只包含相应的行。 -注1:网络包不仅支持这7种类型,还可以任意组合上述评估、内嵌和隐藏关键字。正如文档中提到的 ,您可以将souremap选项设置为:廉价模块内嵌源代码映射 -注2:如果您的模块已经包含源映射 ,您需要使用源映射加载器来合并和生成新的源映射。 还有很多其他的,你可以在需要的时候自己搜索和学习...[网址= https://juejin.im/post/5ac9b716518825cb32e66cc]网络包4高级 Microsoft .NET Framework SDK Net Classes:用管理代码编写联网应用程序

(责任编辑:法治)

热点阅读