webPack+react 环境搭建（webpack搭建react项目）

25-02-15 17

以上就是给各位分享webPack+react环境搭建，其中也会对webpack搭建react项目进行解释，同时本文还将给你拓展react+webpack+redux+react-router环境搭建、

以上就是给各位分享webPack+react 环境搭建，其中也会对webpack搭建react项目进行解释，同时本文还将给你拓展react+webpack+redux+react-router环境搭建、react+webpack+webstorm开发环境搭建、react+webpack开发环境搭建、React+webpack开发环境的搭建等相关知识，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

webPack+react 环境搭建（webpack搭建react项目）
react+webpack+redux+react-router环境搭建
react+webpack+webstorm开发环境搭建
react+webpack开发环境搭建
React+webpack开发环境的搭建

webPack+react 环境搭建（webpack搭建react项目）

前提机子已经搭建好 node.js 和npm 包管理器。

1,新建空文件夹执行安装命令。

windows cmd 进入一下文件夹内：
执行一下命令：

1，npm init     //初始化 包管理器 会生成一个package.json文件

2，npm install  webpack --save   //安装 webpack 用于监听文件变化 

3,npm install webpack-dev-server --save   //
webpack 服务
4,npm install --save-dev   react   react-dom   babelify               babel-preset-react  //安装项目 依赖 react 以及 Babel 当然你也可以 分开安装。

5,npm install babel-preset-es2015 --save-dev   //安装es6

6，npm install babel-loader --save

以上全部是本地安装当然你也可以使用 npm install -g 惊醒全局安装。

安装后package.json如图：

{
  "name": "webreactbabeldemo","version": "1.0.0","description": "\"环境搭建测试\"","main": "index.js","scripts": { "test": "echo \"Error: no test specified\" && exit 1" },"author": "","license": "ISC","dependencies": { "babel-loader": "^7.1.2","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","babelify": "^7.3.0","react": "^15.6.1","react-dom": "^15.6.1","webpack": "^3.5.6","webpack-dev-server": "^2.7.1" } }

2，配置webpack：

根目录下新建webpack.config.js文件内容如下：

//引入webpack 模块 以及 path
var webpack = require('webpack');
var path = require('path');

//制定 项目入口 以及编译文件名称 以及输出目录
module.exports = {
    context:__dirname + '/src',entry:"./js/index.js",module:{
        loaders:[{
            test:/\.js?$/,exclude:/(node_modules)/,loader:'babel-loader',query:{
                presets:['react','es2015']
            }
        }]
    },output:{
        path:__dirname + "/src/",filename:"bundle.js"
    }
};

新建 src 文件夹 src下新建js文件夹 js 文件夹下新建 index.js文件

根目录下新建 index.html

3,代码编写：

index.html:

<!DOCTYPE html>
<html>
  <head>
      <Meta charset="utf-8"/>
  </head>
  <body>

    <div id="demo"> 这是新建项目测试环境</div>

    <script src = "./src/bundle.js"></script>
  </body>
</html>

index.js:

// var React = require('react');
// var ReactDOM = require('react-dom');
import React from 'react';
import ReactDOM from 'react-dom';

//测试  找到文档中   demo节点  替换参数数据
ReactDOM.render (
  <h1>  这是需要替换并显示数据信息  </h1>,document.getElementById('demo')
);

cmd 执行命令：

webpack

webpack-dev-server

4,显示结果：

注意浏览器的访问的bundle.js 以及缓存和编译延迟问题。需要实时更新界面的
请自行查阅webpack-dev-server实时监听文件变化。

项目源码：https://github.com/229457269/webpack-React-EnvmentDemo/tree/master

react+webpack+redux+react-router环境搭建

第一步，新建一个文件夹，然后npm init -yes初始化，会生成一个package.json记录整个项目的依赖包信息

安装webpack cnpm i webpack webpack-dev-server --save-dev

新建以下目录文件，

安装react包 cnpm i react react-dom redux react-redux redux-thunk react-router --save-dev

index.html文件内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>react-weChat</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

index.jsx文件内容，作为整个项目的主入口

