文档章节

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

会写代码的husky
 会写代码的husky
发布于 2018/05/08 16:51
字数 1290
阅读 1132
收藏 23

环境主要依赖版本

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

© 著作权归作者所有

共有 人打赏支持
会写代码的husky
粉丝 6
博文 23
码字总数 17052
作品 0
北京
程序员
私信 提问
最小白的webpack+react环境搭建

本文也同步发表在我的公众号“我的天空” 从零开始,用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境。 最近在玩webpack+react+移动端,那么第一步自然是搭建相关...

我的天空-老潘
2018/08/17
0
0
从零开始搭建React开发环境(一)

项目链接:github.com/MrZhang123/… 核心 React:16.3.2 React-dom:16.3.2 Webpack:4.6.0 React-router-dom:4.2.2 Redux:4.0.0 React-hot-loader:4.1.2 目录结构 基础搭建 首先搭建一个基础的......

Mello_fe
2018/05/12
0
0
ZF2入门:Ubuntu/Linux环境下从零开始Zend Framework 2.0 (ZF...

紧接上一篇ZF2入门:Windows环境下从零开始Zend Framework 2.0 (ZF2)环境搭建,本次是Linux/Ubuntu环境下从零开始搭建系统并运行一个ZF2项目的全过程。 写日志的Linux用的是Ubuntu12.04 LTS...

AlloVince
2012/10/22
0
0
webpack4从零配置搭建简单的React16开发环境

写在最前 暑假想要学习React, 发现React官网上的没有说明如何搭建React开发环境, 网上找的很多都是基于webpack3的, 或者直接使用脚手架, 所以趁着放假, 就稍微学了下webpack, 开始搭建自己的...

Ga_hou
2018/07/22
0
0
编程微刊第四期文章汇总(2018.4)

编程微刊创立也有一段时间了,在此感谢一直关注我的小伙伴们,你们的关注和支持,是我每天不断更新的动力,我每个月会总结一期微刊,方便大家的阅读。 1. 推荐文章 这个时代,抛弃你的时候,...

祈澈姑娘
2018/05/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

python精简笔记-[5]-列表[list]

1

平头哥-Enjoystudy
24分钟前
1
0
《如何做好一场技术演讲》笔记

[TOC] 1. 精心准备 1.1. 明确演讲主题 如同架构设计一样,了解需求永远是第一位的,任何脱离需求的架构设计都是耍流氓。 想要开始演讲,首先需要了解听众的诉求,确认下面这些问题: 听众组成...

whoru
26分钟前
3
0
Oracle学习日志-4(查询基础)

首先新建一张Product表格。数据如下 语法 从表名中查询希望查询出的列的名字 SELECT <列名> FROM <表名> 例如从Product表中查询商品编号,商品名称和进货单价三列。 SELECT product_id,prod...

白话
26分钟前
2
0
【重大更新】跨平台移动开发框架Altova MobileTogether v5.0发布

MobileTogether是一款对应用程序进行精心渲染的跨平台移动开发框架,从所处设备到外形因素再到屏幕方向,很大程度的为开发人员和终端用户提供了更好的功能性与灵活性。MobileTogether包括: ...

ymy_666666
35分钟前
1
0
better-scroll的使用

目的:需要在手机端实现上拉加载数据,下拉刷新页面的功能。 使用的控件:better-scroll 难点:目前的better-scroll都是和vue一起使用,公司用的是angularjs1.x,所以需要最原始的使用然后封...

Pcat
39分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部