从0使用webpack构建reactjs

原创 2016年05月30日 18:53:22

创建一个文件夹

npm init -f

如果不加 -f ,会有一系列设置步骤,-f会生成一个默认设置的package.json文件

如果安装低版本的react ,配置文件版本直接按照如下:

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --progress --colors"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^5.8.25",
     "babel-loader": "^5.3.2",
     "css-loader": "^0.12.1",
     "react": "^0.13.3",
     "react-hot-loader": "^1.3.0",
     "react-router": "^0.13.3",
     "webpack": "^1.12.2",
     "webpack-dev-server": "^1.11.0"
  }
}

创建webpack配置文件:

touch webpack.config.js

相关配置项:

var webpack = require('webpack');
module.exports = {
    entry: [
      'webpack/hot/only-dev-server',
      "./js/app.js"
    ],
    output: {
        path: './build',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    resolve:{
        extensions:['','.js','.json']
    },
    plugins: [
      new webpack.NoErrorsPlugin()
    ]
};

相同目录下新建index.html:

touch index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>New React App</title>
  </head>
  <body>
    <section id="react"></section>
    <script src="bundle.js"></script>
  </body>
</html>

新建js文件夹,并且新建js文件

mkdir js
touch app.js
touch hello.js

app.js:

import React from 'react';
import Router from 'react-router';
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router';

import HelloHandler from './hello.js';

let App = React.createClass({
  render() {
    return (
      <div className="nav">
        <Link to="app" className="homelink">Home  </Link>
        <Link to="hello" className="hellolink">  Say Hello</Link>
        {/* this is the importTant part */}
        <RouteHandler/>
      </div>
    );
  }
});

let routes = (
  <Route name="app" path="/" handler={App}>
    <Route name="hello" path="/hello" handler={HelloHandler}/>
  </Route>
);

Router.run(routes, function (Handler) {
  React.render(<Handler />, document.body);
});

hello.js

import React from 'react';

let Hello = React.createClass({

  render() {
    return(<div>Hello World!</div>);
  }
});

export default Hello;

npm build
npm start


注意:*以上都是低版本


如果不固定react版本号,直接npm install react –save-dev,你会发现,一片红啊,
下面附上高版本react

package.json:

{
  "name": "webpack-react-lesson1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot --progress --colors",
    "build": "webpack --progress --colors"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "css-loader": "^0.23.1",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-hot-loader": "^1.3.0",
    "react-router": "^2.4.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

webpack.config.js

var webpack = require('webpack');
module.exports = {
    entry: [
      'webpack/hot/only-dev-server',
      "./js/app.js"
    ],
    output: {
        path: './build',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/},
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query:{presets:['es2015','react']}},
            { test: /\.css$/, loader: "style!css" }
        ]
    },
    resolve:{
        extensions:['','.js','.json']
    },
    plugins: [
      new webpack.NoErrorsPlugin()
    ]
};

主要区别:
“babel-preset-es2015”: “^6.9.0”, //编译es6到es5
“babel-preset-react”: “^6.5.0”,//编译jsx到js

“react-dom”: “^15.1.0”,//高版本react只能用ReactDom.render()

参考:
Setting up environment for React, SASS, ES2015, Babel with Webpack

reactJS - 03利用babel来”编译”我们的脚本文件

第一步 在终端下进入项目根目录,执行 npm init,一路回车下去 然后发现项目目录下多了一个”package.json”文件第二步 安装babel-clisudo npm install -...
  • github_26672553
  • github_26672553
  • 2016年07月25日 19:09
  • 2690

React.js学习之环境搭建

1 工欲善其事必先利其器:前端开发工具 1.1 WebStorm和Sublime Text   Sublime Text:作为代码编辑器,Sublime Text的优点如下: 主...
  • binyao02123202
  • binyao02123202
  • 2016年06月10日 23:39
  • 16021

ReactJs 模块编译

ReactJS 在写模块时,渲染的结构在js里就是这样来写。 html语法js肯定识别不到。reactjs在执行时会编译标签。 编译后的标签有助于了解结果。 npm install -g rea...
  • starwmx520
  • starwmx520
  • 2015年09月28日 16:23
  • 379

React+webpack搭建前端开发环境(一)

react流行起来已经有好长时间了,之前都是在别人写好的环境上边编码的,现在自己尝试搭建前端环境;使用react+webpack+antd+nodejs...
  • u013409590
  • u013409590
  • 2017年06月09日 14:30
  • 668

Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE

用reactjs和bootstrap创建Monkey编程语言的网页IDE
  • tyler_download
  • tyler_download
  • 2017年11月07日 16:24
  • 244

react-webpack-express实现多页面 — node.js开发

react-webpack 学习笔记 — node.js开发最近开始学习Node.js开发,有很多基础知识和框架需要学习,所以打算将自己学习笔记记录下来,即可以和大家分享,也可以方便自己以后回顾知识。...
  • d780793370
  • d780793370
  • 2016年12月06日 21:02
  • 4717

ReactJS学习系列课程(React webpack使用)

什么是webpack?webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。之前,我们肯定...
  • jiangbo_phd
  • jiangbo_phd
  • 2016年06月25日 17:54
  • 900

React JSX编译为JavaScript

提示:本机电脑上需要安装nood.js环境   1、安装React-Tools   命令行:npminstall -g react-­tools 2、进入项目根目录,编译JSX文件 命令...
  • framic
  • framic
  • 2017年03月17日 10:44
  • 1814

ES6语法的reactjs组件babel编译

#本文节选自:http://react-china.org/t/es6-react-npm/3879首先,让我拥有一个react组件MyComponent.jsximport React from '...
  • rayshaw001
  • rayshaw001
  • 2016年12月01日 23:16
  • 508

WEBPACK 创建基本项目步骤

初始化项目文件夹,创建package.json文件: npm init 安装webpack,先全局安装,再本地安装: npm install -g webpack npm install --save...
  • HangMine
  • HangMine
  • 2017年11月18日 17:34
  • 419
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:从0使用webpack构建reactjs
举报原因:
原因补充:

(最多只允许输入30个字)