最近学习react-webpack项目搭建，找到一篇我认为不错的博客，跟着学习了一番，写得很详细很好，本篇博客纯属记录总结，要看更详细的搭建过程及解析，请戳：

基于webpack的React项目搭建（一）

一、项目创建

1. 新建项目文件夹（手动新建或者执行命令：mkdir webpack-react），这里以webpack-react作为项目文件夹名称

2. 进入文件夹webpack-react，然后执行初始化命令：npm init

3. 在webpack-react下创建下列相应文件夹和文件：

　　bin　

　　　　|--dev-server.js　（webpack-dev-server配置文件）

　　src(项目主文件夹,后面编写的文件大多都放在这里)

　　　　|--App.js

　　　　|--index.js

　　　　|--index.template.html

　　webpack(webpack配置文件夹)

　　　　|--webpack.config.js

　　.babelrc(babel配置文件，json)

二、根目录下执行命令，安装react、webpack

　　 npm install react react-dom --save

　　npm install webpack --save-dev

　　如果你使用 webpack 4+ 版本，你还需要安装 CLI:  npm install --save-dev webpack-cli

　　注：这里选择在项目本地安装webpack。不推荐全局安装 webpack，全局安装webpack会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。在node_modules/.bin/文件夹里执行命令查看webpack版本: webpack -v

三、安装Babel相关

　　因为react使用不能被浏览器直接解析的jsx语法，需引入Babel进行转码，执行命令：

　　npm babel-core babel-loader babel-preset-es2015 babel-preset-react --save

　　注： babel-loader：babel加载器；    babel-preset-es2015：支持es2015；   babel-preset-react： jsx 转换成js；

四、安装webpack-dev-server，项目根目录下执行命令：

　　 npm install webpack-dev-server --save-dev

五、安装html-webpack-plugin，项目根目录下执行命令：

　　npm install html-webpack-plugin --save-dev

六、各文件代码如下：

　　bin/dev-server.js

  1.  'use strict'
  2.  
  3.  const WebpackDevServer = require('webpack-dev-server');
  4.  const config = require('../webpack/webpack.config');
  5.  const webpack = require('webpack');
  6.  const path = require('path');
  7.  const compiler = webpack(config);
  8.  
  9.  const server = new WebpackDevServer(compiler, {
  10.      contentBase: path.resolve(__dirname, '../dist'), //默认会以根文件夹提供本地服务器，这里指定文件夹
  11.      historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
  12.      port: 9090, //如果省略，默认8080
  13.      publicPath: "/"
  14.  });
  15.  server.listen(9090, 'localhost', function (err) {
  16.      if (err) throw err
  17.  })

　　src/App.js

  1.  /*
  2.  *  引入的模块是否需要用{}包裹，取决于该模块被导出时是否默认导出
  3.  *  比如这里的 App 使用export default 默认导出， 在其他地方需要引入App时，则不需要{}包裹
  4.  */
  5.  import React, { Component } from 'react';
  6.  
  7.  export default class App extends Component{
  8.    render () {
  9.      return (
  10.        <div>Hello React-webpack!</div>
  11.      )
  12.    }
  13.  }

　　src/index.js

  1.  import React from 'react';
  2.  import ReactDOM from 'react-dom';
  3.  import App from './App';
  4.  
  5.  ReactDOM.render(
  6.    <App />,
  7.    document.getElementById('app')
  8.  )

　　src/index.template.js

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title><%= htmlWebpackPlugin.options.title %></title>
  6.      </head>
  7.      <body>
  8.          <div id="app">
  9.          </div>
  10.      </body>
  11.  </html>

　　webpack/webpack.config.js

  1.  const path = require('path');
  2.  const webpack = require('webpack');
  3.  const HtmlWebpackPlugin = require('html-webpack-plugin');
  4.  
  5.  module.exports = {
  6.      mode: "development",
  7.      entry: path.resolve(__dirname, '../src/index.js'), //指定入口文件，程序从这里开始编译,__dirname当前所在目录, ../表示上一级目录, ./同级目录
  8.      output: {
  9.          path: path.resolve(__dirname, '../dist'), // 输出的路径
  10.          filename: 'app/[name]_[hash:8].js'  // 打包后文件
  11.      },
  12.      module: {
  13.          rules: [
  14.              {
  15.                  test: /\.(js|jsx)$/,
  16.                  loader: 'babel-loader',
  17.                  exclude: /node_modules/
  18.              }
  19.          ]
  20.      },
  21.  　　 plugins: [
  22.      // Html-webpack-plugin配置
  23.  　　 　　new HtmlWebpackPlugin({
  24.  　　　　 　　template: path.resolve(__dirname, '../src/index.template.html'),
  25.  　　　　　　 inject: true
  26.  　　　　 })
  27.  　　 ]
  28.  }

