webpack react基础配置二 热加载

用到 webpack-dev-server  先安装,注意 装到全局 还是本项目我也没注意  因为之前一直报错,有很小可能是安装到本地解决了,或者是我网络问题:

装到全局:$ npm install webpack-dev-server -g

装到本地: $ npm install webpack-dev-server --save-dev

修改配置文件   图片有说明:

执行命令 直接打包,无需刷新浏览器  自动刷新代码(局部刷新):

$ webpack-dev-server --port 3000 --hot --inline

这样修改如下css可以不刷新浏览器 直接看到效果  这样有个好处  很多开发用两个浏览器,这边改代码  另一边直接看效果了 很方便:

 其实配置好配置项了  可以直接打包:

$ npm run build   如下:

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于 webpackReact 的结合,你可以使用 webpack 来构建 React 应用程序。下面是一些基本的步骤: 1. 首先,确保你已经安装了 Node.js 和 npm。可以在终端中运行以下命令来检查是否已经安装成功: ``` node -v npm -v ``` 2. 创建一个新的项目文件夹,并在终端中进入该文件夹。 3. 初始化一个新的 npm 项目,并按照提示进行设置: ``` npm init ``` 4. 安装 React 相关的依赖包。运行以下命令: ``` npm install react react-dom ``` 5. 安装 webpack 和相关的依赖包。运行以下命令: ``` npm install webpack webpack-cli webpack-dev-server babel-loader @babel/preset-react @babel/preset-env html-webpack-plugin --save-dev ``` 6. 在项目根目录下创建一个名为 `webpack.config.js` 的文件,并将以下代码复制到该文件中: ```javascript const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'] } } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ], devServer: { contentBase: path.resolve(__dirname, 'dist'), port: 3000 } }; ``` 7. 在项目根目录下创建一个名为 `src` 的文件夹,并在该文件夹中创建一个名为 `index.js` 的文件。在 `index.js` 文件中,编写你的 React 应用程序的代码。 8. 在项目根目录下创建一个名为 `src` 的文件夹,并在该文件夹中创建一个名为 `index.html` 的文件。在 `index.html` 文件中,编写一个空的 HTML 页面。 9. 在终端中运行以下命令来启动 webpack 开发服务器: ``` npx webpack serve ``` 这将启动一个本地服务器,并在浏览器中自动打开你的 React 应用程序。 这是一个基本的使用 webpack 构建 React 应用程序的流程。你可以根据需要进行更多的配置和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值