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';而不是这将使您的构建过程更快，您的构建输出更小。在使用Webpack2时，这两个导入在构建速度和包大小方面是否存在差异？
浏览 2提问于2017-02-08得票数 2
回答已采纳
我正在使用Webpack将所有内容捆绑到一个文件中。但是当我使用material UI组件时，应用程序的大小变得非常大。当我检查bundle.js文件的内容时，它在src和node_modules两端显示@material-ui。这是我的webpack配置文件： const path = require('path');
浏览 14提问于2021-01-26得票数 0
回答已采纳
1回答
我想把material-ui表格应用放到PowerApps应用中，可以吗？如果是这样的话，是怎么做的？我已经有了和webpack一起做的代码和捆绑包，实际上我还不知道如何将它添加到Powerapps中。
浏览 36提问于2019-09-26得票数 0
回答已采纳
我的问题是，frontend使用自己的来自@material-ui/styles包的StylesProvider副本(我不需要安装整个@material-ui/core，因为所有组件都应该从design-system导入)，而design-system使用它自己的来自@material-ui/core的design-system副本，这导致了一种情况，即按钮被MUI包装在另一个StylesProvider中，因为它没有检测到任何可用的样式上下文我考虑过在@material-ui</em
浏览 1提问于2021-04-30得票数 0
1回答
重复的模块导入
、、、、
我正在使用Parcel和@material-ui/styles创建一个应用程序。我的应用具有@material-ui/styles依赖项。我还导入了自己的npm包，并将其存储在本地。这个包也有@material-ui/styles依赖项，但它是对等依赖项。我假设这个包将使用我的应用程序中的@material-ui/styles包，但是同一个包有两个不同的实例，这导致了It lo
浏览 17提问于2019-05-19得票数 1
4回答
反应webpack捆大
、、、、
我有一个使用react开发的网站，它只有一个页面，但是产品包的大小是1.11 MiB。我正在使用防火墙，火柴存储，材料-用户界面，反应-redux为这个应用程序工作良好，一切都很好，除了捆绑大小。 const path = require('path');
var CompressionPlugin = require('compression
浏览 3提问于2021-04-17得票数 7
回答已采纳
2回答
模块导入和破坏性能
、、、、
我做了一些测试，比较了包大小，使用了两个文件导入的不同组合：import RaisedButton from 'material-ui/RaisedButton'
// or import，仅使用import RaisedButton from 'material-ui/RaisedButton'，包将类似于24k LoC (material负载反应依赖项)。使用import {RaisedButton} from &#x
浏览 2提问于2016-07-03得票数 14
回答已采纳
1回答
我们有一个共享的npm包，它可以自定义react material按钮，以便它可以被多个应用程序使用。例如，如果我的npm包名称是custom-npm-packageimport { Button } from '@material-ui/core') {}
export default React.forwardRef(Cus
浏览 2提问于2021-02-17得票数 1
我有一个简单的组件，我试图在构建过程中使用webpack，所以我有如下所示import { AppBar } from 'material-ui在我的构建过程中，我从包中排除了这样的反应： react: { commonjs2: 'react',commonjs: 'react',
amd
浏览 0提问于2016-04-18得票数 3
webpack会不会对已经和webpack捆绑在一起的套餐进行去重呢？例如，| Webpack bundle 1 | |------------------| | react@15.5 | | jquery@3.0 |
| Webpack appbundle | |--------------------| | react@15.5 | | jquery@3.1 | | Webpack bundle 1 |<e
浏览 7提问于2017-05-15得票数 0
我已经克隆了这个存储库：
npm install结果: build.js文件大小约为1MB。
浏览 7提问于2018-08-05得票数 0
回答已采纳
我的webpack.config的loaders css部分如下所示： test: /\.(scss|css)$/,
loader: 'style-loader!css-loader?
浏览 3提问于2016-02-22得票数 0
我正在编写一个web应用程序，使用react和webpack作为我的模块捆绑器。到目前为止，我的jsx代码非常轻量级，整个文件夹的大小是25kb。不过，我用webpack创建的bundle.js是2.2MB。在使用-p标志运行优化之后，它将包减少到700kb，这仍然是非常大的。var path = requir
浏览 115提问于2015-12-12得票数 61
回答已采纳
我所看到的问题是在Webpack 4释放之前提出的，没有具体问到国家预防机制，也没有得到明确的回答。假设我使用webpack将包含依赖项的包捆绑在一起，我不想将这些依赖项归类为webpack外部和npm对等依赖。然后，我将此软件包发布给npm。1.)当项目被捆绑</
浏览 0提问于2018-10-22得票数 3
回答已采纳
第一个是使用一个import子句并在方括号中指定我想要的类：第二个是在不同的import子句中指定每个类：import CssBaseline from '@material-ui/core/CssB
浏览 9提问于2020-01-01得票数 6
回答已采纳
1回答
关于webpack的问题。当捆绑模块时，webpack根据入口点的位置运行应用程序。此时，当入口点设置为multiple时，将创建一个由入口点数量构建的文件。如果捆绑包按条目捆绑到Web包中，则可以将它们捆绑到捆绑包A和B中。此时，我在A捆绑包中使用了一个名为HELLO的模块，在B模块中使用了一个名为HELLO的模块。此时，当与web包捆
浏览 14提问于2017-02-16得票数 0
我把资料-ui从material-ui/index.js打包到资料-ui.js，用于对外服务。导入语句如下webpack应该如何配置，以排除物质-ui作为外部依赖？import material-ui from 'material-ui'
浏览 3提问于2016-05-08得票数 4
1回答
在我的react / webpack项目中，我使用ContextReplacementPlugin来捆绑我需要的语言环境文件--module.exportsplugins: [};
这段代码正确地<e
浏览 0提问于2020-01-23得票数 0
3回答
我正在使用webpack来捆绑我的react项目。我的项目依赖于以下组件的material-ui：material-ui/styles/getMuiThemematerial-ui/TextField
webpack</
浏览 3提问于2016-08-19得票数 8
我目前有一个RequireJS应用程序，我们正在将其转换为Webpack。但是，应用程序的某些部分是动态加载的，这意味着它们当然不能是Webpack捆绑包的一部分。当然，这会导致RequireJS加载原始的、预捆绑的代码并实例化它，导致代码重复和例如。事件消息总线不会在Webpack和RequireJS之间共享。现在的问题是:有没有可能以某种方式将Webpack配置到捆绑包的一些已知部分，然后配置R
浏览 10提问于2018-02-07得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
