从零开始搭建webpack+react开发环境

最新推荐文章于 2024-04-13 13:31:30 发布
最新推荐文章于 2024-04-13 13:31:30 发布
阅读量108 收藏
点赞数
文章标签： webpack json javascript ViewUI
原文链接：https://juejin.im/post/5af17cd5518825670d731065
版权

环境主要依赖版本

  • webpack@4.8.1
  • webpack-cli@2.1.3
  • webpack-dev-server@3.1.4
  • react@16.3.2
  • babel-core@6.26.3
  • babel-preset-env@1.6.1
  • bable-preset-react@6.24.1

webpack安装及配置

1. 起步

新建项目目录，初始化npm，新建开发源目录

mkdir webpack-react && cd webpack-react
npm init -y
mkdir src
复制代码

2.webpack-cli

webpack从4.x版本开始，需要同时安装webpack，webpack-cli(此工具用于在命令行中运行webpack)。

npm install webpack webpack-cli --save-dev
复制代码

3.wepback配置文件

在项目根目录新建webpack.config.js文件，此文件为webpack运行核心文件。

webpack.config.js 基本配置
// webpack.config.js
const path = require('path');

module.exports = {
    entry: './src/index.js',                           // 入口文件
    output: {                                             // webpack打包后出口文件
        filename: 'app.js',                             // 打包后js文件名称
        path: path.resolve(__dirname, 'dist')    // 打包后自动输出目录
    }
}
复制代码

package.json 文件 scripts配置

"scripts": {
    "build": "webpack"
}
复制代码

此时在命令行运行npm run build，就能执行webpack了，webpack会自动去找项目根目录里的webpack.config.js文件，执行打包。

npm run build
// webpack打包后的项目
├── dist
│   └── app.js             // 打包后的app.js
├── package.json
├── src
│   └── index.js           // 源目录入口文件
└── webpack.config.js
复制代码
webpack.config.js module相关配置

webpack 视所有文件都为模块，图片，css文件，字体等静态资源都会打包进js文件，所以会需要用到loader文件，更多Loaders可以查询网址，接下来我们安装一些必要的Loader文件。

npm install style-loader css-loader url-loader --save-dev
复制代码

webpack.config.js加入module模块

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'app.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: ['url-loader']
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/,
				use: ['url-loader']
			}
		]
	}
}
复制代码

引入loader后，就可以在你的src/index.js文件import你想引入的css文件或者其他静态资源。

cd src && touch main.css
复制代码

src/index.js 文件引入css

import "./main.css";
复制代码
webpack.config.js plugins配置

主要的js文件和静态文件都能成功打包成一个js文件后，我们需要把这个js文件放到html文件里，webpack插件***html-webpack-plugin***就是干这个事儿的，它能自动生成一个html文件并把我们打包好的js文件放入html。

npm install html-webpack-plugin --save-dev
复制代码

webpack.config.js 配置plugins

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入插件

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'app.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: ['url-loader']
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/,
				use: ['url-loader']
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({title: 'production'})		// 配置plugin
	]
};
复制代码

执行npm run build后，我们可以看到dist目录多出一个index.html文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>name</title>
  </head>
  <body>
 // 打包后的app.js已经被自动插入了html文件
  <script type="text/javascript" src="app.js"></script></body>
</html>
复制代码

到这里，webpack最简单最基本的需求已经配置完毕。 此时项目结构为：

├── dist                        // 生产目录
│   ├── app.js
│   └── index.html
├── package.json
├── src                        // 源目录
│   ├── index.js
│   └── main.css
└── webpack.config.js
复制代码

React 的webpack配置

安装react
npm install react react-dom --save
复制代码
安装react，wepback转换依赖

React组件由JSX组成，浏览器无法识别JSX，需要babel进行转换。

  • babel-croe 为babel核心文件
  • babel-preset-env 将ES6转义成ES5
  • babel-preset-react 将JSX转义成js
  • babel-loader webpack的babe转换
npm install babel-core babel-preset-env babel-preset-react babel-loader --save-dev
复制代码
.babelrc配置文件

在项目根目录下新建.babelrc文件，此文件为bable核心配置，babel会自动在项目根目录下识别。

// .babelrc
{
	"presets": ["env", "react"]
}
复制代码
webpack babel-loader 配置
// 在webpack.config.js 的modules.rules中加入此配置
{
	test: /\.(js|jsx)$/,
	exclude: /node_modules/,
	use: {
		loader: 'babel-loader'
	}
}				    
复制代码
html-webpack-plugin 模板配置

