webpack-dev-middleware
全部标签 我正在用webpack制作一个typescript插件。一切正常,但我无法从外部看到它。例如,我有文件:/*./src/a.ts*/classA{constructor(args){...}}exportdefaultA;/*./src/app.ts*/importAfrom"./a.ts";functioninit(args){newA(args);}export{init};/*./index.html*/......init({...});有了这个,我得到了UncaughtReferenceError:initisnotdefined。在捆绑文件中,我可以看到这个函数不是全局函数
我打算使用webpack捆绑我所有的.js。我尝试了一个非常简单的示例,如下所示。捆绑在test.js文件中的函数:functiontest(){console.log('hello');}网络包配置:module.exports=[{{output:{filename:'test.js',path:__dirname+'/public/javascript/dist'},entry:['./public/javascript/test.js']}]测试代码:window.onload=function(){test();}但我收到以下错误:UncaughtReferenceError
我决定试试Webpack2。我正在尝试捆绑js和css。问题在于CSS未应用于页面上的元素(它存在于构建文件中)。这是应用结构:app|-styles.css|-app.jsbuild|-bundle.jsindex.htmlwebpack配置文件:varpath=require('path');module.exports={entry:'./app/app.js',output:{filename:'bundle.js',path:path.resolve(__dirname,'build')},module:{rules:[{test:/\.css$/,use:'css-load
我正在尝试根据这个tutorial配置webpack并不断收到相同的错误。我在调试这两条消息时遇到问题:ERRORin./app.jsModuleparsefailed:/path/react/react-webpack-babel/app/app.jsLine1:UnexpectedreservedwordYoumayneedanappropriateloadertohandlethisfiletype.|importReactfrom"react";|importGreetingfrom"./greeting";|ERRORin./index.htmlModuleparsefail
我在让react-hotwebpack加载器正常工作时遇到了一些麻烦。当我加载页面时,我会得到以下信息:[HMR]WaitingforupdatesignalfromWDS...[WDS]HotModuleReplacementenabled.但是当我保存更改时,页面会自动硬刷新浏览器(而不是HMR替换)。//webpack.config.js{entry:{client:'webpack-dev-server/client?http://localhost:8786',//WebpackDevServerhostandportapp:"./HelloWorld.tsx"},devto
我试图在我的webpack包中的每个模块中注入(inject)一个变量,以便为每个文件的JS错误提供调试信息。我已经启用node:{__filename:true}Currentfilepathinwebpack在我的webpack.config中,但我想注入(inject)类似的东西varfilename='Myfilenameis:'+__filename;编译前进入每个模块。我看过BannerPlugin使用raw选项,但似乎这只会在webpack闭包之外注入(inject)横幅,而不是我想要的将脚本注入(inject)每个模块的结果。 最佳答案
我正在使用Webpack来捆绑我的模块,并使用sass在基于React的应用程序中进行样式设置。我使用单独的样式表设置组件的背景图像并在index.js中加载该样式表。样式表中的所有样式都应用于该组件背景图像除外。这是我的示例样式表$bg-img:url('/img/bg.jpg');.show{position:relative;background:$black$bg-imgcentercenter;width:100%;height:100%;background-size:cover;overflow:hidden;}解决该问题的一种方法是明确要求图像,然后为React组件创建
使用WebPack,您可以像这样在代码中导入样式:import'./PageSpinner.styl';但是当您尝试使用Mocha测试此代码时,您的测试将因SyntaxError而崩溃,因为引擎尝试处理像JS代码这样的样式。如何使用Mocha测试这样的代码? 最佳答案 我最近遇到了同样的问题,解决方案是通过Mocha编译器。创建一个文件,我们称之为“css-null-compiler.js”,它有:functionnoop(){returnnull;}require.extensions['.styl']=noop;//youcan
我在Angular2webpack应用程序中需要图像时遇到了一些问题。我已经尝试了三四个图像加载器,但我似乎无法正确配置它们并且HTML中的结果不正确。例如,目前我有:包含此图像的文件是模板的一部分,需要这样:@Component({selector:'appstore-app',directives:[...ROUTER_DIRECTIVES],styles:[require('../sass/appstore.scss').toString()],template:require('./app.component.html')})这会导致浏览器出错:GET:http://local
我和我的团队目前正在将一个相当大的项目从AMD+RequireJS迁移到CommonJS+Webpack。我们喜欢Webpack提供的工具,并认为CommonJS是社区前进的方向:可以说catch潮流。利用webpack自动加载和捆绑我们的.mustache模板文件的有效方法是什么?目前我们有一个使用xport的监视脚本将我们项目文件夹中的所有.mustache文件打包成一个js文件,格式如下:varfiles={};files['path/to/file']='{{content}}';files['path/to/other/file']='{{stuff}}';...我们完全可以