import ReactDOM from 'react-dom';
import React,{Component} from 'react';
 
class App extends Component {
    render() {
        return <div>Hello React !!!</div>
    }
}

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

接下来开始配置webpack.config.js:
webpack四大组成部分：entry,output,module,plugins

const srcDir = __dirname + "/src";
const distDir = __dirname + "/dist";

module.exports = {
    entry: [
        srcDir + "/index.jsx" //入口
    ],output: {
        path: distDir,//打包后的文件存放地方，会自动新建
        filename: 'index.[hash:7].js'//打包后输出的文件名，后面跟7位随机hash值
    },devtool: 'source-map',devServer: {
        contentBase: './public',//本地服务器所加载的页面的目录
        historyApiFallback: true,//不跳转
        inline: true,//实时刷新
        port: 8090,//端口号
        hot: true
    },module:{},plugins:[]

再安装解析jsx的loader及插件去解析jsx和es6语法：cnpm i babel-cli babel-loader babel-preset-env babel-preset-react babel-plugin-react-transform react-transform-hmr --save-dev

module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,use: {
                    loader: "babel-loader",options: {
                        presets: [
                            'env','react'
                        ]
                    }
                },exclude: /node_modules/
            },//.babelrc
    {
      "presets": [
        "react","env"
      ],"env": {
        "development": {
          "plugins": [
            [
              "react-transform",{
                "transforms": [
                  {
                    "transform": "react-transform-hmr","imports": [
                      "react"
                    ],"locals": [
                      "module"
                    ]
                  }
                ]
              }
            ]
          ]
        }
      }
    }

cnpm i html-webpack-plugin --save-dev

const HtmlWebpackPlugin = require("html-webpack-plugin");//生成新的html文件

plugins: [
        
        new HtmlWebpackPlugin({//根据模板引入css,js最终生成的html文件
            filename: 'index.html',//生成文件存放路径
            template: './public/index.html',//html模板路径
        }),

cnpm i extract-text-webpack-plugin clean-webpack-plugin --save-dev

const ExtractTextPlugin = require('extract-text-webpack-plugin');//分离css和js
const CleanWebpackPlugin = require('clean-webpack-plugin');//清缓存


new ExtractTextPlugin('style.css'),//独立导出css
    new CleanWebpackPlugin('dist/*.*',{
        root: __dirname,verbose: true,dry: false
    })

cnpm i style-loader css-loader postcss-loader autoprefixer --save-dev

{
                test: /\.css$/,use: [
                    {
                        loader: "style-loader" //在html中插入<style>标签
                    },{
                        loader: "css-loader",//获取引用资源，如@import,url()
                        options: {
                            modules: true,//启用css modules
                            localIdentName: '[name__[local]--[hash:base64:5]]'//指定css的类名格式，避免全局污染
                        }
                    },{
                        loader: "postcss-loader",options: {
                            plugins:[
                                require('autoprefixer')({
                                    browsers:['last 5 version']
                                })
                            ]
                        }
                    }
                ]
            },

cnpm i less sass less-loader sass-loader stylus-loader node-sass --save-dev

{
                test:/\.less$/,use: [
                    {
                        loader: "style-loader"
                    },options: {
                            importLoaders:2
                        }
                    },//自动加前缀
                        options: {
                            plugins:[
                                require('autoprefixer')({
                                    browsers:['last 5 version']
                                })
                            ]
                        }

                    },{
                        loader: "less-loader"
                    }
                ]
            },{
              test:/\.scss$/,use:[
                  {
                      loader: "style-loader"
                  },{
                      loader: "css-loader",options: {
                          importLoader:1,}
                  },{
                      loader: "sass-loader"
                  },{
                      loader: "postcss-loader",options: {
                          plugins:[
                              require('autoprefixer')({
                                  browsers:['last 5 version']
                              })
                          ]
                      }
                  }
              ]
            },

cnpm i file-loader url-loader --save-dev

{
    test: /\.(png|jpg|gif|woff|svg|eot|woff2|tff)$/,use: 'url-loader?limit=8129',//注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片
    exclude: /node_modules/
}

