草庐IT

webpack-dev-middleware

全部标签

javascript - Webpack 排除 CommonsChunkPlugin 的条目

我正在尝试设置webpack生产配置。一切看起来都很好。但是,我意识到在使用commonschunk插件时,它覆盖了预期的所有公共(public)文件。我想做的是,将公共(public)库模块和公共(public)应用程序模块分开。我的配置文件是:module.exports={entry:{lib:["react","react-dom"],app:"./ui-v2/app/app.js",app2:"./ui-v2/app/app2.js"},output:{path:path.join(__dirname,"target/ui/v2"),filename:"/app/[name]

javascript - 将 require ('...' ) 与变量一起使用与在 webpack 中使用字符串

我有一个对我来说意义不大的问题。我正在映射一组具有“名称”和“href”属性的对象。letappleIcons=_.map(appleIcons,appleIcon=>{appleIcon.href=require(appleIcon.href);returnappleIcon;});在循环内部,我想要获取图像,但它抛出错误“.*$:11未捕获错误:找不到模块”。当我打印appleIcon.href的值并尝试将它直接放入require('')时,它起作用了。appleIcons=_.map(appleIcons,appleIcon=>{appleIcon.href=require('.

javascript - 在 webpack 中,如何为多个入口点设置不同的输出目录?

我有以下带有多个入口点的webpack配置...module.exports={entry:{somePage:"./scripts/someDir/somePage.js",anotherPage:"./scripts/someDir/someSubDir/anotherPage.js"},output:{path:path.resolve(__dirname,'out'),filename:'[name].js'},...是否可以为每个条目设置不同的输出路径?而不是得到...的输出/out/somePage.js/out/anotherPage.js我要……/out/someDir

javascript - 在浏览器中访问 webpack 捆绑库

我在从浏览器访问webpack捆绑库时遇到问题。示例:我有一个类Foo//foo.js"usestrict";exportdefaultclassFoo{constructor(){varbar="bar";}}Foo被引入src.js//src.js"usestrict";importFoofrom"./foo.js";webpack配置如下所示。入口是src.js,输出文件是bundle.js。//webpack.config.jsmodule.exports={entry:'./src.js',output:{path:'.',filename:'bundle.js',},mod

javascript - 如何从捆绑 .spec.js 文件中排除 webpack

我的Package.bundle读取varreqContext=require.context('./',true,/\.js$/);reqContext.keys().map(reqContext);其中基本上包括所有.js文件。我希望表达式排除任何***.spec.js文件。此处是否有排除.spec.js文件的正则表达式? 最佳答案 因为/\.js$/允许所有.js文件(因为它基本上匹配字符串末尾的.js),并且您需要允许所有.js文件在它们之前没有.spec,您需要一个具有负前瞻性的正则表达式:/^(?!.*\.spec\.j

javascript - 如何使用 Webpack 2 热重载 Sass?

我正在设置一个使用Webpack2、webpack-dev-middleware和HMR进行开发的React应用程序。每当我对React组件进行更改时,它都会按预期在浏览器中更新。我遇到的问题是,当我修改我的.scss文件时,浏览器不更新。相反,在控制台中它给了我以下信息:[HMR]bundlerebuildingclient.js:207[HMR]bundlerebuiltin1567msprocess-update.js:27[HMR]Checkingforupdatesontheserver...process-update.js:98[HMR]Nothinghotupdated

javascript - 如何使用带有可变查询字符串的 webpack 动态导入?

使用webpack3和react,我可以像这样导入一个文件:import(`src/Main.sass`).then(...dosomething)我有一个用于导入文件的加载程序,它根据查询字符串更改模块内容,我可以像这样成功导入一个文件:import(`src/Main.sass?theme=themename`).then(...dosomething)但是当查询字符串是一个变量时:constthemeQuery='?theme=themename';import(`src/Main.sass${themeQuery}`).then(...dosomething);或constth

javascript - Vue在生产环境DEV模式下

版本2.5.13源代码链接https://jsfiddle.net/esrgxLfu/描述我有一个PHP应用程序,它主要将VueJS用于设置页面。所有设置都是用Vue创建的,我们使用Webpack。一切正常,当我们在实时版本中时,没有关于Vue处于开发模式的控制台错误。我们也仅将Vue用于仪表板页面上的一个组件。它是一个VueTODO列表,就像Vue文档中的一样。在仪表板页面上,我们得到Vue处于开发模式的控制台消息。我们对仪表板和设置页面使用相同的Webpack,因此设置相同。我花了几个小时试图找到答案,但没有成功,这就是我创建此问题的原因。在php文件中,我们将vue组件放在:然后

javascript - 如何使用 webpack-dev-server 代理代理到 ssl 端点

当我尝试代理此http://localhost:9000/rpc请求时,我收到:cannotproxytohttps://example.appspot.com:80(writeEPROTO101057795:error:140770FC:SSLroutines:SSL23_GET_SERVER_HELLO:unknownprotocol:openssl\ssl\s23_clnt.c:794:)webpack-dev-derver配置:devServer:{contentBase:"./",hostname:'localhost',port:9000,proxy:{'/rpc':{ta

javascript - react-route,react-hot-loader.webpack(你不能改变<Router routes>;它会被忽略)

这是我第一个使用react,react-router,react-hot-loader,webpack-dev-server的项目和webpack。当我更改react组件中的代码时,热加载器生效,但同时控制台警告我:Youcannotchange《Routerroutes》;itwillbeignored.我不知道如何解决这个问题。有代码:网络包代码:varpath=require('path');varwebpack=require('webpack');module.exports={devtool:'source-map',entry:['webpack-dev-server/c