webpack+react:项目搭建
随着ES6的成熟,react也受到了大家的青睐,包括我们的老大。去年项目使用的Vue框架,年后让我准备用react重构,满满的心塞~~~
所以这段时间一直准备这react的一些知识和看阮一峰老师的react的博客。今天就分享下项目开始的第一步————项目搭建
项目搭建的前提:nodeJS和npm。
新建一个项目文件 ReactApp (这个随意)。进入这个目录之后终端执行下方命令:
npm init
接下来你可以全部 Enter,会自动填写默认值。
初始化的时候,你也可以执行 npm init -yes 。这样就会跳过那些填写环节。
执行完之后,你会发现在项目文件中自动生成了一个package.json文件
接下来就是第二步:配置package.json文件
{ "name": "thouse", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack-dev-server --hot --progress --colors", "build": "webpack --progress --colors" }, "author": "WQL", "license": "ISC", "devDependencies": { "babel-core": "^6.0.20", "babel-loader": "^6.0.1", "babel-preset-es2015": "^6.0.15", "babel-preset-react": "^6.0.15", "css-loader": "^0.25.0", "react": "^15.3.2", "react-css-modules": "^4.0.3", "react-dom": "^15.4.0", "react-router": "^3.0.0", "style-loader": "^0.13.1", "webpack": "^1.13.3", "webpack-dev-server": "^1.16.2" }, "dependencies": { "react-router-dom": "^4.2.2" } }
这些都是初期必须的。如果你后期需要,可以在安装和添加。
修改完package.json文件后,执行npm install ,然后在ReactApp项目文件中创建webpack.config.js文件
并将下方的代码复制进去,这样第三步就完成了。
var path = require('path'); var webpack = require('webpack'); module.exports = { /*入口文件路径*/ entry: [ 'webpack/hot/dev-server', path.resolve(__dirname, './app/index.js') ], /*配置编译成功后文件存放的位置,path:编译后文件所在文件夹; filename:根据入口文件名命名编译后的文件名,编译后文件还是叫bundle.js*/ output: { path: path.resolve(__dirname, './build'), filename: 'bundle.js', }, module: { /*最关键的一步配置,告知 webpack 每一种文件都需要使用什么加载器来处理*/ loaders: [ { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: {presets: ['es2015', 'react'] } } ] }, resolve: { /*自动扩展文件后缀名,意味着我们require模块可以省略不写后缀名*/ extensions: ['','.js', '.jsx',"css"], } };
配置了那么多,接下来就该编写你的代码了~
在ReactApp项目的根目录下创建index.html文件,代码如下:
<!doctype html> <html > <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>ReactApp</title> </head> <body> <div ></div> <script src="bundle.js"></script> </body> </html>
在ReactApp文件里面新建一个app文件夹,app文件夹中新建一个index.js的文件,代码如下:
import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') );
全部执行配置完毕之后,运行命令:npm run dev,打开浏览器输入http://localhost:8080/就可以运行你的代码了。
如果有什么问题,可以进行交流讨论~~