　　.babelrc

  1.  {
  2.    "presets": [
  3.      "es2015",
  4.      "react"
  5.    ]
  6.  }

七、基础的环境就搭建好了，在根目录下运行： npm run dev，然后浏览器访问  http://localhost:9090  ，如果看到Hello React-webpack!  就说明搭建成功了。

　　

　　

基于webpack的react开发环境搭建新手教程的更多相关文章

  1. 基于webpack的vue开发环境搭建

    1.新建并初始化项目(npm int -y),安装webpack,webpack-cli webpack-dev-server 安装eslint,eslint-plugin-vue,配置eslint语 ...

  2. 从零开始搭建一个简单的基于webpack的vue开发环境

    原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...

  3. 详解 Webpack+Babel+React 开发环境的搭建

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...

  4. 搭建 webpack、react 开发环境（三）

    配置 react-router-dom   我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...

  5. 搭建 webpack、react 开发环境（二）

    配置处理样式文件   到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...

  6. 搭建 webpack、react 开发环境（一）

    基本介绍   Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.le ...

  7. 基于IDEA的JavaWeb开发环境搭建

    基于IDEA的JavaWeb开发环境搭建 基于IDEA的JavaWeb开发环境搭建 jdk下载安装配置环境变量 下载 安装 配置环境变量 下载安装激活使用IntelliJ IDEA 下载 安装 激活 ...

  8. 基于webpack4的react开发环境配置

    一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...

  9. 基于Eclipse的Android开发环境搭建

    1.  Java开发环境搭建 1.1  JDK下载安装 JDK(Java Development Kit )是针对Java开发人员发布的软件开发工具包.JDK 是整个Java的核心,包括了Java运行 ...

随机推荐

  1. yield的表达式形式与内置函数

    yield的功能: 1. 与return类似,都可以返回值,不一样在于,yield可以返回多个值而且可暂停,再次执行可继续下一步操作,return到了就停止不在继续运行. 2.为封装好的的函数能够使用 ...

  2. LJN数理化生信奥队自传

    LJN数理化生信奥队, 原名“LJN信奥队”,简称“ljnoit”. 联系方式: QQ:3046036317 QQ群:555088375 (Offical群) 701124785 (Vip群) 邮箱: ...

  3. java第七次课堂笔记

  4. HIbernate常见异常（转载）

    SSH阶段常见的异常系列之一hibernate(15条) 异常一 异常一 异常描述: Sax解析异常:cvc-复杂的类型,发现了以元素maping开头的无效内容,应该是以 ‘{“http://www. ...

  5. cvte春招测试面试记录

    cvte春招测试面试记录,挂在了综合面试(hr面)...尽量回忆面试的问题(可能不完全). 技术面一面: 1.自我介绍 2.根据实习项目问,智能客服怎么测正确率之类的. 3.测试人脸解锁 4.测试微信 ...

  6. js 原型原型链

    个人的理解,有什么不正确的请指教,共同学习 //声明一个构造函数Personfunction Person(name,age){ this.name = name; this.age = age;} ...

  7. 关于xml的相关知识

     1 xml定义和用途  定义:XML (eXtensible Markup Language)即可扩展标记语言,它与HTML一样,都是SGML(Standard Generalized Markup ...

  8. Java利用cors实现跨域请求

    由于ajax本身实际上是通过XMLHttpRequest对象来进行数据的交互,而浏览器出于安全考虑,不允许js代码进行跨域操作,所以会警告 网站开发,在某些情况下需要用到跨域. 什么是跨域? 跨域,指 ...

  9. redis应用-分布式锁

    一个操作要修改用户的状态,修改状态需要先读出用户的状态,在内存里进行修改,改完了再存回去.如果这样的操作同时进行了,就会出现并发问题,因为读取和保存状态这两个操作不是原子的. set lock:cod ...

  10. CentOS7基本配置一

    CentOS7基本配置一 安装VMwareTools 1.点击重新安装VM-tool, 继而找到压缩文件VMwareTools-10.2.0...tar.gz,复制到桌面下,解压这么压缩文件到桌面下 ...