Articles of webpack

反应内联样式错误

内联风格的大爱好者,并决定试一试。 我慢慢地掌握了它,但我现在卡住了,因为我不断收到“<img>标签上的未知道具styles ”错误。 我的代码如下所示: render(){ let imgUrl = 'http://img.nodejscore.com/javascript/0006.jpg'; let divStyles = { backgroundImage:'url(" + imgUrl + ")', backgroundSize: 'cover' }; return( <main class="cf w-100"> <div class="fl w-50 w-third-m w-25-ns"> <div class="aspect-ratio aspect-ratio–1×1"> <img styles="{{divStyles}}" class="db bg-center cover aspect-ratio–object" /> </div> </div> </main> ) } 简单的东西总是给我最多的问题。 任何帮助,将不胜感激。

如何多次使用webpack包含babel-polyfill?

目前我有两个不同的NPM组件将被webpacked,他们都在他们的webpack入口点babel-polyfill polyfill。 现在捆绑后,我有两个不同的捆绑文件,但要求他们在同一个文件中会发生“babel-polyfill应该只需要一次”的错误。 我错过了什么,或者有没有办法解决这个问题?

在VSTS / TFS中运行webpack,找不到webpack

在VSTS的构build过程中,我运行npm install -g webpack然后将npm install webpack与工作目录设置为网站项目目录(project.json和其他主文件所在的目录,而不是解决scheme目录)。 然后我在命令行任务中运行where webpack 或Get-Command -CommandType Application -ErrorAction SilentlyContinue -Name webpack | Select-Object -ExpandProperty Definition | echo Get-Command -CommandType Application -ErrorAction SilentlyContinue -Name webpack | Select-Object -ExpandProperty Definition | echo 在PowerShell任务Get-Command -CommandType Application -ErrorAction SilentlyContinue -Name webpack | Select-Object -ExpandProperty Definition | echo 他们都只返回空string。 所以显然webpack -p作为下一个命令只返回“not found”types的响应。 The term 'webpack' is […]

使用HtmlPlugin从一个子目录为webpack构build资源

我目前使用WebpackHtmlPlugin来简化我的index.html入口点,但是我的主要问题是index.html与所有其他资源(即publicPath所指向的任何地方)处于同一级别。 我想有一个文件夹中提供的index.html和webpack在子文件夹中生成的所有资产。 像这样的东西 index.html build/ bundle.js 1.bundle.js 2.bundle.js 有没有什么办法可以达到这个目的,而不会违背webpack手动映射每个资产,并将publicPath设置为root?

从webpack中剥离dynamic需求

我有一个类似这样的代码: export default { something: true, mockData: process.env.USE_MOCK && require('./mocks/something.js').default }; process.env.USE_MOCK用webpack.DefinePlugin设置为true或false 。 我用这个来启动我的应用程序,使用USE_MOCK=true npm run dev或npm run dev来运行模拟数据。 我希望Webpack在UglifyJS的死代码删除的构build过程中删除这些dynamic需求,但我注意到他们仍然在那里,所以something.js将在构build的捆绑。 在我的情况下,输出类似于: module.exports = { something: true, mockData: (false) && __webpack_require__(181).default }; 有没有办法如何从包中完全删除导入? 顺便说一句。 我认为这样的工作: let mockData; if (process.env.USE_MOCK) { mockData = require('./mocks/something.js').default; } export default { something: true, mockData }; 我宁愿内联要求,因为我已经有了这种模式不less。

在React文件中包含NPM模块:Webpack无法parsing

根据我在这里和这里阅读的内容,将反应模块发布到NPM,然后在另一个项目中使用它,而组件本身位于node_modules导向器中的方式应该如下所示 写一个模块,然后导出它 package.json本名填写package.json的main属性,在我的例子中是dist/index.js npm install从你想要包含它的项目npm install它 从服务器静态地提供脚本。 我有看起来像这样的服务于js文件的东西: app.use('public/componentA', express.static(path.join('node_modules', 'componentA')); 这不是完全真实的代码,但它的工作原理,如果我加载它,我可以在浏览器中看到JS。 需要组件 index.js var React = require('react'); var Component = require('../public/componentA/'); var hook = document.getElementById('hook'); React.render(Component, hook); 但是,当我尝试webpack这个我得到的错误 ./lib/index.js中的错误找不到模块:错误:无法parsing/ Users / me / Documents / tests / reactcomponenttest / lib目录中的“./public/componentA” 这是什么阻止我使用我的模块? 我认为public目录除了特定的端口以外不可用。 如果是这种情况,我们如何使用第二个链接中的节点usebuild议?

如何使用webpack加载Nodejs核心模块

我无法将nodejs的核心模块加载到浏览器。 我的xlsx库取决于fs这是一个核心模块,并加载我的应用程序产生cannot find module "fs"错误。 我已经做了一些谷歌search一再结束在这里 – 说我应该添加target:node到我的webpack.config.js文件,但是,完成,因为他build议产生另一个错误 – > process is not defined 我想知道是否有任何模块加载器需要? 我找不到任何。 webpack.config.js : module.exports = { entry: "./app/boot", output: { path: __dirname, filename: "./dist/bundle.js" }, resolve: { extensions: ['', '.js', '.ts'] }, module: { loaders: [ { test: /\.ts/, loaders: ["ts-loader"], exclude: /node_modules/ } ], preLoaders: [ // All output […]

无法使用webpack的babel

我想通过使用webpack和babel写一个简单的演示,但我真的不知道是什么问题,我有webpack版本1.13.3和我尝试安装npm install –save-dev babel-core babel-preset-es2015或npm install –save-dev babel-loader我得到以下错误: +– babel-core@6.18.2 +– babel-preset-es2015@6.18.0 `– UNMET PEER DEPENDENCY webpack@1 || ^2.1.0-beta 要么 +– babel-loader@6.2.8 `– UNMET PEER DEPENDENCY webpack@1 || ^2.1.0-beta 我有节点v.6.9.1和npm v4.0.2我应该怎么做?

资产优化中的Angular-cli'JavaScript堆内存不足'

我正在Angular-cli项目中创build一个传单地图。 地图图块本地存储在“资产”文件夹中,因为它是栅格地图。 问题是,当我有很多缩放级别的地图时,我已经有超过280万个图像,大小约为1.1GB,而且会变大。 当我使用ng serve这里是控制台输出(它被卡住@资产优化): ** NG Live Development Server is running on http://localhost:4200. ** 25234ms building modules 69ms sealing 0ms optimizing 0ms basic module optimization 96ms module optimization 1ms advanced module optimization 16ms basic chunk optimization 0ms chunk optimization 1ms advanced chunk optimization 0ms module and chunk tree optimization 179ms module reviving 9ms module […]

webpack与node-postgres导入错误('pg'.Client)

试图用Webpack捆绑下面的文件失败 错误:./~/pg/lib/native/index.js模块未find:错误:无法parsing模块'pg-native'in … / node_modules / pg / lib / native @ ./~/pg/lib/ native / index.js 9:13-33 我在.babelrc尝试了几个ignore语句,但没有得到它运行… 我想捆绑的testing文件: handler.js const Client = require('pg').Client; console.log("done"); webpack.config.js module.exports = { entry: './handler.js', target: 'node', module: { loaders: [{ test: /\.js$/, loaders: ['babel'], include: __dirname, exclude: /node_modules/, }] } }; .babelrc { "plugins": ["transform-runtime"], "presets": ["es2015", "stage-1"] […]