从零开始搭建webpack+react开发环境
环境主要依赖版本
- 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://www.cnblogs.com/zhengguangaa/p/9012329.html
从零开始搭建webpack+react开发环境相关推荐
- 1.从零开始搭建Go语言开发环境
搭建Go语言开发环境 最新1.14版本,一步一步,从零搭建Go语言开发环境. 安装Go语言及搭建Go语言开发环境 下载 下载地址 Go官网下载地址:https://golang.org/dl/ Go官 ...
- 从零开始搭建Go语言开发环境
下载 下载地址 Go官网下载地址:Downloads - go.dev Go官方镜像站(推荐):Downloads - go.dev 版本的选择 Windows平台和Mac平台推荐下载可执行文件版,L ...
- 从零开始搭建Linux嵌入式开发环境
声明:本人依据正点原子开发手册以及0年开发经验编撰,内容并不详细,比如新建用户弹出的输入提示如何输入等,请自行处理. 目录 一.安装与更新 1.安装VMware虚拟机 2.安装Ubuntu系统 3.更 ...
- 手把手教你从零开始搭建Amazon Advertising-API开发环境(二)之获取SP广告数据
1. 获取access_token 官方链接 1.1 请求路径 POST 地区 URL NA https://api.amazon.com/auth/o2/token EU https://api.a ...
- 【D1N910】一线大厂React实践宝典(二) 课程引言+React开发环境
目录 课程引言 React基本开发环境 搭建工程化React开发环境 开始你的 React 之旅 JSX 语法 混合 JavaScript 与 JSX 正常操作,正常分析,大家好,我是D1N910. ...
- 从零开始搭建webpack的vue生产/开发环境
一.初始化项目 在命令行中敲入如下命令: mkdir Webpack-Vue && cd Webpack-Vue && npm init -y 然后你就可以在你的当前路 ...
- webpack搭建php服务器,webpack搭建react开发环境步骤详解
这次给大家带来webpack搭建react开发环境步骤详解,webpack搭建react开发环境的注意事项有哪些,下面就是实战案例,一起来看一下.mkdir react-redux && ...
- Webpack搭建React开发环境
Webpack搭建React开发环境 1.React环境搭建 实现React开发的三种方式: (1)使用CDN的方式 <script src="https://unpkg.com/re ...
- 基于webpack3.x从0开始搭建React开发环境
在开发react单页面的时候无可避免的要使用到webpack打包,今天就从零开始搭建一个react的开发环境. 需要实现的功能有: 使用Babel编译ES6 编译.jsx文件 实现热更新 编译CSS预 ...
最新文章
- 太阳能板如何串联_还在犹豫用不用太阳能灯?这些分析让你少花钱,更省钱。...
- 洛谷P2826 [USACO08NOV]光开关Light Switching [2017年6月计划 线段树02]
- PaddlePaddle实现波士顿房价预测
- 当我真正开始爱自己——查理·卓别林
- BZOJ1576: [Usaco2009 Jan]安全路经Travel(树链剖分)
- 干货!639页《深度学习:Deep Learning》硬核课程PPT
- Java 算法 拦截导弹
- oracle中常用的时间格式转换
- 远程办公的 33 种预测
- 微信小程序----相对路径图片不显示
- sqlserver的文件导入到mysql_SQLServer数据导入到MySQL方法介绍
- javascript开发植物大战僵尸网页版游戏源代码下载
- Android基础教程(奋斗之小鸟)_PDF 电子书
- 【全自动网盘扩容软件使用教程】百度网盘自助无限扩容+自助无限修复软件使用步骤说明
- 【使用Modern UI快速开发WPF应用】
- 青春日志html,人民日报青春日记:做有信仰的奋斗者
- NCN8025 TDA8035 智能卡接口IC读卡器芯片的替代解决方案
- VMR论文visualization实验总结
- EDID:识别和解决常见问题指南
- 日期格式化使用 YYYY-MM-dd 的潜在问题
热门文章
- C语言字符串类型转换为整型,c语言中将一个字符串转换到整型数据类型的函数是什么?...
- AcWing 786. 第k个数
- Java基础问题总结
- [python]python logging 模块
- Rational Rose 逆向工程(java) 常见问题二则
- mongo源码学习(四)服务入口点ServiceEntryPoint
- oracle—新建用户
- 《CUDA C编程权威指南》——2.4节设备管理
- Srping事务的传播行为和隔离级别
- 关于大规模 push 系统的解决方案