webpack构建React开发环境

转载 于 2018-04-10 09:52:45 发布 · 163 阅读 · 0

本文详细介绍如何从零开始配置Webpack并结合Babel实现React项目的搭建，包括安装、配置及开发服务器的启动。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

安装webpack

先新建文件夹并进入

　　　　mkdir  demo

　　　　cd  demo

项目初始化

　　　　npm  init  -y

补充：此处加-y是因为一路回车比较麻烦，可以生成默认的package.json文件

安装

　　　　cnpm  install  --save-dev  webpack

配置webpack.config.js

在项目根目录建立webpack.config.js文件，这个文件是进行webpack配置的，先建立基本的入口和出口文件。

　　var path =require('path');

　　module.exports = {
　　    //入口文件
  　　　  entry:'./app/index.js',
  　　  //出口文件
  　　  output:{
       　　 filename:'index.js',
       　　 path:path.resolve(__dirname,'dist')
 　　   }
　　}
新建index.html文件
在根目录新建index.html文件，并引入webpack设置中的出口文件，代码如下。
　　<html lang="en">
　　<head>
  　　  <meta charset="UTF-8">
  　　  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    　　<meta http-equiv="X-UA-Compatible" content="ie=edge">
    　　<title>React</title>
　　</head>
　　<body>
    
　　</body>
　　<!--引入出口文件-->
　　<script src="./dist/index.js"></script>
　　</html>

测试webpack配置

/app/index.js文件

function component(){

    var element = document.createElement('div');
    element.innerHTML = ('Hello JSPang');
    return element;
}
document.body.appendChild(component());
package.json文件加入打包命令
"scripts": {
    "build": "webpack"
  },
打包：
　　npm run build

开发服务器配置

安装：

　　cnpm install --save-dev webpack-dev-server

配置webpack.config.js文件：

　　devServer:{

   　　 contentBase:'./',
    　　host:'localhost',
   　　 compress:true,
   　　 port:8080
　　}
packeage.json：
　　"scripts": {
   　　 "build": "webpack",
   　　 "server": "webpack-dev-server --open"
 　　 },
启动服务：
　　npm run server 
自动刷新浏览器
在我们修改代码时，现在并不能自动刷新浏览器，不会立即呈现我们编写的代码结果，而时要再次npm run build才可以。其实只要在出口文件配置中加一个publicPath:’temp/’,然后在index.html引入JS时写这个temp地址就可以实时预览了。
output:{
    filename:'index.js',
    path:path.resolve(__dirname,'dist'),
    publicPath:'temp/'
},
index.html文件引入JS：
　　<script src="./temp/index.js"></script>

Babel安装配置

在webpack中配置Babel需要先加入babel-loader，这里我们继续使用npm来进行安装，但是我们一般还需要支持es2015和React，所以要安装四个包。安装后你会在package.json里看到这些包的版本。

　　　　cnpm   install  --save-dev  babel-core   babel-loader  babel-preset-es2015   babel-preset-react

配置module

在安装完成后，可以到webpack.config.js里配置module，也就是配置我们常说的loader。

module:{

    loaders:[
        {
            test:/\.js$/,
            exclude:/node_modules/,
            loaders:"babel-loader",
            query:{
                presets:['es2015','react']
            }
        }
    ]
}

编写React

安装React和React-dom

　　cnpm install --save react  react-dom

安装完成后，我们改写app/index.js文件，把原来原生的JavaScript代码改成React代码。

index.js

import React from 'react';

import ReactDOM from 'react-dom';

 

ReactDOM.render(

 

    <div>Hello majing</div>,

 

    document.getElementById("app")

 

);
index.html
　　<div id="app"></div>
配置完就可以npm  run  server预览了

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值