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

环境主要依赖版本

  • [email protected]
  • [email protected]
  • [email protected]
  • [email protected]
  • [email protected]
  • [email protected]
  • [email protected]

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://www.cnblogs.com/zhengguangaa/p/9012329.html

时间: 2024-10-14 06:54:38

从零开始搭建webpack+react开发环境的相关文章

搭建 webpack + React 开发环境

说在开头 上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考. 正文开始 我就假装大家都是装了node的情况下. 1.进入项目目录,运行`npm init`按照步骤填写最终生成`package.json`文件,所有使用 npm 做依赖管理的项目,根目录下都会有一个这个文件,该文件描述了项目的基本信息以及一些第三方依赖项(插件).详细的使用说明可查阅[官网文档

从零开始搭建Go语言开发环境

一步一步,从零搭建Go语言开发环境. 安装Go语言及搭建Go语言开发环境 下载 下载地址 Go官网下载地址:https://golang.org/dl/ Go官方镜像站(推荐):https://golang.google.cn/dl/ 版本的选择 Windows平台和Mac平台推荐下载可执行文件版,Linux平台下载压缩文件版. 安装 Windows安装 此安装实例以 64位Win10系统安装 Go1.11.5可执行文件版本为例. 将上一步选好的安装包下载到本地. 双击下载好的文件 Linux下

从零开始搭建微信硬件开发环境全过程——1小时掌握微信硬件开发流程

笔者决定在嵌入式企鹅圈2016年的首篇文章中,发表微信硬件物联领域极具实践价值的文章,它将能指引和帮助任何有兴趣于物联网开发的童鞋们快速掌握微信硬件开发流程,只需一个小时,而再不需要通过揣摩微信硬件浩瀚的文档资料来完成艰难构建. 笔者之前曾经撰写过一篇文章<基于微信硬件公众平台的智能控制开发流程>介绍微信硬件开发的流程,但该篇文章是理论性的描述.而本篇文章是完全可操作实践的,请结合两篇文章理解.技术咨询请发邮件至[email protected] 本篇文章的目的是快速搭建微信硬件开发的环境,完

webpack+react开发环境搭建

一.安装Node.js Node.js可以直接从官网下载,按照默认的安装方式安装即可. 二.安装webpack Webpack可以使用npm安装,新建一个空的练习文件夹,在终端中转到该文件夹后执行下述指令就可以完成安装. //全局安装 npm install -g webpack //安装到你的项目目录 npm install --save-dev webpack 三.安装webpack-dev-server //全局安装 npm install -g webpack-dev-server //

从零开始搭建Webpack+react框架

1.下载node.js Node.js官网下载 , 安装: 安装成功后在控制台输入node -v 可查看当前版本: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #000000; background-color: #ffffff } span.s1 { } $ node -v v10.15.0 输入npm -v查看npm版本: $ npm -v 6.4.1 2.创建项目 1.安装各种需要的依赖: npm i

go语言开发(一)---从零开始搭建Go语言开发环境

下载地址 Go官网下载地址:https://golang.org/dl/ Go官方镜像站(推荐):https://golang.google.cn/dl/ 安装完成后,设置环境变量 ①.在系统变量中,分别设置 GOPATH 为 D:\code\go : GOROOT 为 C:\go ②.在系统变量中, 分别添加 Path 为 D:\code\go\bin . C:\go\bin 在GOPATH目录下新建三个文件夹:bin.pkg.src Go项目结构 在进行Go语言开发的时候,我们的代码总是会保

Webpack笔记(二)——搭建React开发环境

前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一下昨天发布的笔记:入门webpack笔记 一.初始化项目文件夹 在任意目录下,新建一个文件夹作为你的项目文件夹,命名随意.随后使用命令行工具,切换到该文件夹,键入npm init进行初始化(遇到的问题一直回车就好了),初始化完成之后可以看到生成了一个package.json文件. 随后在该项目文件夹

搭建 webpack、react 开发环境(一)

基本介绍 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.less 等转换成一个静态文件,减少了页面的请求. React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,它是一个用于构建用户界面的 JAVASCRIPT 库,主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图).由于拥有较高的性能,代码逻辑非常简单,所以

windows环境下搭建vue+webpack的开发环境

前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我要把我所参考的文档和实际遇到的问题分享给大家.由于本人也是初级菜鸟一枚,如果有错误,还望谅解指正.下面言归正传: 所参考的文档链接:http://blog.csdn.net/syyling/article/details/52004892 http://www.cnblogs.com/ixxonli