标签: webpack
React-Native:模块AppRegistry不是注册的可调用模块
我目前正在尝试在Android模拟器上运行ES6 react-native-webpack-server.不同之处在于我升级了我package.json并build.grade使用react 0.18.0,并且在启动时遇到此错误.据我所知AppRegistry,正确导入.即使我要注释掉代码,这个错误仍然会出现.这在iOS上没有问题.
我究竟做错了什么？
编辑:尝试其他支持0.18.0的样板后,我仍然遇到同样的问题.
推荐指数
解决办法
查看次数
Webpack babel 6 ES6装饰器
我有一个用ES6编写的项目,webpack作为我的捆绑包.大多数转换工作正常,但当我尝试在任何地方包含装饰器时,我收到此错误:
Decorators are not supported yet in 6.x pending proposal update.
我查看了babel问题跟踪器,并且无法在那里找到任何内容,所以我假设我使用它错了.我的webpack配置(相关位):
loaders: [
{
loader: 'babel',
exclude: /node_modules/,
include: path.join(__dirname, 'src'),
test: /\.jsx?$/,
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0', 'react']
}
}
]
我没有任何其他问题,箭头功能,解构所有工作正常,这是唯一不起作用的东西.
我知道我可以一直降级到babel 5.8,我之前有它工作,但如果有任何方法可以在当前版本(v6.2.0)中使用它,那将有所帮助.
推荐指数
解决办法
查看次数
"你可能需要一个合适的加载器来处理这个文件类型"与Webpack和Babel
我试图使用Webpack与Babel编译ES6资产,但我收到以下错误消息:
You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'
这是我的Webpack配置的样子:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './index',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}
以下是使用Webpack的中间件步骤:
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');
var express …推荐指数
解决办法
查看次数
HtmlWebpackPlugin注入相对路径文件,这些文件在加载非根网站路径时会中断
我使用webpack和HtmlWebpackPlugin将捆绑的js和css注入到html模板文件中.
new HtmlWebpackPlugin({
template: 'client/index.tpl.html',
inject: 'body',
filename: 'index.html'
}),
它会生成以下html文件.
<!doctype html>
<html lang="en">
<head>
...
<link href="main-295c5189923694ec44ac.min.css" rel="stylesheet">
</head>
<body>
<div id="app"></div>
<script src="main-295c5189923694ec44ac.min.js"></script>
</body>
</html>
这在访问应用程序的根目录时工作正常localhost:3000/,但是当我尝试从另一个URL访问应用程序时失败,例如,localhost:3000/items/1因为捆绑的文件没有注入绝对路径.加载html文件时,它将在不存在的/items目录中查找js文件,因为react-router尚未加载.
如何让HtmlWebpackPlugin注入具有绝对路径的文件,所以express将在我的/dist目录的根目录中查找它们而不是在/dist/items/main-...min.js？或者也许我可以更改我的快速服务器来解决这个问题？
app.use(express.static(__dirname + '/../dist'));
app.get('*', function response(req, res) {
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
基本上,我只需要得到这条线:
<script src="main...js"></script>
在源的开头有一个斜杠.
<script src="/main...js></script>
推荐指数
解决办法
查看次数
分配左侧的Javascript对象括号表示法({Navigation} =)
我以前没有看过这种语法,我想知道它的全部内容.
var { Navigation } = require('react-router');
左侧的括号抛出语法错误:
意外的标记 {
我不确定webpack配置的哪个部分正在转换或者语法的目的是什么.这是和谐的事吗？有人可以开导我吗？
推荐指数
解决办法
查看次数
如何使用prefetchPlugin和analyze工具优化webpack的构建时间？
以前的研究:
正如webpack的wiki所说,可以使用分析工具来优化构建性能:
来自:https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats
来自构建统计数据的提示
有一个分析工具可以显示您的构建,并提供一些提示如何优化构建大小和构建性能.
您可以通过运行webpack --profile --json> stats.json来生成所需的JSON文件
我生成stats文件(可在此处)将其上传到webpack的analize工具
,在Hints选项卡下我告诉我使用prefetchPlugin:
来自:http://webpack.github.io/analyse/#hints
长模块构建链
使用预取来提高构建性能.从链的中间预取模块.
我从里面挖出网页,找到prefechPlugin上唯一可用的文档是这样的:
来自:https://webpack.js.org/plugins/prefetch-plugin/
PrefetchPlugin
new webpack.PrefetchPlugin([context], request)对正常模块的请求,即使在需要之前解析和构建也是如此.这可以提高性能.尝试首先分析构建以确定聪明的预取点.
我的问题:
- 如何正确使用prefetchPlugin？
- 在Analyze工具中使用它的正确工作流程是什么？
- 我怎么知道prefetchPlugin是否有效？我该怎么测量呢？
- 从链中间预取模块意味着什么？
我真的很感激一些例子
请帮助我将这个问题作为下一个想要使用prefechPlugin和Analyze工具的开发人员的宝贵资源.谢谢.
推荐指数
解决办法
查看次数
源代码在Chrome中由一行代替,包括Ruby on Rails,Webpack和React JS
我遇到一个问题,inline-source-map当我使用Chrome devtools调试器时,Webpack使用配置设置生成的源图关闭了一行.Webpack是在Ruby on Rails应用程序中设置的,用于生成由几十个模块组成的连接的,未经过编辑的JavaScript文件.这些模块中的大多数都是ReactJS组件,并由jsx加载器解析.然后Webpack的输出application.js以及由gem生成的一些其他JavaScript库包含在文件中.
当我使用时eval-source-map,没有问题.关于使用的一些inline-source-map原因导致行号被一个人抛弃.
检查不是React组件的JavaScript仍然存在这个问题,所以我认为它与使用jsx无关.
推荐指数
解决办法
查看次数
create-react-app在src目录之外导入限制
我正在使用create-react-app.我试图从我的公共文件夹中调用图像src/components.我收到此错误消息.
./src/components/website_index.js找不到模块:您试图导入位于项目src /目录之外的../../public/images/logo/WC-BlackonWhite.jpg.不支持src /之外的相对导入.你可以在src /中移动它,或者从项目的node_modules /中添加一个符号链接.
import logo from '../../public/images/logo_2016.png';
<img className="Header-logo" src={logo} alt="Logo" />
我已经阅读了很多东西,说你可以对路径进行导入,但这对我来说仍然不起作用.任何帮助将不胜感激.我知道有很多这样的问题,但他们都告诉我要导入徽标或图像,所以我在大局中遗漏了一些东西.
推荐指数
解决办法
查看次数
Bootstrap4依赖关系PopperJs在Angular上抛出错误
我刚刚创建了一个全新的angular-cli项目
并运行npm install bootstrap@4.0.0-beta jquery popper.js --save
并更改了.angular-cli.json的相关部分,如下所示
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/popper.js/dist/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
但是接收到以下错误
10:2287 Uncaught SyntaxError: Unexpected token export
at eval (<anonymous>)
at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
at Object.../../../../script-loader/index.js!../../../../popper.js/dist/popper.js (popper.js?4b43:1)
at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
at Object.2 (scripts.bundle.js:66)
at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
at webpackJsonpCallback (bootstrap 4403042439558687cdd6:25)
at scripts.bundle.js:1
任何想法如何解决它？
提前致谢...
推荐指数
解决办法
查看次数
未捕获的引用错误：缓冲区未定义
我们的应用程序不断显示标题中的错误。该问题很可能与 Webpack 5 polyfill 有关，在经历了几个解决方案后：
- 设置后备 + 使用 npm 安装
fallback: {
"stream": require.resolve("stream-browserify"),
"buffer": require.resolve("buffer/")
}
- 设置别名
alias: {
"buffer": "buffer",
"stream": "stream-browserify"
}
我们仍然看到可怕的错误：
rfc6979.js:3 Uncaught ReferenceError: Buffer is not defined
at Object.4142 (rfc6979.js:3)
at r (bootstrap:19)
at Object.5892 (js.js:4)
at r (bootstrap:19)
at Object.4090 (bip32.js:5)
at r (bootstrap:19)
at Object.7786 (index.js:3)
at r (bootstrap:19)
at Object.1649 (MnemonicKey.js:50)
at r (bootstrap:19)
我们的设置是用于多目标的普通 NodeJS + TypeScript + Webpack：节点 + 浏览器。任何帮助都会很棒！
推荐指数
解决办法
查看次数
标签 统计
webpack ×10
javascript ×6
babeljs ×2
ecmascript-6 ×2
android ×1
angular ×1
decorator ×1
express ×1
node.js ×1
optimization ×1
popper.js ×1
react-native ×1
react-router ×1
reactjs ×1
source-maps ×1