用npm+webpack构建React

最新推荐文章于 2022-12-03 17:40:41 发布
最新推荐文章于 2022-12-03 17:40:41 发布
阅读量216 收藏
点赞数
分类专栏： react 文章标签： react webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/My_Java_Life/article/details/84504472
版权

项目结构

项目结构

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="index"></div>
    <!-- 测试打包后的注释是否还在 -->
    <script src="index.bundle.js" ></script>
</html>

========================================================================================
demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="demo1"></div>
    <script src="demo1.bundle.js"></script>
</body>
</html>

index.js

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
    <h1>Hello React</h1>,
    document.getElementById("index")
)


=====================================================================================
demo1.jsx

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
    <h1>Hello React</h1>,
    document.getElementById("demo1")
)

webpack.config.js配置

var webpack = require('webpack');
var path = require('path');
//用于打包html文件 webpack本身无法打包html
var htmlWebpackPlugin = require('html-webpack-plugin');
//用于在构建前清除dist目录中的内容
const CleanWebpackPlugin = require('clean-webpack-plugin');

//打包html
function bundleHtml(x, y) {
  return new htmlWebpackPlugin({
    //指定要打包的html的文件 路径的默认前缀是context属性值 即__dirname + '/src' + x
    template: x,
    //指定输出路径和文件名 路径的默认前缀是output.path属性值 即__dirname + '/dist/' + y
    filename: y,
    //不在打包后的html中引入js
    inject: false,
    minify: {
      removeComments: true, //去掉注释
      // collapseWhitespace: true, //去掉空行
    }
  })
}
module.exports = {
  context: __dirname + '/src', //这里表示入口，__dirname表示当前目录
  entry: {
    demo1: "./demo1/demo1.jsx",
    react_ajax: "./react_ajax/react_ajax.jsx"
  }, //这里是入口文件
  mode: 'development', //这里表示开发模式，开发模式下webpack打包之后代码不压缩 默认为production
  devtool: 'source-map',// 控制台中可以查看源码 详情查看 https://mp.csdn.net/postedit/84205227
  module: {
    rules: [ //在webpack3+以上的版本使用rules
      {
        test: /(\.jsx|\.js)$/,
        exclude: /(node-modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  output: { //这里是出口
    path: __dirname + '/dist/', //出口文件夹 
    filename: '[name]/[name].bundle.js', //出口打包后的文件名
    publicPath: '/'
  },

  plugins: [
    //清除dist构建目录文件
    new CleanWebpackPlugin(['dist']),
    bundleHtml("./demo1/demo1.html", "demo1/demo1.html"),
    bundleHtml("./react_ajax/react_ajax.html", "react_ajax/react_ajax.html"),
  ],
  devServer: {
    contentBase: './dist',//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转.
    inline: true
  }
}

package.json配置

点击链接查看webpack与webpack-dev-server的区别

{
  "name": "react_study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --watch",
    "server": "webpack-dev-server --inline --hot --open"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^8.0.0",
    "clean-webpack-plugin": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  }
}
My_Java_Life
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React+Webpack+babel项目搭建
10-29
React+Webpack+Babel项目搭建，适合新入坑的同学们学习。
使用NPM进行webpack+react 基础环境配置
Snowliwj的博客
08-03 653
使用NPM进行webpack+react 基础环境配置 最近学习react，所以环境配置就必不可少，下面是自己整理的属于自己的一种webpack+react基础环境配置 前提 在自己的机子上已经安装了node.js，如果没有，请先安装node.js，具体的操作可以百度。安装时注意自己的操作系统。 项目初始化 先用命令创建一个文件夹react（mkdir react），进入这个...
cnpm安装webpack_如何通过npm来安装react？
weixin_39883440的博客
11-30 85
1.通过 npm 使用 React1.在要写练习的目录上打开cmd命令行，输入npm i cnpm -g --registry=https://registry.npm.taobao.org国内使用 npm 速度很慢，所以我们可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:最后的参数就是淘宝的镜像仓储url-g表示是全局安装这个命令的意思是，使用npm，从远程仓...
webpack npm打包配置(react版本)
weixin_38208314的博客
09-01 1770
1.安装node和npm，新建文件夹，在文件夹中执行npm init命令，一直回车生成一个package.json文件如下： { "name": "cobrandcard", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no ...
创建 Npm+webpack
weixin_30819163的博客
07-08 72
准备工作 1. 借助Node.js环境里的npm来安装； 下载node并进行安装：https://nodejs.org/zh-cn/ 2. 设置好npm镜像； 使用淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安装npm镜像，以后再用到npm的地方直接用cnpm来代替就好了 3. 安装完...
nodejs + webpack + react
09-29
标题 "nodejs + webpack + react" 暗示了我们讨论的是一个基于Node.js环境的前端项目，其中使用Webpack作为模块打包工具，并结合React库来构建用户界面。这个项目利用Webpack的强大功能，如自动化打包、模块管理和...
浅谈React + Webpack 构建打包优化
08-28
本篇文章介绍了 React + Webpack 构建打包优化的方法，包括使用 babel-react-optimize 对 React 代码进行优化检查和使用 Webpack.DLLPlugin 和 HappyPack 来提高构建速度和减少打包后的文件体积。这些方法可以帮助...
react-webpack：构建react + webpack + es6环境
01-31
这是一个建造webpack + react项目脚手架的简易教程，参照了的配置方式。每一个例子都有非常详细的建造步骤。 运行并启动项目 克隆项目到本地以后，选择要运行的示例进入到该项目路径下 安装： npm install 运行： ...
typescript+react+webpack+react-bootstrap搭建
06-29
npm i -S react-bootstrap react react-dom @types/react-bootstrap @types/react @types/react-dom 配置文件步骤 npm init /*生成package.json*/ tsc --init /*生成tsconfig.json*/ 进入node_modules\.bin目录执行...
利用React-router+Webpack快速构建react程序
09-01
通过React、Webpack和React-Router，我们可以快速构建一个React应用程序，实现模块化开发，同时利用Webpack进行资源管理和优化，以及React-Router进行页面间的导航控制。这个过程涵盖了项目初始化、依赖安装、...
基于webpack从零开始自己配置react项目
vity_tong的博客
12-03 1108
每当自己想要用心写demo的时候，会发现项目开始之前的配置总是让我很烦，如果直接使用脚手架生成一个react项目，看起来方便，但是事实上一大堆配置文件很多都用不上或者看不懂，而且本身就是基于webpack实现的，但是它的配置文件并没有暴露出来，开发者也不知到它内置了哪些功能，哪些插件，非常难受，所以从零开始配置属于自己的webpack+react项目框架
Webpack构建基本的React+ES6项目 --- 图片的路径与打包
大灰狼的小绵羊哥哥的博客
02-16 4076
webpack是最近比较火的构建工具，搭配上同样比较火的ReacJS与ES6(ES2015)一定是现在很多潮流 programmer 的追求。 废话不多，下面就就看下如何从0搭起我们的构建工具。  http://www.cnblogs.com/ghost-xyx/p/5812902.html 安装 全局安装webpack，如果安装后还是提示没有webpack commond，可以
npm搭建React项目
u012859720的博客
04-24 1万+
要想使用npm，首先安装node.js一.安装全局包$ npm install babel -g $ npm install webpack -g $ npm install webpack-dev-server -g二.创建根目录创建一个根目录，目录名为：myApp，再使用npm init初始化，生成package.json文件：$ mkdir myApp $ cd myApp/ $ npm in
react安装篇
纵横四海的博客
07-09 1563
1.首先安装npm 我是直接安装nodejs就会自动安装了的，环境是mac➜ portal git:(master) ✗ node -v v6.11.0 ➜ portal git:(master) ✗ npm -v 3.10.10 你也可以手动安装参考这里 2.接下来 就可以安装react了,详情请参考官网npm install -g create-react-app create-
【NPM】npm i webpack -g或npm i create-react-app -g之后提示command not found解决方案
lizhengxv的博客
06-10 1929
鄙人之前在安装webpack，yarn，react-react-app，vue-init时，明明是按着官方文档进行安装的，而且提示安装成功了 npm i webpack webpack-cli -g npm i create-react-app -g npm i yarn -g 不管是 -g 还是–save都不管用，但是老是出现 xxx command not found如下图所示 什么鬼？提...
React 项目开发中的常见问题
weixin_30493321的博客
12-30 785
React 中, 在Controlled(受控制)的文本框中输入中文onChange会触发多次 Issues 通过输入法输入中文,日文，不管哪种一种用拼音的、笔划的，只要按下键盘的动作都会触发文本框的change事件。 但是React中的受控组件都通过触发change事件后得到的值再去更新组件的value, 这样不停的触发change，导致value一直在更新，...
React+Webpack+ES6从环境搭建到HelloWorld
热门推荐
pcaxb的专栏
08-15 2万+
转载请注明预见才能遇见的博客：http://my.csdn.net/ React是一个Facebook和Instagram用来创建用户界面的JavaScript库,是现在最热门的前端框架。Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过
手把手教你使用Webpack打包React项目
杜小白的博客
05-10 2万+
什么是Webpack？   webpack是一个前端资源加载/打包工具，前端的常用资源都可以作为一个模块导出，我们在代码中直接引用即可，最后按照我们的配置把代码打包整合起来。先来认识一下webpack的基本配置现在开发搭建开发环境第一步：在react-music-player文件目录下，执行npm init创建package.json文件。这时，代码当中的配置文件就已生成啦：第二步：现在配置文件中...
关于React框架的搭建（Webpack的安装与使用）
Tony1590112的博客
10-23 4235
什么是webpack？ webpack是一个模块打包工具，在前端中模块指的就是js，css，图片等类型文件。webpack支持多种模块系统，而且兼容js的多种书写规范（如ES6），它可以处理模块间的相互依赖关系，对静态资源进行统一打包和发布。 webpack的安装与使用 首先我们创立一个文件夹如study，在开始菜单打开cmd，进入该文件夹，然后进行以下步骤： 1、npm
webpack 构建react
最新发布
09-14
要使用Webpack构建React应用，可以按照以下步骤进行操作： 1. 首先，在项目根目录下创建一个package.json文件，可以使用命令`npm init -y`快速创建。 2. 接下来，安装所需的依赖包。至少需要安装以下几个包：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值