我们知道react需要获取页面一个根元素，然后render才会生效，我们可以新建一个html文件，让html-webpack-plugin插件基于这个文件来进项打包。

所以我们在根目录下新建一个html文件，以此文件作模板。

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
        // react需要的渲染根元素
	<div id="root"></div>
</body>
</html>
复制代码

此时webpack.config.js配置:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'app.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader'
				}
			},
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: ['url-loader']
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/,
				use: ['url-loader']
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			title: 'production',
			template: './index.html'    // 模板文件位置
		})		
	]
};
复制代码
书写React，运行webpack
// src/index.js
import React from 'react';
import ReactDom from 'react-dom';

import './main.css'

ReactDom.render(
	<h1>hello world</h1>,
	document.getElementById('root')
);
复制代码

运行npm run build，生成dist目录，打开dist目录中的index.html文件，可以发现浏览器已正常渲染"hello world"。

dev环境热更新配置

react的wepack完成以后，是不是发现每修改一次代码，想看到效果，得重新打包一次才行。webpack-dev-server配置可以帮助我们实现热更新，在开发环境解放我们的生产力。

安装webpack-dev-server
npm install webpack-dev-server  --save-dev
复制代码
webpack.config.js 配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'app.js',
		path: path.resolve(__dirname, 'dist')
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader'
				}
			},
			{
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: ['url-loader']
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/,
				use: ['url-loader']
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			title: 'production',
			template: './index.html'    
		}),
		// hot 检测文件改动替换plugin
		new webpack.NamedModulesPlugin(),      
		new webpack.HotModuleReplacementPlugin()		
	],
       // webpack-dev-server 配置
	devServer: {
		contentBase: './dist',
		hot: true
	},
};
复制代码
运行webpack-dev-server

在 package.json 文件 加入 scripts 配置：

"scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server --open --mode development"  // webpack-dev-server
},
复制代码

命令行运行 npm run dev

可以在浏览器中输入localhost:8080 内容即为dist目录下的index.html内容。修改src/index.js中的内容或者依赖，即实时在浏览器热更新看到。

至此，react的webpack的基础开发环境已全部配置完毕。

转载于:https://juejin.im/post/5af17cd5518825670d731065

