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

环境主要依赖版本

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

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

搭建 webpack + React 开发环境
说在开头上个月断断续续的在研究webpack的配置,但是很多网上的文章基本上都是只说了开发环境的配置,而忽略了生产环境的配置.大致研究了一下门路,然后就来写一篇随笔让自己能在以后能有个地方可以做参考 ...
GO学习-(2) 从零开始搭建Go语言开发环境
从零开始搭建Go语言开发环境一步一步,从零搭建Go语言开发环境. 安装Go语言及搭建Go语言开发环境下载下载地址 Go官网下载地址:https://golang.org/dl/ Go官方镜像站( ...
从零开始搭建Go语言开发环境
一步一步,从零搭建Go语言开发环境. 安装Go语言及搭建Go语言开发环境下载下载地址 Go官网下载地址:https://golang.org/dl/ Go官方镜像站(推荐):https://gol ...
如何搭建 node,react 开发环境
项目相关内容:Sublime + Node + React --注意:在 windows 操作系统中,如果把 node 安装在系统盘(一般是C盘),会导致 node 没有操作文件的权限的问题,如无法新 ...
从零开始搭建Webpack+react框架
1.下载node.js Node.js官网下载 , 安装: 安装成功后在控制台输入node -v 可查看当前版本: $ node -v v10.15.0 输入npm -v查看npm版本: $ npm ...
Webpack笔记（二）——搭建React开发环境
前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...
搭建 webpack、react 开发环境（三）
配置 react-router-dom 我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...
搭建 webpack、react 开发环境（二）
配置处理样式文件到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...
搭建 webpack、react 开发环境（一）
基本介绍 Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.le ...

随机推荐

【转】代码中特殊的注释技术——TODO、FIXME和XXX的用处
(转自:http://blog.csdn.net/reille/article/details/7161942) 作者:reille 本博客网址:http://blog.csdn.net/reille ...
Javascript 弱类型：除法结果是小数
由于javascript是弱类型,只有一种var类型,所以在运算时不会自动强制转换,所以计算的结果是多少就是多少,但java中的17/10的结果就是1(强类型与弱类型)比如:console.log(M ...
Binary Tree Level Order Traversal java实现
Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...
Hadoop RCFile存储格式详解（源码分析、代码示例）
RCFile RCFile全称Record Columnar File,列式记录文件,是一种类似于SequenceFile的键值对(Key/Value Pairs)数据文件. 关键词:Reco ...
Angular - - &dollar;interpolate 和 &dollar;parse
$interpolate 将一个字符串编译成一个插值函数.HTML编译服务使用这个服务完成数据绑定. 使用:$interpolate(text,[mustHaveExpression],[truste ...
[机器学习] Apriori算法
适用场合 Apriori算法包含两部分内容:1,发现频繁项集 2,挖掘关联规则. 通俗地解释一下,就是这个意思:1.发现哪些项目常常同时出现 2.挖掘这些常常出现的项目是否存在“如果A那么B”的关系. ...
Java经典编程题50道之三十二
取一个整数a从右端开始的4-7位. public class Example32 { public static void main(String[] args) { cut(12 ...
JS对象与原型链
每个函数都存在一个prototype的属性,然后这个属性值为一个对象,我们称之为原型对象每个对象都存在着一个隐藏的属性"__proto__" 这个属性引用了创建这个对象的函数的p ...
[JUC-2]AbstractQueuedSynchronizer源码分析
AbstactQueuedSynchronizer的基本数据结构 AbstractQueuedSynchronizer的基本数据结构为Node,关于Node,JDK作者写了详细的注释,这里我大致总结几 ...
IIC基本概念和基本时序
1. IIC基本概念和基本时序 1.1 I2C串行总线概述 I2C总线是PHLIPS公司推出的一种串行总线,是具备多主机系统所需的包括总线裁决和高低速器件同步功能的高性能串行总线. 1.I2C总线具有 ...