再加一些webpack的插件

const webpack = require("webpack");

 new webpack.HotModuleReplacementPlugin(),//热加载插件
 new webpack.optimize.OccurrenceOrderPlugin(),new webpack.optimize.UglifyJsPlugin(),//压缩

//package.json
"scripts": {
"start": "webpack-dev-server --progress","build": "webpack --config ./webpack.production.config.js --progress && babel dist --out-dir dist"
},

完整版代码请参考：github源代码
代理：

devServer: {
    contentBase: './public',//本地服务器所加载的页面的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port: 8090,//端口号
    hot: true,proxy:{
        '/api1':{
            target:'http://10.7.10
            107:8001',changeOrigin:true,pathRewrite:{'^/api':''}
        },'/api2':{
            target:'http://10.7.10.138:4000',pathRewrite:{'^/api2':''}
        }
},

react+webpack+webstorm开发环境搭建

前言

春节期间，更新了一下自己关于前端的知识体系，要知道对于前端技术，我还是停留在JSP，JQUERY的时代，现在项目里面使用REACT作为前台，所以带着看一看的心态，看了前台同学的脚手架，看完吓了一跳，因为...完全看不懂.所以借着这个机会好好的将REACT摸一遍。

先是基础知识，首先是补了NODEJS的基础，使用了RUNOOB的入门教程。简单的介绍了NODE的相关模块，主要有系统文件系统操作，WEB模块，GET&POST参数解析，以及EXPRESS框架介绍，都介绍的比较浅。

然后是有幸看到阮一峰关于REACT的博客，主要看了ES6，Babel，Webpack, React 和 React-Route 以及 Redux。
另外关于WEBPACK，慕课的视频教程讲的也比较清晰，适合入门
统统过了一遍之后，开始建立REACT脚手架，正式上
马(编写Hello World)。选定REACT + WEBPACK + WEBSTORM. 话说作为windows老铁，断断续续在家里用了两年的MAC(公司办公还是用WIN)后，慢慢对MAC路转粉了，作为程序员，MAC真的很方便。废话不多说了，下面一步一步开始了。

安装软件

需要安装node.js和npm工具，这个就不多说了，现在安装node附带npm了。如果你安装了brew，直接使用brew install node即可。
使用 node -v , npm -v 检查是否安装完成。
安装完成之后，记得设置NODE_PATH路径

构建项目

使用webstorm新建一个空白项目。
打开webstorm的控制台，输入npm init初始化一个package.json（和maven一样，这个是npm的依赖库描述文件）
安装使用的库,其中--save-dev会把下载包的相关信息自动写到package.json的devDependencies中，其他人只需要运行npm install就可以下载相关的依赖到当前项目中。

npm install webpack webpack-dev-server babel --save-dev
npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react react-hot-loader jquery eslint eslint-plugin-react --save-dev

项目文件

均在当前项目文件夹下新建一下文件/目录

新建webpack.config.js文件

''use strict'';
var webpack = require(''webpack'');
var path = require(''path'');

//change:使用commonsplugin打包失败，替换成htmlWebpackPlugin
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin(''common.js'');
var htmlWebpackPlugin = require(''html-webpack-plugin'');

module.exports = {

    devtool: ''eval'',
    entry: [
        ''./src/js/main.js''
    ],
    output: {
        path: path.join(__dirname, ''dist''),
        filename: ''bundle.js'',
        publicPath: ''/static/''
    },
    plugins: [
        new htmlWebpackPlugin({
            template:''index.html'',
            filename:''index.html'',
            title:''webpack is good''
        })
    ],

    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ''style-loader!css-loader''
            },
            {
                test: /\.jsx?$/,
                loaders: [''react-hot-loader/webpack'', ''babel-loader''],
                exclude: /node_modules/,

            },
            {
                test: /\.(png|jpg)$/,
                loader: ''url-loader?limit=8192''
            },
            {
                test: /\.less$/,
                loader: ''style-loader!css-loader!less-loader''
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&mimetype=application/font-woff"
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader"
            }
        ]
    },
    resolve:{
        extensions:[''.js'', ''.jsx'', ''.less'', ''.css'']
    }
};