weixin_34109408
关注
从零开始，教你用Webpack构建React基础工程
TheBadWaka的博客
10-19 3819
前言随着前端代码越来越多，越来越复杂，整个工程变得越来越难以管理。所以，前端工程化已是必然的趋势，已经是2016年了，还在用手动添加依赖吗？快来学习用构建工具来管理web项目吧。就像是Android工程使用gradle来进行项目构建一样，在前端世界里，现在最流行的工具就是webpack。而现在最流行的前端框架，分别是Google的Angular.js，Facebook的React.js，还有我们国人
从零开始搭建webpack+react+redux项目
u012510478的博客
11-14 693
从零开始搭建webpack+react+redux项目 前段时间做了一个react项目，现在总结一下项目搭建的过程。 1. 准备 动手之前，我们首先要想好要用到的技术栈。我的项目使用了webpack4+react 16+redux+react-redux+react-router的技术栈，网络请求使用axios库，为了书写方便，css使用scss预处理器。 然后需要考虑项目打包出来最后的目录结构是...
使用 webpack 搭建 React 项目
weixin_33937913的博客
08-07 223
2019独角兽企业重金招聘Python工程师标准>>> ...
【教程】Webpack搭建React开发环境详细步骤
柯晓楠
02-26 828
1. 安装Node.js Webpack实际是用Node.js写的，所以要先安装Node.js环境。而且Node.js中集成了NPM包管理，我们在后面用到的很多模块都需要使用NPM下载。 首先进入Node.js的官网，选择对应系统下载安装包，对于 windows 用户，直接下载安装包安装即可，如果是 Macos 用户，推荐使用 brew 进行安装。Node.js有很多版本，包括稳定版和开发版，不同...
Webpack搭建React项目
乔木的博客
06-03 257
Webpack搭建React项目 先创建一个myapp的文件夹，然后运行cmd 第一步 安装模块 初始化，生成package.json npm init -y 安装react模块 我这选择的版本是 16.13.1 #安装react npm install react@16.13.1 --save #安装react-dom cnpm install react-dom@16.13.1 --save 安装webpack工具 #安装webpack和webpack-cli npm install webpack
详述webpack+react开发环境搭建步骤
"本文将详述如何从零开始搭建基于webpack和react的开发环境，包括必要的依赖版本、项目创建步骤、webpack的安装与配置、以及webpack配置文件的关键设置。" 在构建一个现代JavaScript应用时，webpack是不可或缺的...
使用webpack搭建react项目
叫我阿豪
08-10 2012
1、新建webpack.base.conf.js文件，部分代码仅供参考。2、新建用于开发环境的webpack.dev.conf.js 文件。3、新建webpack.prod.conf.js文件。
Webpack搭建React开发环境
最新发布
2303_79056168的博客
04-13 864
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**
最小白的webpack+react环境搭建
weixin_30535565的博客
08-17 235
本文也同步发表在我的公众号“我的天空” 从零开始，用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境。 最近在玩webpack+react+移动端，那么第一步自然是搭建相关的环境，本来网上的教程很不错，只是前端相关的东西发展太过迅猛，只相隔了半年有些东西的版本就不对了，有些配置、命令等照着之前的教程做就可能会掉到坑里去，别问我怎么知道的，我刚刚从坑里爬出...
开发React 环境搭建使用webpack
qq_33683097的博客
08-02 652
第一步创建空工程 npm init 将项目依赖包写入package.json，如下（会说明每个包的作用）这是本人习惯的依赖包，并没有做环境分离 "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-plugin-transform-object-rest-sp.
基于webpack的React项目搭建(一)
ccForTaeyeon的博客
04-11 563
原博客地址：https://www.cnblogs.com/raion/p/8053799.html项目创建创建一个文件夹first-react，进入该目录，在该目录下打开一个终端，执行npm init。根据提示输入内容，也可以直接按回车键跳过。执行完后目录中会多一个package.json文件，这是项目的核心文件，包含包依赖管理和脚本任务。 mkdir first-react cd first-...
简单的webpack+react的项目搭建
lANcElOT的博客
08-17 341
脚手架真的太恶心人咯。前端的技术日新月异，不看API连方法变了都不知道 废话少说，开始搭建吧 首先是nodejs和npm，webpack是依赖于nodejs的，npm是包管理工具，由于比较简单且老生长谈，这里不做赘述，提供一个网址参考一下https://www.runoob.com/nodejs/nodejs-tutorial.html 然后在项目根目录下执行npm init 会自动创建一个...
webpack手写创建react项目
w_hx10的博客
06-15 265
webpack手写配置初始化react项目
132. 【前端】webpack-搭建-React-应用环境（一）
七镜的博客
02-20 165
好了，接下来可以随便玩了，想怎么改怎么改，不需要再受看不懂 create-react-app 这种脚手架配置的气了。十、package-lock.json 文件内容（随 npm 自动生成的，无需关注）十二、webpack.config.js 文件内容。八、babel.config.json 文件内容。十一、tsconfig.json 文件内容。九、package.json 文件内容。七、index.tsx 文件内容。五、app.scss 文件内容。六、app.tsx 文件内容。
webpack4搭建react项目实现前端模块化
weixin_39168678的博客
03-26 6526
webpack4搭建react项目实现前端模块化 首先，你得把node.js,npm装好，然后新建一个文件夹app 1cmd到这个文件夹下输入指令 npm init -y 这时，app 下会生成一个 package.json 文件 2项目中安装 webpack npm install -D webpack -D就是–save-dev 这样安装的包的名称及版本号就会...
从零开始，用Webpack构建React基础教程
2401_83916394的博客
03-29 944
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
Webpack搭建ES6开发环境步骤
达拉崩巴斑得贝迪卜多比鲁翁_
05-29 292
Webpack搭建ES6开发环境步骤 第一步 安装模块 1.创建package.json文件 手动配置 npm init 自动配置 npm init -y 2.安装webpack和webpack-cli **cnpm install webpack webpack-cli --save-dev** 3.安装babel相关 安装 babel和react相关加载器 cnpm i babel-loader @babel/core @babel/preset-env -D 安装css加载器 cnpm i c
搭建 react+webpack开发环境
wen_special的博客
08-13 793
以前尝试过几个教程的搭建方法但是最后都失败了，最后在豆青学姐的简书教程和李婷婷学姐的帮忙下解决了这个问题，下面简单记录一下。1.创建项目文件夹webpack-hello-demonpm init 初始化文件夹产生package.json文件2.安装webpack (1)npm install webpack --save-dev 安装webpack依赖(2)创建index.html文件<!DO
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值