草庐IT

webpack-hmr

全部标签

javascript - 带有连字符的 Webpack 外部模块名称

我正在尝试将angular-ui-router作为外部依赖加载到Webpack中。模块名称是“angular-ui-router”。这是一个例子:module.exports=webpackMerge(commonConfig,{...externals:{'angular':true,'angular-ui-router':true},...});问题是Webpack在我的app.bundle.js中创建了一个模块,如下所示:/***/},/*1*//***/function(module,exports){module.exports=angular;/***/},/*2*//**

javascript - 不正确的行号 - sourcemaps,Webpack 2 Typescript

此问题出现在Chrome59.0.3071.115和Firefox54.0.1我一直在做大量研究,尝试使用Webpack2.2.1和open-browser-webpack-plugin为我的Typescript源代码获取正确的行号。我试过设置devtool到以下不同的选项://https://webpack.js.org/configuration/devtool///devtool:'eval',//evalvertfastbutlinenumberswillbewrong//devtool:'eval-source-map',//startsoffslowbutfastrebui

javascript - Webpack - 没有输出文件,没有错误报告

我正在学习Webpack并一次又一次地学习它。在最新版本中,发生了一些非常奇怪的事情。CLI报告一切正常,输出文件dress_aphrodite.jsemitted,但在文件夹中找不到它。日志如下:来自CLI:http://localhost:8080/webpack-dev-server/webpackresultisservedfrom/app/contentisservedfrom./appHash:5334867c12acfa65ba90Version:webpack1.12.9Time:1966msAssetSizeChunksChunkNamesdress_aphrodit

javascript - 如何让 Webpack 使用 .hbs 文件?

我正在尝试使用React为Ghost制作主题。我使用webpack作为我选择的构建工具。我如何告诉webpack提供特定的.hbs文件?现在看来,Webpack只支持.html文件。下面是我的开发配置...webpack通常支持传递给它的任何东西吗?varpath=require('path');varwebpack=require('webpack');varHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:['webpack-dev-server/client?http://localhos

javascript - 为什么所有的 lodash 最终都出现在我的 webpack 构建中?

我检查了所有包含它的库,它们都通过完整路径包含函数,即:importfindfrom'lodash/find'。Redux是使用它的主要依赖项,我也检查了他们的代码,它通过完整路径正确导入了每个函数。这是我的webpack构建可视化的json输出:https://www.dropbox.com/s/njjjtgtw19d52j6/Screenshot%202016-10-30%2006.27.44.png?dl=0如您所见,lodash占据了很大的比例,而只有少数方法被使用。使用webpack-bundle-size-analyzerlodash的大小为135kb(当然,经过预先缩小和

javascript - 使用 Webpack 在 devtools 中调试

使用require.js在Chrome的DevTools中调试模块非常容易,只需输入:require('my-module').callThisFunction()使用Webpack这不再是可能的,因为它通过CLI编译模块并且不导出require。window.webpackJsonp是全局公开的,所以我想我可以找到模块ID并像这样调用它:webpackJsonp([1],[]),但不幸的是,这会返回undefined。是否有任何解决方法仍然能够像require.js一样进行调试? 最佳答案 将代码添加到包中的模块require.e

javascript - 使用 babel 和 webpack 减少转译代码助手

在我的项目中,我使用babel向下转换为ES5。我正在使用webpack将所有东西捆绑在一起。有几个地方,babel在任何给定文件的顶部添加一个函数以支持某些功能(如restparamshere或importstatementshere)。例如,几乎每个文件的顶部都有这个:var_interopRequire=function(obj){returnobj&&obj.__esModule?obj["default"]:obj;};几个文件有这个:var_toConsumableArray=function(arr){if(Array.isArray(arr)){for(vari=0,a

javascript - Webpack 2 没有正确摇树 D3.js

当执行import{select}from'd3'时,Webpack将在包中包含所有的d3.js,如下面的bundlevisualization.所示这个问题可以通过执行import{select}from'd3-selection'来解决,但这有点违背了自动treeshaking的目的。Treeshaking在我们的非库代码的简单情况下似乎确实有效。我们在.babelrc中使用"modules":false以保留模块语法并在我们的中使用'module'resolvewebpack.config.jsresolve:{mainFields:['module','browser','ma

javascript - webpack 中的异步 block 是什么?

这可能是一个虚拟问题,但在阅读split-chunks-plugindocumentation之后和thisarticleaboutcodesplitting,我仍然无法理解asyncblock指的是什么。split-chunks-plugindocumentation关于chunks属性的声明:[it]indicateswhichchunkswillbeselectedforoptimization.Ifastringisprovided,possiblevaluesareall,async,andinitial.Providingallcanbeparticularlypowerf

javascript - 用于开发和生产构建的 Webpack Angular 应用程序 API URL 配置

我有一个具有以下简单配置文件config.js的Angular应用程序:exportdefaultfunction(app){app.constant('config',{apiUrl:'https://localhost:8080'});};由Webpack入口点app.js导入:importconfigfrom'./config';config(app);我想在进行生产构建时使用不同的apiUrl。在Webpack中最简单的方法是什么? 最佳答案 https://stackoverflow.com/a/34032050/1610