Webpack笔记(二)——搭建React开发环境
前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一下昨天发布的笔记:入门webpack笔记
一、初始化项目文件夹
在任意目录下,新建一个文件夹作为你的项目文件夹,命名随意。随后使用命令行工具,切换到该文件夹,键入npm init
进行初始化(遇到的问题一直回车就好了),初始化完成之后可以看到生成了一个package.json
文件。
随后在该项目文件夹下新建两个文件夹:/dist
和/src
,其中/src
用于放置开发的源码,/dist
用于放置“编译”后的代码。
随后在/src
目录下新建index.html
、index.css
和index.js
文件
二、安装webpack工具
通过命令行使用webpack 4需要安装两个模块:webpack和webpack-cli,都安装为开发环境依赖。
npm install -D webpack webpack-cli
安装完成之后可以看到你的package.json
文件发生了变化,在devDependencies属性下多了两个包的属性。
三、配置最基本的webpack
1.安装最基本的插件:
npm install -D html-webpack-plugin clean-webpack-plugin webpack-dev-server css-loader webpack-merge style-loader
2.在项目文件夹下新建文件
webpack.base.conf.js
,表示最基本的配置文件,内容如下:const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.[hash].js',
path: path.join(__dirname, '/dist')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
new CleanWebpackPlugin(['dist'])
]
};其中,
/src/index.html
是你的网站入口HTML文件,/src/index.js
是你的入口js文件。3.在项目文件夹下新建
webpack.dev.conf.js
文件,表示开发环境下的配置。内容如下:const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.conf.js'); module.exports = merge(baseConfig, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
port: 3000
}
});4.在项目文件夹下新建
webpack.prod.conf.js
文件,表示生产环境的配置,内容如下:const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.conf.js'); console.log(__dirname);
module.exports = merge(baseConfig, {
mode: 'production'
});
四、配置npm scripts
配置了三个配置文件以满足两个不同环境下的代码构建,使用语义化较好的npm scripts
来构建代码有利于简化工作。
添加新的scripts内容到package.json
文件的scripts
属性,记得用双引号引起来,其属性如下:
// package.json
{
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.conf.js",
"build": "webpack --config webpack.prod.conf.js"
}
}
配置完之后,可以尝试修改/src/index.html
、/src/index.js
或/src/index.css
,运行npm scripts命令查看效果。
比如按照以下内容创建文件:
index.html
<html>
<head>
<meta charset="utf-8"/>
<title>React & Webpack</title>
</head>
<body>
<div id="root">
<h1>Hello React & Webpack!</h1>
</div>
</body>
</html>
index.css
body {
background-color: blue;
} #root {
color: white;
background-color: black;
}
index.js
import './index.css'; console.log('Success!');
随后使用命令npm run start
,即可看到效果。修改css或者js文件,保存之后可以看到浏览器自动刷新并且展示出了你刚刚所做的更改。
做到这里,一个基本的开发环境已经搭建出来了,下一步就是针对React特定的环境,配置不同的webpack来进行构建。
使用React开发,主要是ES6(虽然最近所有高级浏览器都已经支持ES6,但是还是要为低级IE做准备)和React的JSX语法需要进行转换。下面针对这两种语法进行配置。
五、配置Babel
Babel是一个优秀的JavaScript编译器(这句话源自Babel官网),通过Babel的一些插件,可以将JSX语法、ES6语法转换为ES5的语法,使得低级浏览器也可以运行我们写的代码。
(1)安装Babel预设
通过以下命令安装Babel预设、babel-loader
、babel-polyfill
和babel-preset-react
:
npm install -D babel-preset-env babel-loader babel-polyfill babel-preset-react
(2)配置.babelrc
在项目文件夹的根目录下新建一个.babelrc
的文件(Windows下无法直接创建,可以通过将文件命名为.babelrc.
达到创建的目的),在文件内输入以下内容:
{
"presets": ["env", "react"]
}
(3)配置webpack.base.conf.js
在module.rules
中插入一个新对象,内容如下:
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
}
(4)安装react
和react-dom
模块
npm install --save react react-dom
(5)开始开发
在/src
中新建一个App.js
文件,内容如下:
import React from 'react'; class App extends React.Component {
render() {
return <div>
<h1>Hello React & Webpack!</h1>
<ul>
{
['a', 'b', 'c'].map(name => <li>{`I'm ${name}!`}</li> )
}
</ul>
</div>
}
}
export default App;
清空index.js
之后在其中写入如下内容:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css'; ReactDOM.render(<App/>, document.getElementById('root'));
使用npm run start
命令打开页面可以看到使用React写出来的效果了。
打开浏览器查看编译后的代码,找到App组件中的map函数这一段,可以发现ES6的语法已经被转换到了ES5的语法:
['a', 'b', 'c'].map(function (name) {
return _react2.default.createElement(
'li',
null,
'I\'m ' + name + '!'
);
})
箭头函数被写成了function匿名函数。
六、说明
上面的步骤,我已经重新跑了一遍,一步一步按照来就可以搭建成功,有兴趣的童鞋可以照着跑一遍。^_^
另外如果还有错误的话,请提醒我一下,我一定会马上改正的!
Webpack笔记(二)——搭建React开发环境的更多相关文章
- 使用webpack搭建react开发环境
安装和使用webpack 1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpa ...
- 二、react开发环境配置与webpack入门
Webpack 模块打包工具(module bundler)功能: 将 CSS.图片与其他资源打包 打包之前预处理(Less.CoffeeScript.JSX.ES6 等)档案 依 entry 文件不 ...
- A10 平板开发二搭建Android开发环境
我是直接在Ubuntu 12.10 64位系统下操作的,搭建Ubuntu开发环境类似,见Ubuntu 10.04开发环境配置.需要注意的是,64位的系统,需要安装支持32位的库(sudo apt-ge ...
- 从零搭建react开发环境
早在六年前,前端开发已经实现了模块化.工程化开发,既然是模块化工程化开发那就少不了包管理工具,所以我们的第一步就是先从安装nodejs开始(安装nodejs携带JavaScript的包管理工具npm) ...
- appium环境搭建(二)----搭建android开发环境
一.安装Java环境: java 环境分JDK 和JRE ,JDK就是Java Development Kit.简单的说JDK是面向开发人员使用的SDK,它提供了Java的开发环境和运行环境. JRE ...
- ISD9160学习笔记02_搭建NuMicro开发环境
开发环境这边没什么好说的,烧写玩了玩录音的测试程序. 1. 烧写工具 昨晚先尝试了下烧写工具(NuMicro ICP Programming Tool 1.30.6491.exe),板子自带了烧写器, ...
- 用webpack搭建react开发环境
安装插件: npm install react react-dom babel-loader babel-core babel-preset-react babel-preset-es2015 配置w ...
- react实战项目开发(1) 搭建react开发环境初始化项目(Create-react-app)
前言 Create React App npm install -g create-react-app create-react-app my-app cd my-app npm start 执行命令 ...
- 在 NodeJs 上搭建 React 开发环境
步骤: 1. 安装 nodejs :根据你的 Windows 类型(x86或x64)下载相应的安装包进行安装.安装完成后,可以在任一目录下打开 cmd 窗口并运行 node -v 命令,如果显示 no ...
随机推荐
- Oracle 行列转换总结
行列转换包括以下六种情况:*列转行*行转列*多列转换成字符串*多行转换成字符串*字符串转换成多列*字符串转换成多行 下面分别进行举例介绍. 首先声明一点,有些例子需要如下10g及以后才有的知识:a.掌 ...
- Hibernate 一对多自身关联(同一表中子父目录树形结构)
- Redis 小结
一.redis简介 redis是一款基于C语言编写的,开源的非关系型数据库,由于其卓越的数据处理机制(按照规则,将常用的部分数据放置缓存,其余数据序列化到硬盘),大家也通常将其当做缓存服务器来使用. ...
- 【5】.net WCF 简单实例
1.创建WCF项目 2.系统自动生成IWcfService // 注意: 使用“重构”菜单上的“重命名”命令,可以同时更改代码和配置文件中的接口名“IService1”. [ServiceContra ...
- 设置$.getJSON同步执行的笨方法
$.ajaxSettings.async=false; $.getJSON("action/logon_checkAcc.action", function(json){ aler ...
- vue-i18n国际化实例
demo 场景需求分析 需求很简单,左上角 ''网易云音乐''就是一个中英文切换的按钮,点击弹出提示框,确认切换语言后,实现英文版本. 切换成英文版本: 三.实现国际化 1.我们得先有开发环境,先有项 ...
- alert 多语言的处理
1. code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- vue如何将单页面改造成多页面应用
问题描述: 手头有一个项目是使用 vue-cli 搭建的单页面应用.项目分为了管理平台和用户查看页面,用户查看页面是很简单的页面,但是在加载过程中,却加载了整个应用的打包代码,量重且影响了响应和体验. ...
- Python-网络编程(三)
今天是网络编程的最后一天,明天会开始并发编程 socketserver模块实现并发 为什么要讲socketserver?我们之前写的tcp协议的socket是不是一次只能和一个客户端通信,如果用soc ...
- easyui numberbox输入框 编辑不可编辑的切换
背景:申请单里需要选费用类型,费用类型有的有子明细项,有个合计项 当有子明细项的时候,合计项的值是通过弹出的子明细项价格的总和(设置为可编辑没问题,因为点击出来弹框,编辑不了) 没有子明细 ...