新建.babelrc文件

{
  "presets": ["es2015",  "react"]
}

新建.eslintrc文件

{
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },
  "env": {
    "browser": true,
    "node": true
  },
  "parser": "babel-eslint",
  "rules": {
    "quotes": [2, "single"],
    "strict": [2, "never"],
    "react/jsx-uses-react": 2,
    "react/jsx-uses-vars": 2,
    "react/react-in-jsx-scope": 2
  },
  "plugins": [
    "react"
  ]
}

新建server.js文件

var webpack = require(''webpack'');
var WebpackDevServer = require(''webpack-dev-server'');
var config = require(''./webpack.config'');

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    inline:true,
    historyApiFallback: true
}).listen(3000, ''localhost'', function (err, result) {
    if (err) {
        return console.log(err);
    }

    console.log(''Listening at http://localhost:3000/'');
});

修改package.json

"scripts": {
    "dev": "webpack-dev-server --open",
    "start": "node server.js",
    "lint": "eslint src"
  }

创建src/js文件夹
创建src/js/a.js

import React, { Component } from ''react'';

export default class Hello extends Component {
    render() {
        return (
        <div>
        <h1>Hello, world.</h1>
        <p>this is a simple section</p>
        <p>终于搭建成功了</p>
        </div>

    );
    }
}

创建src/js/main.js

import React from ''react'';
import ReactDOM from ''react-dom'';
import Hello from ''./a'';

ReactDOM.render(<Hello />, document.getElementById(''root''));

创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div id="root"></div>
<%= htmlWebpackPlugin.options.title  %>
</body>
</html>

运行项目

在控制台运行npm run start,在浏览器中输入http://localhost:3000/dist/index.html，出现一下页面，即表示脚手架搭建完成。

Hello, world.
this is a simple section
终于搭建成功了
webpack is good

react+webpack开发环境搭建

###Webpack配置
####目录结构
--your project
|--app
|--components
|--productBox.jsx
|--main.js
|--build
|--index.html
|--bundle.js(该文件是webpack打包后生成的)

####初始化,会直接创建package.json文件
npm init
####安装webpack及react相关依赖包
npm install react react-dom react-router react-kendo react-hot-loader react-transform-hmr --save-dev
npm install webpack webpack-dev-server --save-dev
npm install babel-core babel-loader babel-plugin-react-transform babel-preset-es2015 babel-preset-react --save-dev
npm install css-loader less less-loader graceful html-webpack-plugin lodash recluster --save-dev

####package.json
{
"name": "group",
"version": "1.0.0",
"description": "group app framework",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors",
"dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
},
"repository": {
"type": "git",
"url": ".."
},
"keywords": [
"react",
"webpack"
],
"author": "yixuan",
"devDependencies": {
"babel-core": "^6.5.2",
"babel-loader": "^6.2.5",
"babel-plugin-react-transform": "^2.0.2",
"css-loader": "^0.23.1",
"less": "^2.6.0",
"less-loader": "^2.2.2",
"react-hot-loader": "^1.3.0",
"react-transform-hmr": "^1.0.4",
"webpack": "^1.12.11",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"babel-preset-es2015": "^6.14.0",
"babel-preset-react": "^6.11.1",
"graceful": "^1.0.1",
"html-webpack-plugin": "^2.22.0",
"lodash": "^3.10.1",
"react": "^15.3.1",
"react-dom": "^15.3.1",
"react-kendo": "^0.13.11",
"react-router": "^2.0.0",
"recluster": "^0.3.7"
}
}
####webpack.config.js
var webpack = require('webpack');

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

####打包bundle.js
webpack

####运行webpack-dev-server

npm start
打开浏览器输入http://127.0.0.1:8080/webpack-dev-server

参考网址：http://www.jianshu.com/p/418e48e0cef1

https://github.com/zhangmengxue/React-Learning

React+webpack开发环境的搭建

首先创建项目,确保该项目已经安装了webpack和webpack-dev-server具体安装方法请参考上章所述.

