Material-UI和Webpack，捆绑包
Material-UI 和 Webpack 是现代前端开发中常用的两个工具，它们可以很好地协同工作来构建和优化你的项目。Material-UI 是一个流行的React组件库，用于快速构建设计美观的用户界面。Webpack 则是一个强大的模块打包工具，它可以帮助你管理和打包你的JavaScript应用程序，包括React组件和其他资源如CSS和图片。
如何将Material-UI与Webpack结合使用：
1. 初始化项目
首先，你需要创建一个新的项目目录，并初始化一个新的Node.js项目：
mkdir my-project
cd my-project
npm init -y2. 安装Webpack和React相关依赖
你需要安装Webpack及其相关插件和加载器，以及React和Material-UI：
npm install --save react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin
npm install @material-ui/core3. 配置Babel
创建一个Babel配置文件 .babelrc，以确保你的JSX和ES6代码能被正确转译：
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}4. 配置Webpack
创建一个Webpack配置文件 webpack.config.js。这个文件将定义如何打包你的React和Material-UI代码：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
};5. 创建React组件
在 src 目录下创建你的React入口文件 index.js 和一个简单的组件，使用Material-UI组件：
import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';
function App() {
return <Button variant="contained" color="primary">Hello World</Button>;
}
ReactDOM.render(<App />, document.getElementById('root'));同时，创建一个简单的HTML页面 index.html 作为应用的模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>6. 运行你的应用
在你的 package.json 中添加一个脚本来启动Webpack开发服务器：
"scripts": {
"start": "webpack serve --open"
}然后在命令行中运行：
npm start这将自动打开一个浏览器窗口显示你的React应用，其中包含了一个Material-UI按钮。
通过以上步骤，你可以将Material-UI组件库和Webpack打包工具结合起来，构建一个高效且美观的React应用。
相关·内容
我看了一下国家预防机制一揽子方案的文件，看到了以下内容：
注意，在上面的示例中，我们使用了：
import RaisedButton from 'material-ui/RaisedButton';
而不是
import {RaisedButton} from 'material-ui';
这将使您的构建过程更快，您的构建输出更小。
在使用Webpack2时，这两个导入在构建速度和包大小方面是否存在差异？
浏览 2提问于2017-02-08得票数 2
回答已采纳
1回答
我已经尝试过配置各种不同的优化方法，但我的react-admin包大小仍然很大，为860KB。
我能做些什么呢？正常吗？可能的原因是什么？我会马上贴上我的webpack配置的链接。
我不认为现在有任何聪明的方法来做代码拆分。我已经实现了很少的资源，它们应该总是一起使用。
我常用的webpack配置链接：
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
浏览 0提问于2020-05-15得票数 1
我有一个简单的组件，我试图在构建过程中使用webpack，所以我有如下所示
import React from 'react';
import { AppBar } from 'material-ui';
export default () => (
<AppBar
title="Octopus"
showMenuIconButton={ false }
iconElementRight={<SaveLoadAnimation/>}
/>
);
我正在使用外部AppBar组
浏览 0提问于2016-04-18得票数 3
我使用的是"@material-ui/core": "^3.9.3"和"@material-ui/pickers": "^3.0.0-beta.1"
当我从@material-ui/pickers导入任何东西时，我得到：
Uncaught TypeError: Object(...) is not a function
at Module../node_modules/@material-ui/pickers/dist/material-ui-pickers.esm.js (material-ui-pickers.esm.js:2
浏览 2提问于2019-05-06得票数 8
回答已采纳
我有一个应用程序，我已经升级到最新版本的Webpack，React和Redux。Webpack没有生成webpackBootstrap函数时，更多的两个减速器被添加到剩余使用combineReducers。我怀疑这可能是Webpack的错误，但我不确定。我花了几个星期/几个小时来研究这个问题，但没有成功。同样，这个代码也适用于较旧版本的webpack。我试图勾勒出问题的轮廓，这样就可以在输出所有代码的情况下重新创建它。任何想法。
更新:在更新到webpack的最新版本(4.16.5)后，源代码在任何情况下都不会生成webpackBootstrap。
package.json
{
&#
浏览 1提问于2018-08-12得票数 0
回答已采纳
1回答
我用React，FullCalendar，JQuery，Material和Formsy-material做了一个小应用.
该应用程序包括显示事件的完整日历。
该事件是在日历的某个位置单击创建的，它在对话框中呈现一个表单，其中包含FormsySelect、FormsyDatepicker或FormsyTextfield等组件。
当我和webpack一起做构建时，会产生一个重量为588 of的包。
顺便说一下，我在另一个组件中加载的对话框表单。
如果不呈现Dialog组件，则包的大小为220 is。
材料用户界面对此负责吗？
编辑：我保留在Dialog组件中生成的导入。
import React,
浏览 6提问于2016-05-19得票数 1
我试图将我的应用程序与webpack捆绑在一起，然后使用SystemJS将其包含在一个父应用程序中，但我有点迷茫了。
我已经创建了包，并尝试将其转换为commonjs / umd /和设置libraryTarget。
在我的父母应用程序中，我不能通过SystemJS包含它，因为它似乎没有注册。
有没有办法在SystemJs模块中输出我的Webpack包？
浏览 2提问于2016-03-06得票数 4
我正在编写一个web应用程序，使用react和webpack作为我的模块捆绑器。到目前为止，我的jsx代码非常轻量级，整个文件夹的大小是25kb。
不过，我用webpack创建的bundle.js是2.2MB。在使用-p标志运行优化之后，它将包减少到700kb，这仍然是非常大的。
我看过这个react.min.js文件，它的大小是130kb。
有没有可能是webpack做了这么大的文件，还是我做错了什么？
webpack.config.js
var path = require('path');
var webpack = require('webpack');
浏览 115提问于2015-12-12得票数 61
回答已采纳
1回答
我正在尝试使用由material ()给出的物料UI SSR示例，它起作用了。然后我尝试在这个示例中集成Material抽屉，我使用了Material ()给出的持久抽屉示例代码。我从demo.js复制了文件
这是我的Demo.js文件
import React from 'react';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Drawer from '@material-ui/cor
浏览 3提问于2021-04-04得票数 4
回答已采纳
1回答
这是我的webpack.config.js
var path = require('path');
var webpack = require('webpack');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: [
'webpack-hot-middleware/client',
'./src/index'
],
output: {
path: path.join(__dirname,
浏览 2提问于2018-10-19得票数 0
我有一个应用程序(让我们称它为frontend)，它导入了一个基于材料UI的自定义React组件库(design-system)。
在frontend应用程序中，我有一个包含ShadowDOM的组件(使用react-shadow)，我希望将design-system中的一个按钮组件导入其中。我用StylesProvider将整个树包装在ShadowDOM中，我将jss的自定义实例传递给了它(具有不同的injectionPoint，所以树中的样式不是附加在文档的头部，而是附加在ShadowDOM中。
我的问题是，frontend使用自己的来自@material-ui/styles包的Styles
浏览 1提问于2021-04-30得票数 0
4回答
反应webpack捆大
、、、、
我有一个使用react开发的网站，它只有一个页面，但是产品包的大小是1.11 MiB。我正在使用防火墙，火柴存储，材料-用户界面，反应-redux为这个应用程序工作良好，一切都很好，除了捆绑大小。
我用webpack-束分析仪分析了包的大小，好像没有解调到大尺寸.这里我添加了截图。
我的webpack配置文件
const path = require('path');
var CompressionPlugin = require('compression-webpack-plugin');
const TerserPlugin = re
浏览 3提问于2021-04-17得票数 7
回答已采纳
目前正在开发ASP.NET MVC应用程序，在探索了angular之后，我对在我的ASP.NET MVC应用程序中使用webpack进行捆绑和最小化并不是很兴奋。
按照webpack指南中的所有步骤，我能够捆绑和压缩js文件。
但是当我在我的应用程序中引用捆绑包时，它比ASP.NET捆绑包花费更多的时间。
以下是ASP.NET捆绑包代码
bundles.Add(new ScriptBundle("~/bundles/QuickReasonEntryScripts").Include(
"~/Scripts/jquery.min.js
浏览 3提问于2017-10-10得票数 6
webpack会不会对已经和webpack捆绑在一起的套餐进行去重呢？
例如，| Webpack bundle 1 | |------------------| | react@15.5 | | jquery@3.0 |
| Webpack app bundle | |--------------------| | react@15.5 | | jquery@3.1 | | Webpack bundle 1 |
Webpack app捆绑包会包含2份react@15.5吗？Webpack app捆绑包会包含2份jquery吗？
浏览 7提问于2017-05-15得票数 0
我不知道如何使用Django运行开发模式。我正在运行webpack，当我完成所有Vuejs的工作时，我只需将所有内容捆绑到一个文件夹中，Django将其作为静态文件提供服务。我知道我必须用模式开发来运行webpack，但这不起作用，它给了我一个找不到的错误。我想和Django一起在开发模式下运行Vuejs，我该怎么做呢？我会分享我的项目结构，我的package.json和webpack的配置。 const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin'
浏览 14提问于2020-10-07得票数 0
1回答
webpack是做什么的？根据我非常粗浅的理解，它将资产文件捆绑在一起，比如css和js。没有webpack，我不能自己做吗？它是如何优化捆绑包的呢？我从一些文件中看到大小减少了50%以上
浏览 0提问于2019-09-28得票数 0
我使用webpack和html-webpack-plugin用生成的脚本包(比如bundle.[hash].js )更新我的index.html文件。
然后，我必须运行webpack-dev-server，这样我就可以将该包加载到内存中，并利用热模块替换。
这会使代码编译两次。
但是，我希望webpack-dev-server也能够使用新的bundle.[hash].js更新index.html文件，因为现在我必须先运行webpack，然后运行webpack-dev-sever。编译两次似乎很奇怪。
同样，我运行webpack的唯一原因是使用包的新散列更新我的index.html文件。如果我可
浏览 29提问于2016-06-15得票数 6
我使用下面的代码来配置webpack 5： const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
devtool: "source-map"
}; 这是我的index.js代码， const bar=require('./bar.js
浏览 27提问于2021-04-07得票数 1
回答已采纳
1回答
使用npm install webpack webpack-cli webpack-dev-server --save-dev安装软件包后
终端给我这个错误消息：
➜ Projeto npm install webpack webpack-cli webpack-dev-server --save-dev
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fse
浏览 7提问于2021-06-02得票数 0
我大致遵循来创建用于分发的react组件。下面是我的webpack产品版本。
然而，考虑到单个文件大小的总和大约是文件大小的十分之一，我的构建结果比我预期的要大得多。具体地说，我的文件大小仅为1.6kb，用于源js和更少的文件。然而，在13kb时，构建的大小大约是原来的10倍。
我的组件非常简单和相似。我有一个FlexTable，一个FlexTableRow和一个FlexTableCell文件。它们都具有与下面相同的签名，但具有不同的style.less。在我的style.less中，它基本上只有几行css，上面写着display: flex; flex: 0等。所以总而言之，非常少的js和非
浏览 8提问于2016-09-13得票数 0
回答已采纳
1回答
在我的react / webpack项目中，我使用ContextReplacementPlugin来捆绑我需要的语言环境文件--
var webpack = require("webpack");
module.exports = {
// ...
plugins: [
new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/) ]
};
这段代码正确地捆绑了文件，但我唯一担心的是，它捆绑了当前和未来我们需要支持其他国家/地区的所有语言环境文件，而且那时捆绑包的大小会继续增长。
浏览 0提问于2020-01-23得票数 0
我想要从bundle.js解压/解压所有的组件和js文件(一个webpack文件)。我离开时只带着这个文件
我在谷歌上搜索并尝试了几种方法来解压捆绑包js文件，但都不起作用。
我也尝试过这个解决方案。请查找以供参考
请帮帮我
浏览 2提问于2017-05-31得票数 5
在windows 10 webpack b中尝试x64应用程序时，我得到了以下错误。
ERROR in ./node_modules/material-ui/styles/withStyles.js
Module not found: Error: Can't resolve '@babel/runtime/core-js/map'
我搜索了github和stackoverflow，但没有找到正确的答案。
我的资料界面是"material-ui": "^1.0.0-beta.47",。和"@babel/runtime":
浏览 2提问于2018-11-15得票数 0
回答已采纳
我正在尝试构建我的prod webpack文件，得到5-10个错误"cannot resolve module“aws-sdk，child_process”。
所有这些错误都以相同的路径开始："ERROR in (webpack)/~/watchpack/~/chokidar/~/fsevents/“
例如：
在软件包模块中找不到错误:错误:无法解析‘(webpack)/~/watchpack/~/chokidar/~/fsevents/~/node-pre-gyp/lib/node-pre-gyp.js’或'directory‘../package
找不到(webpa
浏览 12提问于2016-09-26得票数 4
您好，我在我的应用程序中使用socket io。这需要fs。当我尝试使用下面的webpack配置来捆绑我的javascript时。即时消息收到错误，无法解析'fs‘。
Module not found: Error: Can't resolve 'fs' in 'my application path/node_modules/socket.io/lib'
我是通过添加target:'node'和node:{fs:'empty'}找到的。此问题已解决。
但是在sass-loader中有一个问题。获取以下错误。
ER
浏览 7提问于2018-04-20得票数 11
我把资料-ui从material-ui/index.js打包到资料-ui.js，用于对外服务。导入语句如下
import FlatButton from 'material-ui/FlatButton';
webpack应该如何配置，以排除物质-ui作为外部依赖？\我相信改变进口，因为这将有助于外化，但不知道如何处理材料-ui之后。
import material-ui from 'material-ui'
浏览 3提问于2016-05-08得票数 4
1回答
我最近开始使用vs代码。我使用的材料用户界面与反应和类型脚本。但是我无法使用alt(选项)+输入快捷方式导入material的组件。我使用的是mac，我使用的打字本版本是3.0.3。但是，我正在显式创建的react组件，那些我能够使用上述快捷方式导入的组件。下面是我正在使用的package.json：
{
"name": "portfolio",
"version": "1.0.0",
"description": "",
"main": "index.js&
浏览 0提问于2018-09-23得票数 4
回答已采纳
为了便于维护，我想将我的Typescript代码拆分成模块，并将它们连接到浏览器的单个编译的JavaScript文件中。Webpack听起来就是我想要的，因为它将转换我的打字稿，组合模块，我可以很容易地为开发和生产有单独的构建任务，选择是否缩小，缓存崩溃，观察文件更改等。我还想单独捆绑我的一些模块，以便动态加载，这并不难配置。它也可以处理我的CSS，包括从Sass编译。一个工具就能完成所有这些任务？我在哪里报名？
但当我看到webpack创建的JavaScript时，我有点幻灭了。我可以接受它添加到顶部的样板，尽管它比我预期的要多一点。而缩小的版本实际上不可能重建成某种可理解的东西，但这可以被
浏览 2提问于2020-09-15得票数 0
当我使用和时，我会尝试精简代码：
// this is test.js
export const ceil = Math.ceil
export const random = Math.random
// webpack entry
import { ceil } from './test'
export default ceil(3.3)
我得到了：
// formated
"use strict";
n.d(t,"a",function(){return r});
var r=Math.ceil;
Math.random//
浏览 3提问于2018-01-20得票数 2
关于Webpack和Javascript，我有一个非常基本的问题。
如果我想捆绑包含在其他现有网页中的应用程序，如何确保我捆绑的javascript代码及其依赖项不会与这些现有网页上的现有javascript代码冲突？
这是由Webpack自动完成的吗？
我不想提供一个非常小的js组件，可以包括在任意其他网站，例如通过一个标签，但希望确保这些网站的现有代码，将使用该组件不会受到不可预见的影响。例如，我如何确保我的组件可能具有的任何依赖项都不会干扰站点的全局范围？
浏览 13提问于2017-07-11得票数 0
我正在尝试使用webpack通过teamcity捆绑我的应用程序，并将其部署到远程服务器上。我也能够做到这一点，但是在使用'node ./dist/main‘运行应用程序的最后一步，我得到了下面的错误。 PS C:\engage-analytics> node .\dist\main.js
node:internal/modules/cjs/loader:928
throw err;
^
Error: Cannot find module '@nestjs/core'
Require stack:
- C:\engage-analytics\dist\main
浏览 77提问于2021-01-29得票数 0
回答已采纳
我正在尝试将一个创建-反应应用程序转换为webpack应用程序。这背后的背景是，我最初有一个应用程序，是使用创建-反应。我想用webpack来做那个项目。我拿了一个在webpack上运行的应用程序，然后删除了它的所有源文件，用create应用程序中的源文件替换了源文件。在此之后，我使用了package.json依赖项，并将它们从create应用程序的package.json中移过来。我想也许我需要webpack的一些额外的配置来处理流程。我需要在故障排除方面的帮助。我得到了这类错误：
ERROR in ./src/js/constants/Routes.jsx
Module build fai
浏览 3提问于2020-06-18得票数 2
回答已采纳
我正在构建一个具有多个项目的大型应用程序，所以我想将一些Angular2组件放在一个额外的模块中，该模块在所有模块之间共享。
因为我在我的项目中使用了webpack，所以在节点模块中使用优点会很好，但是生成的输出并不是很有用。
我之所以尝试使用webpack，是为了利用webpack提供的加载器。我想把模板和样式分开放在不同的文件里。
有没有一种方法可以让我的angular2组件在不同的项目中作为node_module使用?有没有办法使用webpack来呈现它们？
浏览 2提问于2016-07-28得票数 0
1回答
我正在尝试使用Material创建一个可重用的React组件，并将其npm link到另一个应用程序中。组件和应用程序正在使用webpack捆绑。应用程序在开发过程中很好地呈现组件，但是当我捆绑应用程序时，组件开始破坏material样式。
我尝试过的一些解决办法包括：
我认为在@material/core中定义peerDependencies可以解决这个问题，但是每次我使用Material组件时，应用程序都会抛出。
☹️似乎什么都不起作用
组件的package.json：
{
"name": "component",
"v
浏览 4提问于2020-01-23得票数 6
回答已采纳
1回答
我正在和Webpack一起试用ReactJS，热更新和React-Router。下面是我的webpack.config.js代码。由于某些原因，在文件树的最顶端创建了一堆json文件。例如，fb43026df6c9e1823c07.hot-update.json
文件以.hot-update.json结尾
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
'webpack-dev-server/client?http:
浏览 2提问于2016-07-13得票数 1
我正试着和webpack一起使用jquery，但即使我使用的是像这样的Webpack提供者插件：
new webpack.ProvidePlugin({
'window.jQuery': 'jquery',
'window.$': 'jquery',
$: 'jquery'
})
似乎不会将我的jQuery暴露给窗口全局作用域。
浏览 0提问于2016-12-02得票数 3
3回答
我正在使用webpack来捆绑我的react项目。我的项目依赖于以下组件的material-ui：
material-ui/Dialog
material-ui/styles/getMuiTheme
material-ui/styles/MuiThemeProvider
material-ui/FlatButton
material-ui/TextField
webpack-bundle- size -analyzer报告material-ui大小为1.07MB。下面是我的webpack配置文件：
const webpack = require('webpack');
cons
浏览 3提问于2016-08-19得票数 8
我正在使用webpack来构建我的react应用程序，它创建了4Mb大小的bundle.js，它非常巨大，如何减少这个大小，这是我的webpack.config.js，我还应该使用哪些插件 我正在使用的插件列表，请推荐其他插件，这些插件可以帮助减小捆绑包文件的大小，或者我的配置有什么问题。 var compressionPlugin = require('compression-webpack-plugin');
var copyWebpackPlugin = require('copy-webpack-plugin');
var extractTextWeb
浏览 54提问于2019-02-13得票数 1
我看过关于webpack的教程，我可以把所有的东西都打包成bundle.js，还可以把它导入到.js文件中。
在我的应用程序中，我使用了ajax、bootstrap-table，因此我需要index.html中的jquery和bootstrap-table
我怎么才能把这些打包并加载到html文件中呢？
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.clo
浏览 1提问于2017-09-24得票数 1
我一直在研究webpack的捆绑策略，并在这里找到了一个很好的指南：https://hackernoon.com/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758 它似乎主张多个单独的文件(通常)是最好的方法。我已经创建了一个简单的捆绑包，其中包含一个导入flexslider的js文件： import "flexslider"
$(window).on('load', function () {
$('.flexslider').flexslider({
}
浏览 16提问于2019-05-04得票数 0
我正在尝试从RequireJS迁移到Webpack，但我不确定处理我们的区域设置文件的最佳方式。
目前，我们为每个语言环境生成一个单独的JS文件。这些文件包含i18n消息的7+模块定义以及库配置(如moment)。例如，我们的da_DK文件如下所示：
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../moment')) :
typeof defi
浏览 0提问于2016-04-12得票数 9
我昨晚在做我的项目。这是一个Node项目，用webpack构建React可分发的前端代码。当我完成后，我关闭了我的计算机。今天早上我打开了我的计算机，现在，在我所知的没有代码或配置更改的情况下，我收到了缺少依赖项的某种依赖的错误。
ERROR in ./~/fsevents/~/graceful-fs/fs.js
Module not found: Error: Can't resolve 'fs' in '/Users/stevenkitzes/Documents/Career Dev/C2 to A1/react-lnl/demo/react-lnl/nod
浏览 1提问于2017-03-25得票数 1
2回答
多公理字体中的错误-令人敬畏的历史材料-ui支持-类型反应-引导反应-dom反应-基础反应- redux反应-路由器反应
.webpack.config.js:
const webpack = require("webpack");
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin&
浏览 5提问于2017-12-29得票数 7
我正在尝试将redux-persist添加到我的redux应用程序中。
我使用了webpack来捆绑我的javascript，并且在开发中redux-persist包的工作方式与预期的一样。我的开发配置(用coffeescript编写)如下所示：
debug: true
devtool: "eval"
output:
path: path.resolve 'app/static/bundles/'
filename: '[name].js'
publicPath: "
浏览 4提问于2016-11-08得票数 3
我在一个react项目中工作。当我使用"exclude: /node_modules“时，我的项目并没有排除node_modules。因此，我阅读了一些已解决的问题，并将以下代码添加到我的webpack.config.js中。
var nodeExternals = require('webpack-node-externals');
...
module.exports = {
...
target: 'node', // in order to ignore built-in modules like path, fs, etc.
exte
浏览 2提问于2016-09-04得票数 0
我是新来的，对JavaScript的经验也不是很丰富。我正在尝试为JS文本编辑器设置一个新项目。然而，我注意到在为#btn按钮设置了第一个addEventListener之后，该事件被触发了两次。 我不认为这种行为与事件本身有关，因为我已经创建了三个console.log函数。一个在eventListener外面，剩下的两个在里面。所有这三个函数都会在浏览器控制台中记录两次，这让我认为这可能与Webpack的配置有关。 如果任何人有任何线索或建议，请帮助。 HTML： <main class="main__content">
<article class
浏览 22提问于2020-04-28得票数 0
回答已采纳
我一直在使用MaterialUI进行React项目。最初，我使用的是react-materialize包，它起作用了。 当我安装@material-ui/core包来使用MaterialUI组件时，我得到了以下错误 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function
at Object.<anonymous> (index.min.js:40786)
at __webpack_require__ (index.min.js
浏览 59提问于2019-09-18得票数 0
让Webpack工作之后，我注意到它为我的应用程序创建了两个块：
❯ webpack
Node#removeSelf is deprecated. Use Node#remove.
Hash: aeeab0ba1624cbd503eb
Version: webpack 1.12.1
Time: 5775ms
Asset Size Chunks Chunk Names
f4769f9bdb7466be65088239c12046d1.eot 20.1 kB [emitted
浏览 3提问于2015-09-15得票数 3
回答已采纳
为了让Django和ReactJS工作，我一直在遵循下面的教程：
我启动了一个全新的Django项目，添加了一个名为home的应用程序，但是除了本教程中概述的内容之外，我没有做任何其他事情。
无论如何，当我编译JS时，它会创建一个大约21,500行和800 is的文件。我的ReactJS文件只有大约20行，在Django应用程序中没有其他JS可谈。它看起来像是在编译virtualenv中的依赖项之类的东西。为了防止这件事？
webpack.config.js
//require our dependencies
var path = require('path')
var w
浏览 5提问于2017-01-27得票数 1
回答已采纳
我正在使用库material-ui，目前正在运行v1.0.0-beta。他们昨天将库更新为v1.0.0-beta.28，但没有更新类型定义，所以我的代码在运行时失败，而在编译时失败。
来自Chrome：
webpack-internal:///./node_modules/material-ui/styles/colorManipulator.js:80 Uncaught :无法读取未定义的属性'charAt‘at decomposeColor (webpack-internal:///./node_modules/material-ui at read (webpack-inter
浏览 3提问于2018-01-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
