备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2018-07-17 1690
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

环境主要依赖版本

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

安装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的基础开发环境已全部配置完毕。

原文发布时间为：2018年05月08日
原文作者： 会写代码的husky

本文来源：开源中国 如需转载请联系原作者






文章标签：
前端开发
JavaScript
关键词：
Webpack React
Webpack开发环境
react.js webpack
react.js开发环境
webpack react.js开发环境
李一花
目录
相关文章
卡尔特斯
|
7月前
|
JavaScript 测试技术
Webpack - Vue 配置开发环境与正式环境
Webpack - Vue 配置开发环境与正式环境
卡尔特斯
92 1
夜斗(dou)
|
8月前
|
缓存 JSON 前端开发
2023年最新前端面试题汇总大全二（含答案超详细，Vue，TypeScript，React，微信小程序，Webpack 汇总篇）-- 持续更新 7
2023年最新前端面试题汇总大全二（含答案超详细，Vue，TypeScript，React，微信小程序，Webpack 汇总篇）-- 持续更新
夜斗(dou)
437 0
Boale_H
|
1月前
|
前端开发 JavaScript 容器
前端vw自适应解决方案，适用pc端以及移动端，适用webpack以及vite，适用vue以及react
前端vw自适应解决方案，适用pc端以及移动端，适用webpack以及vite，适用vue以及react
Boale_H
67 0
卡尔特斯
|
7月前
|
JavaScript
Webpack 配置开发环境与正式环境
Webpack 配置开发环境与正式环境
卡尔特斯
47 0
鋜斗
|
4月前
|
安全 前端开发 中间件
webpack开发环境
webpack开发环境
鋜斗
41 0
田八
|
4月前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> React全栈环境
《Webpack5 核心原理与应用实践》学习笔记-> React全栈环境
田八
38 0
qq_734449600
|
4月前
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
qq_734449600
44 0
祈澈菇凉
|
5月前
|
资源调度 前端开发 JavaScript
三分钟搭建React开发环境
三分钟搭建React开发环境
祈澈菇凉
134 0
祈澈菇凉
|
5月前
|
资源调度 前端开发 JavaScript
从零开始学习React-开发环境的搭建（一）
从零开始学习React-开发环境的搭建（一）
祈澈菇凉
33 0
GoodTime
|
6月前
|
资源调度 前端开发 JavaScript
简单搭建react开发环境
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 安装前需要安装：node.js、vscode 一、node.js使用 运行Node.js command prompt，输入命令： npx create-react-app my-app （如下图） 安装完成截图如下： 至此，react安装完成，可以直接在npom控制台运行，我放到v..
GoodTime
24 0
简单搭建react开发环境

热门文章

最新文章

  • 1
    发现了一款宝藏学习项目，包含了Web全栈的知识体系，JS、Vue、React知识就靠它了！
  • 2
    Vite和Webpack的区别是什么
  • 3
    【React】React原理面试题集锦
  • 4
    vue/react项目刷新页面出现404的原因以及解决办法
  • 5
    目前最流行的一些前端框架：React、Angular、Vue.js和jQuery
  • 6
    React 是什么？有什么特性？有哪些优势？
  • 7
    create-react-app配置环境变量
  • 8
    前端vw自适应解决方案，适用pc端以及移动端，适用webpack以及vite，适用vue以及react
  • 9
    【React】Hooks面试题集锦
  • 10
    从零开始搭建react+typescript+antd+redux+less+vw自适应项目
  • 1
    【React】React原理面试题集锦
    34
  • 2
    发现了一款宝藏学习项目，包含了Web全栈的知识体系，JS、Vue、React知识就靠它了！
    33
  • 3
    【React】Hooks面试题集锦
    51
  • 4
    react保姆级搭建新项目
    28
  • 5
    使用React、TypeScript和Ant Design构建现代化前端应用
    24
  • 6
    使用React、Redux和Bootstrap构建社交媒体应用
    14
  • 7
    深入探究React：前端开发的利器
    22
  • 8
    【前端】深入了解React JSX语法及实例应用
    16
  • 9
    利用React Hooks优化前端状态管理
    35
  • 10
    目前最流行的一些前端框架：React、Angular、Vue.js和jQuery
    101

    • 相关课程

    更多
  • 前端自动化构建工具 Webpack
  • React 入门与实战
  • React 入门教程开发文档
  • 前端开发框架Bootstrap使用教程
  • Python Web 框架 Flask 快速入门
  • Python Web 框架 Django 快速入门

    • 相关电子书

    更多
  • 利用编译将 Vue 组件转成 React 组件
  • React Native 全量化实践
  • React在大型后台管理项目中的工程实践

    • 相关实验场景

    更多
  • 1分钟SAE部署Web在线游戏
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • 前端开发基础6：Node.js和LESS预编译工具
  • WEB网页编程实战
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）