在上一章说过babel是一个javascript编辑器,在react项目中使用babel有以下两个目的:

1:让代码支持ES6语法

2:支持react的一些特性(例如JSX语法)

针对以上两个特性,有如下两个presets可以完美解决

babel-preset-es2015
babel-preset-react

之前我们说过webpack中的loader是用于文件特定格式的转换,那么在这里我们就需要安装Babel loader

//安装babel-core核心模块和babel-loader
npm install babel-core babel-loader --save-dev
//安装ES6和React支持
npm install babel-preset-es2015 babel-preset-react --save-dev

babel安装完成后,接下来要做的当然是配置该插件了,让我们新建一个.babelrc的配置文件

{
    "presets":["es2015","react"],"plugins":["transform-object-rest-spread"]
}

当然这些当然还不够,在写大型项目的时候一个统一的代码规范是必须的,这样有助于提高开发效率,在这里给大家推荐一下ESLint,他的强大之处和babel有点相似,提供一个完全可配置的检查规则,而且提供了非常多的第三方plugin,适合不同的开发场所,还能输出详细的错误信息,当然最6的一点是它支持ES6最新语法的同时还支持JSX语法,所以说他为React的绝配也不为过.

一、安装ESLint loader

同样为webpack添加这个loader 当然更准确的说是preloader 为什么这么说呢代码规范检查肯定是要在代码编译之前来执行的,接下来就来安装这个loader,同时eslint也提供了完整的代码检查规则plugin我们就一同安装下

npm install eslint eslint-loader --save-dev
npm install eslint-plugin-import esling-plugin-react eslint-plugin-jsx-a11y --save-dev
npm install eslint-config-airbnb --save-dev

接下来我们来配置.eslintrc

{
    "extends":"airbnb",//继承插件的检查规则
    "rules": {
        "comma-dangle": ["error","never"] //修改默认规则,数组最后一项不加逗号 例如([1,2,3,4,]修改为[1,4])
    }
}

babel和eslint配置安装完成后,接下来我们要做的是如何把他们结合在一起,首先我们新建一个webpack.config.js文件,我的配置信息如下:

var path = require('path');
var htmlWebpackPugins = require('html-webpack-plugin');
var extracttext = require('extract-text-webpack-plugin');

//定义常用路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH,'app');
var BULID_PATH = path.resolve(ROOT_PATH,'build');
module.exports = {
    entry:{
        app:path.resolve(ROOT_PATH,'index.jsx')
    },output:{
        path:BULID_PATH,filename:'bundle_[hash].js'
    },devtool:eval-source-map,//开启热更新
    devServer:{
        historyApiFallback:true,hot:true,inline:true,progress:true
    },module:{
        rules:[{
            test:/\.css$/,use: extracttext.extract({
              fallback: "style-loader",use: "css-loader"
            }),test:/\.jsx?$/,use:'babel-loader'
        }],},resolve:{
        ['.js','.jsx'] //添加拓展名
    },plugins:[
        new htmlWebpackPugins({
            title:'myfirstreact',minify:false
            // templateContent:function(){
            //     var html = "<div></div>";
            //     return html;
            // }
        }),new extracttext('styles.css')
    ]
}

配置文件写好以后开始书写项目的入口文件app.jsx,当然再次之前我们需要引入react库添加进去:

npm install react-dom --save //因为生产环境需要 所以用--save

最后便开始书写我们的app.jsx:

import React from 'react';
import ReactDOM from 'react-dom';
function App(){
    return (
        <div>
            <h1>helslgggos react</h1>
        </div>
    )
}
const app = document.createElement('div');
document.body.appendChild(app);

至此我们的react基础环境就搭建成功了,执行命令npm run dev 可以看到酷炫的热加载效果 so cool ok今天的分享就到这里了

今天关于webPack+react 环境搭建和webpack搭建react项目的介绍到此结束，谢谢您的阅读，有关react+webpack+redux+react-router环境搭建、react+webpack+webstorm开发环境搭建、react+webpack开发环境搭建、React+webpack开发环境的搭建等更多相关知识的信息可以在本站进行查询。

本文标签：