使用Webpack构建React项目
1. 使用NPM配置React环境
NPM及React安装自行百度
- 首先创建一个文件夹,the_first_React
- 进入到创建好的目录,npm init,然后一路回车
- 新建src目录,在src中新建js文件夹,并在js中新建index.js文件
- npm install --save react react-dom babelify babel-preset-react
- npm install babel-preset-es2015 --save 安装一些依赖包
2. webpack热加载配置
- 新建webpack.config.js文件(注意:webpack2以后,loaders改为rules)
var webpack = require('webpack');
var path = require('path'); module.exports = {
mode: 'production',
entry: './src/js/index.js',
output: {
path:path.resolve(__dirname),
filename: 'bundle.js'
},
module:{
rules:[{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.css$/,
//CSS模块化用注释部分
// loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
//Ant Design 样式用一下部分
loader: "style-loader!css-loader"
},
//配置less
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}]
},
}; - 安装 webpack 。npm install -g webpack
- 全局安装webpack-dev-server。 npm install -g webpack-dev-server
- 项目中安装 webpack-dev-server。npm install webpack-dev-server --save
- 项目中安装webpack。 npm install webpack --save
- 项目中安装babel-loader。npm install babel-loader --save
- 项目中安装 babel-core。npm install babel-core --save
- 安装完所有的包后,可以查看项目中自动生成的package.json文件,查看是否安装成功。
- Terminal输入 webpack,生成bundle.js文件,将index.js进行打包。
- 在html文件中引入bundle.js即可
- 配置package.json文件,添加start和build两行
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development --open",
"build": "webpack --mode production"
}, - 使用npm start,即可 自动刷新bundle.js,同时可以自动打开locahost:8080。当修改index.js文件时,页面会自动进行刷新
好了,到此为止,你已经用webpack构建了自己的第一个React项目啦
使用脚手架构建React项目
当然你也可以使用脚手架工具进行React项目的构建,直接npm
- 安装脚手架工具。npm install -g create-react-app
- create-react-app my-app
- cd my-app/
- npm start
好了,使用脚手架已经构建完毕了,是不是超级简单