React+react-router4+webpack2基础环境搭建

最新推荐文章于 2024-08-12 19:01:02 发布

Jancy1072

最新推荐文章于 2024-08-12 19:01:02 发布

阅读量2.9k

点赞数 1

分类专栏：前端开发文章标签： react webpack

本文链接：https://blog.csdn.net/shelly1072/article/details/70881358

版权

前端开发专栏收录该内容

46 篇文章 1 订阅

订阅专栏

package.json文件

//一部分
"scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
"devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.0",
    "react-hot-api": "^0.5.0",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.5",
    "babel-preset-react": "^6.24.1"
  },
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-router-dom": "^4.1.1"
  }

注意：
在安装了babel-core和babel-loader后，还要安装规则集，安装完后加入到配置文件中。官方的规则集如下：

# ES2015转码规则 
$ npm install --save-dev babel-preset-es2015 

# react转码规则 
$ npm install --save-dev babel-preset-react 

# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个 
$ npm install --save-dev babel-preset-stage-0 
$ npm install --save-dev babel-preset-stage-1 
$ npm install --save-dev babel-preset-stage-2 
$ npm install --save-dev babel-preset-stage-3

若出现Cannot find module ‘babel-plugin-transform-es2015’的错误，删除node_modules文件夹，重新安装所有模块即可。

webpack.config.js

var webpack=require("webpack");
var path=require("path");

module.exports={
    entry:{
        login:["./app/js/login.js"],
    },
    devtool:"source-map",//使打包后的代码的报错信息精确到行
    output:{
        path:path.resolve(__dirname,"./build/js"),//绝对路径,打包发布时才用到
        publicPath:'/js/',//index.html与打包后的js的相对路径
        filename:"[name].bundle.js"
    },
    module:{
        loaders:[
            {
                test:/\.(js|jsx)$/,
                exclude:/node_modules/,
// 在这里添加 react-hot-loader，注意这里使用的是loaders，所以不能用 query，应该把presets参数写在 babel 的后面
                loader:"react-hot-loader!babel-loader?presets[]=react,presets[]=es2015"

            }
        ]
    },
    devServer: {             
        contentBase:'./',//配置服务器目录
        publicPath:'/js/',//同output的publicPath
        port: 8000,//配置端口
        inline:true,//热加载
        hot:true,//热替换
        historyApiFallback: true//启动URL后退功能
    }
}

1.react-hot-loader:
能让修改的部分自动刷新，这和自动刷新网页是不同的，仅仅是替换你修改的部分，不会丢失页面状态。

2.“entry”：值可以是字符串、数组和对象。
倘若你的应用只有一个单一的入口，enter项的值你可以使用任意类型，最终输出的结果都是一样的。都是把互相依赖的js文件打包成一个js文件，在入口的html文件中引用。
但是，如果你想添加多个彼此不互相依赖的文件，你可以使用数组格式的值。
如果你的应用是多页面的而不是SPA，有多个html文件（如index.html和index2.html）。然后你通过一个对象为每一个html生成一个bundle文件。

3.利用devServer可以进行一些配置。
inline和hot的区别：
“inline”选项会为入口页面添加“热加载”功能（刷新整个页面），“hot”选项则开启“热替换（Hot Module Reloading）”，即尝试重新加载组件改变的部分（而不是重新加载整个页面）。如果两个参数都传入，当资源改变时，webpack-dev-server将会先尝试HRM（即热替换），如果失败则重新加载整个入口页面。

//对象
entry:{
        login:["./app/js/login.js"],
        main:["./app/js/login.js"],
}
//数组
entry:["./app/js/login.js","./app/js/login.js"]
//字符串
entry:"./app/js/login.js"

login.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';

class Example extends Component{
    render(){
        return (
           <h2>hello</h2>
        );

    }

}

ReactDOM.render(<Example/>,document.getElementById("root"));

index.html

index.html放在根目录下。src的路径与webpack.config.js配置的publicPath有关。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>react</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="./js/login.bundle.js"></script>
</body>
</html>

以上就搭建起基础环境了。但是我们有时候用一些自动生成项目目录的包，看到里面都是用server.js文件来起一个本地服务器，然后用node+文件名来启动项目。大致过程可以参考：

server.js

在以上文件的基础上，增加server.js

var webpack=require("webpack");
var devServer=require("webpack-dev-server");
var config=require("./webpack.config.js");
new devServer(webpack(config),{
    publicPath: config.output.publicPath,//注意这里需要再配置一次publicPath，可以去掉webpack.config.js中的devServer配置，把所有属性都放在这里来配置
}).listen(8000,'localhost',function(err,res){
    if(err){
        return console.log(err);
    }
    console.log("listening");

})

修改package.json的npm script：
"start": "node server.js"

打包

使用html-webpack-plugin插件：它的作用是可以将根目录下的index.html拷贝一份到build目录下，并修改html文件中的src为正确的路径（根据publicPath修改的）。

安装html-webpack-plugin插件。然后在webpack.config.js中添加：

plugins:[
        new HtmlWebpackPlugin({
            filename:'../index.html',//配置路径和文件名（以webpack.config.js中的output的path为参照）
            template:'./index.html'//以跟目录下的index.html为模板来拷贝
        })
    ]

运行npm run build命令，生成build目录。直接在浏览器打开index.html即可看到效果。