基于React+webpack的项目环境搭建

最新推荐文章于 2025-04-11 16:23:13 发布

white_g

最新推荐文章于 2025-04-11 16:23:13 发布

阅读量543

点赞数 1

分类专栏： react 文章标签： react webpack js es6

本文链接：https://blog.youkuaiyun.com/stopllL/article/details/53695459

版权

react 专栏收录该内容

1 篇文章

订阅专栏

基于React+webpack的项目环境搭建（基础配置）

1，安装node.js

2，使用npm包管理工具下载webpack

  npm install webpack -g 

3，创建项目文件夹，并通过命令行进入到该文件夹下配置package.json

  npm init 

4，使用npm下载相关依赖

   //下载react以及react-dom相关依赖 
  
   npm install react react-dom --save   
 
   //下载开发相关依赖 babel-preset-es2015用来转义ES6语法 babel-preset-react 用来转义jsx语法  
 
   npm install babel-loader babel-core babel-polyfill babel-preset-es2015 babel-preset-react babel-preset-stage-0 --save-dev

5，项目目录下创建webpack.config.js用作webpack配置文件

   var path = require('path');                    //引入path模块，该模块为node.js模块，主要是用来匹配路径 
 
   module.exports = { 
 
        entry:'./src/main.js',                    //webpack编译入口文件 
 
        output:{ 
 
             path:path.join(__dirname,'/dist'),   //输出文件路径 
 
             filename:'bundle.js'                 //输出文件名 
 
        }， 
 
        modules:{ 
 
             loaders:[ 
 
                  { 
 
                       test:/\.js$/,              //正则匹配以.js结尾的文件      
 
                       loader:'babel',            //将匹配成功的文件用babel-loader编译 
 
                       exclude:/node_modules/,    //匹配剔除node_ modules文件夹中的内容 
 
                       query:{ 
 
                           presets:['es2015','stage-0','react']  
 
                       } 
 
                  }      
 
             ]      
 
        } 
 
   }

6，文件目录如下

   index.html              //主页html 
 
   README.md               //项目说明 
 
   webpack.config.js       //webpack配置文件 
 
   package.json            //npm配置说明 查看编译所需依赖 
 
   src                     //开发目录 
 
       main.js             //入口文件 
 
       component           //子组件文件目录 
 
   dist                    //编译目录 
 
       bundle.js           //编译文件

7，index.html 引入bundle.js

   <docutype html> 
 
   <html lang="en"> 
 
        <head> 
 
             <meta charset="utf-8"> 
 
             <title>This is React Porject</title> 
 
        <head> 
 
        <body> 
 
            <div id="app"></div> 
 
            <script src="./dist/bundle.js"></script>  
 
        </body> 
 
   </html>

8，下面就可以开始正式的react+webpack+es6的编程之旅了，main.js如下

   import React from 'react';                 //引入react库 
 
   import {render} from 'react-dom';          //引入react-dom库中的render方法 
 
   const App = React.createClass({            // 定义一个组件，组件名为App  getInitialState为初始化state的值，render为渲染dom,里面写jsx语法 
 
        getInitialState:function(){ 
 
            return { 
 
                  item:'react'           
 
            }  
 
        }, 
 
        render(){ 
 
             return (<div>Hello {this.state.item}</div>) 
 
        } 
 
   }) 
 
   render(<App />,document.getElementById('app')); //将App组件render到页面的ID为app的元素中 
 
   //另外一种定义组件的方法，基于ES6语法 
 
   import React,{ Component } from 'react'; 
 
   import {render} from 'react-dom'; 
 
   class App extends Component{ 
 
        constructor(){ 
 
             super(); 
 
             this.state = { 
 
                 msg:'react'  
 
             } 
 
        } 
 
        render(){ 
 
             return (<div>Hello {this.state.msg}</div>) 
 
        } 
 
   } 
 
   render(<App />,document.getElementById('app'));

9，在控制台输入webpack进行编译打包

   webpack    //编译打包 
 
   webpack -p //编译打包压缩