最小白的webpack+react环境搭建

本文也同步发表在我的公众号“我的天空”

从零开始，用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境。

最近在玩webpack+react+移动端，那么第一步自然是搭建相关的环境，本来网上的教程很不错，只是前端相关的东西发展太过迅猛，只相隔了半年有些东西的版本就不对了，有些配置、命令等照着之前的教程做就可能会掉到坑里去，别问我怎么知道的，我刚刚从坑里爬出来，因此赶紧写篇文章来记录一下，也算是让自己再巩固一下。

本篇完全是从零开始，用最少的配置、最少的代码、最少的依赖来搭建一个最简单的webpack+react环境。会把一个小白的经历原原本本的写出来，遇到的坑都用红色的坑字标注出来，由于我也是第一次学习相关的知识点如果有不正确的地方也多多欢迎大家来指出。

本篇文章写作的日期是2018-7-21，因此所有依赖的版本到当前日期为止，以后如果有升级变化的话，那也是无法当前预料得到的。我的操作系统是win7，因此不涉及到linux的相关知识点。编辑器是Sublime Text3.0，顺便安利一下Sublime Text，好用速度又快，真心不错！

我是参考这篇教程：https://segmentfault.com/a/1190000006178770


现在让我们开始吧，第一步我们先配置一个webpack的web服务器。

webpack依赖于node.js，那么第一步是安装node.js，这个没什么好说的，windows环境的安装就更友好了，官网下载安装包，一路默认安装即可，现在的node.js安装完毕后，npm也就自带安装好了，后面我们就要一路与npm打交道了。

首先我们要用npm初始化项目，电脑上新建一个目录保存我们的练习文件，随后进入cmd命令行，转到该目录下。如果命令行不会操作的话，请先掌握cd这个命令。接下来在该目录下输入npm init命令：

npm init

根据提示一路回车就可以了，不过这个地方可能会有一个坑存在，如图：

这里报错：Sorry，name can only contain URL-friendly characters。

该错误产生的原因是npm初始化时，会向我们询问项目名，如果我们不指定的话（通常都是如此），那么就会用当前文件夹来命名，而我们的文件夹的名称为“练习-react环境”，其包含了一个中划线（-），因此导致命名错误了。那么我们只要输入一个项目名称（譬如test）就可以了， 或者干脆把文件夹重命名为符合规范的名称就可以了。

本例中我们手动输入了test，将项目名称指定为test：

接下来就一路回车，最后询问“Is this OK？<y>”时输入y后回车，完成npm初始化。

npm初始化后，在文件夹下将会出现一个node_modules文件夹（目前为空），以及pack.json文件。其实我们刚才npm init命令就是为了配置这个package.json，因此也可以完全自己来手动创建。

接下来安装webpack和webpack-dev-server，执行命令：

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

安装webpack很顺利，没有遇到任何问题。

安装完毕后，node_modules文件夹中就不再为空了，里面存放的都是webpack的相关依赖。package.json中也多了"dependencies"和"devDependencies"两项，其记录的是当前依赖及版本信息，其中"dependencies"为空。

"devDependencies": {
    "webpack": "^4.16.1",
    "webpack-dev-server": "^3.1.4"
},
"dependencies": {
}

随后在当前文件夹下新建一个public文件夹（文件夹名任意），在里面写一个index.html页面，内容随意。接下来我们就要配置webpack了，在文件夹下新建一个webpack.config.js文件，此时目录结构为：

编辑webpack.config.js，由于我们的目的是创建一个web服务器，因此只需要配置以下内容：

module.exports={
    devServer:{
        contentBase:"./public"
    }
}

devServer是webpack中web服务器的相关配置项，contentBase指定的是页面加载目录，而其加载页面默认为index.html，由于我们的index.html是在public目录下，因此就将contentBase设置为"./public“。

接下来在package.json中配置web服务启动命令，该命令配置在scripts中的，其命令名称为“server”，命令详情为“webpack-dev-sever --open”：

"server":"webpack-dev-server --open"

将其插入scripts中：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "server": "webpack-dev-server --open"
},

在命令行中输入"npm run server”回车以便启动web服务，此时会遇到一个坑，webpack并没有启动web服务，而是报错：

其大意是缺少webpack-cli，那么我们自然就安装这个webpack-cli，执行命令：

npm install webpack-cli --save-dev

webpack-cli安装过程很顺利，随后再执行“npm run server”就可以正常启动web服务了，并且启动默认浏览器，显示public下的Index.html页面，web服务的默认端口是8080。

至此，我们第一部分的目的：启动一个web服务便完成了，总结一下，要从零开始启动webpack的web服务需要做：

  1. 安装node.js、npm
  2. 安装webpack、webpack-cli、webpack-server-dev
  3. npm初始化
  4. 编写一个显示页面并命名为index.html
  5. 创建webpack.config.js，并配置devServer信息。
  6. 配置package.json，设置web启动命令。

到目前为止，我们丝毫未提及另一位主角：react，接下来我们就继续搭建环境，让其支持react。首先自然是要安装react，我们需要安装react和react-dom，执行命令：

npm install react react-dom --save

由于react是在正式环境中也需要的，因此npm安装时没有带-dev参数。

接下来修改之前的index.html，不管以前是怎么编写的，请在HTML中增加一个 <div>，将其的ID设置为"boot“，同时编写外部js引入，引入的js名为bundle.js。

<body>
    <div id=‘root‘></div>
    <script  src=‘bundle.js‘></script>
</body>

接下来在public目录下创建index.jsx文件，注意后缀名是jsx，其内容为：

import React from ‘react‘
import { render } from ‘react-dom‘

class Hello extends React.Component {
    render() {
       return (
           <p>hello react！</p>
        )
    }
}
render(
    <Hello/>,
    document.getElementById(‘root‘)
)

react的语法细节我们暂时不关心，只要知道最后页面上会输出hello react！就可以了。

jsx是react的专用语法，HTML是无法引用的，因此我们需要将其转换为HTML能够识别的JS，而这个正是webpack大显身手的时候，我们开始来配置webpack，配置之前，再确认一下的当前的目录结构：

首先我们是通过babel来转换jsx的，因此需要安装babel相关的环境，我们需要安装：

  • babel-core
  • babel-loader
  • babel-preset-es2015
  • babel-preset-react

执行命令：

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

由于我们要转换的源文件是index.jsx，转换后的目标文件是bundle.js，因此需要在webpack中配置入口和出口，在文本webpack.config.js中增加以下内容：

entry:__dirname+"/public/index.jsx",
output:{
     path:__dirname+"/public",
     filename:‘bundle.js‘
}

entry是转换的入口，而output是转换的出口。

同时还要在webpack.config.js中配置loader，让其通过外部工具来处理文件，而我们当前要处理的是通过babel来处理jsx文件。因此到了这一步我们大致会有些明白了，并不是webpack本身帮我们处理这些，而是像个中介一样，把要处理的部分与相关的工具联系在一起。

我们在webpack.config.js中加入：

module: {
    loaders: [
        { test: /\.(jsx)$/, exclude: /node_modules/, loader: ‘babel‘ }
    ]
}

其表明jsx文件需要用babel来处理，但是对于node_modules文件夹中的文件忽略掉（exclude设置）。此时webpack.config.js的内容就是：

module.exports={
    entry:__dirname+"/app/index.jsx",
    output:{
        path:__dirname+"/app",
        filename:‘bundle.js‘
    },
    devServer:{
        contentBase:"./public"
    },
    module: {
        loaders: [
            { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: ‘babel‘ }
        ]
    }
};

照理来说，到了这一步所有该做的事情都已经做完了，通过babel将index.jsx解析成bundle.js，Web服务将启动index.html，而index.html会引入bundle.js，最后在页面上显示hello react！

但是，事情往往不是那么顺利的，接下里要继续踩坑！首先我们先执行npm run server看看是什么情况：

马上就遇到坑，刺眼的红色错误提示，意思居然是loaders属性无效？！问题出现在webpack版本上，我们安装的版本是4.16.1，此时webpack.config.js中loaders的写法已经过时，应该用rules，同时babel也应该用babel-loader来替代，实际的写法为：

module: {
   rules: [
        { test: /\.(jsx)$/, exclude: /node_modules/, loader: ‘babel-loader‘ }
    ]
}

此时webpack.config.js的内容为：

module.exports={
    entry:__dirname+"/app/index.jsx",
    output:{
        path:__dirname+"/app",
        filename:‘bundle.js‘
    },
    devServer:{
        contentBase:"./public"
    },
    module: {
        rules: [
            { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: ‘babel-loader‘ }
        ]
    }
};

接下来继续试试npm run server，依然报错：

此处仍然有一坑！由于我们的jsx是用es6语法编写的，因此需要通过label来解析，那么实际上此处还缺少一个文件，就是“.babelrc”，注意这是一个名称很奇葩的文件，只有扩展名而没有文件名，该文件在windows环境下是无法通过资源管理器创建的，需要到命令行下执行type null>.babelrc命令：

type null>.babelrc

虽然提示“系统找不到指定的文件”，但是实际上已经创建了.babelrc文件，随后用文本编辑器将该文件打开，输入内容：

{
  "presets": ["react", "es2015"],
  "env": {
    "dev": {
        "plugins": [["react-transform", {
           "transforms": [{
             "transform": "react-transform-hmr",
             "imports": ["react"],
             "locals": ["module"]
           }]
        }]]
    }
  }
}

至此，再执行npm run server，终于可以看到页面正常显示了！

如果此时页面还不能正常显示的话，也许就要清理下缓存，重新生成bundle.js文件。或者在package.json中的scripts中增加“start“命令，其值为“webpack”，即：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
},

这样在命令行中执行“npm start”就可以重新编译jsx为bundle.js了。

npm start

再总结一下我们遇到的坑：

  • npm初始化时的项目名称要合规，特别是不能出现中划线下划线。
  • 安装webpack-cli。
  • loaders已过时，需要替换为rules。
  • 需要创建.babelrc文件。

至此我们便搭建了一个最简单的webpack+react环境，当我们修改index.jsx中的内容时，页面刷新后也会发生改变，接下来就可以好好学习react了！

当然，我们可以更改webpack.config.js中的devServer，添加inline:true，这样便可以实现jsx更改后，页面会自动刷新，不用我们每次修改后都去手动刷新去看效果了。另外再增加mode:"development"，这样刷新的速度会大大加快！

最终的文件目录结构为：

各文件的最终内容：

index.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id=‘root‘></div>
    <script  src=‘bundle.js‘></script>
</body>
</html>

index.jsx

import React from ‘react‘
import { render } from ‘react-dom‘

class Home extends React.Component{
    render(){
    return(
            <p>Hello react!</p>
    )
    }
}
render(
    <Hello />,document.getElementById(‘root‘)
)

.babelrc

{
  "presets": ["react", "es2015"],
  "env": {
    "dev": {
        "plugins": [["react-transform", {
           "transforms": [{
             "transform": "react-transform-hmr",
             "imports": ["react"],
             "locals": ["module"]
           }]
        }]]
    }
  }
}

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^4.16.1",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
  }
}

webpack.config.js

module.exports={   mode:"development",
    entry:__dirname+"/app/index.jsx",
    output:{
        path:__dirname+"/app",
        filename:‘bundle.js‘
    },
    devServer:{
        contentBase:"./public",       inline:true    },
    module: {
        rules: [
            { test: /\.(js|jsx)$/, exclude: /node_modules/, loader: ‘babel-loader‘ }
        ]
    }
};

原文地址：https://www.cnblogs.com/mysky7511/p/9495924.html

时间： 2024-11-07 19:19:41

最小白的webpack+react环境搭建的相关文章

webpack+react环境搭建，不必要再使用create-react-app来创建，随意配置更方便

首先是配置文件package.json,里边包括所用到的babel以及关于react的一些依赖包. { "name": "service", "version": "0.1.0", "private": true, "dependencies": { "@antv/g6": "^1.2.1", "@babel/core": &q

webpack+babel+ES6+react环境搭建

webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app目录 用来存放项目源文件 mkdir dist // 创建dist目录 用来存放打包好的文件 touch .gitignore //创建.gitignore 用来添加git 忽略的文件 touch webpack.config.js //创建webpack的配置文件 cd app //进入到app目

React+Webpack+ES6环境搭建(自定义框架)

引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Native更是扩大了前端的边界. 说道React,那就不得不说一下Webpack凭借它异步加载和可分离打包等优秀的特性,走在取代Grunt和Gulp的路上.而面向未来的ES6,更是支持模块化处理. 下面我就分享一下关于Webpack+React+ES6的环境搭建(通用)[附加发布版] 准备工作 首先需要准

webpack+react 环境

0,  node+npm 1,npm install webpack -g 2,npm install webpack-dev-server -g 3,npm install react react-dom --save 4,npm install jquery --save 5,npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev   //es6 6,npm install u

window10下vue-cli及webpack的环境搭建

1.首先确保nodejs安装,可使用node -v验证nodejs版本                        //nodejs内嵌npm 2.win+x进入cmd的管理员权限,运行cnpm install -g vue-cli              //管理员权限下安装vue-cli 3.vue  init webpack demo                                                        //进入自己设置的项目目录,新建自己的de

vue+webpack工程环境搭建

使用Vue-cli脚手架(属于vue全家桶)快速构建一个项目: [1]首先需要安装好node.js; [2]安装webpack,指令$npm install -g webpack; //如果之前有安装可以用$webpack -v查看当前webpack版本: [3]安装Vue-cli,指令$npm install -g vue-cli; [4]$Vue init webpack projectName ;//生成项目名称 [5]$cd projectName;  //进入工程目录 [6]$npm

React学习笔记-1-什么是react，react环境搭建以及第一个react实例

什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似.react是Facebook官方推出的一个javascript的库,现在已经有了非常多的库和框架Facebook为什么还要开发一款新的框架呢?原因就是 Facebook遇到了一些新的问题.Facebook需要解决的问题是构建数据不断变化的大型应用.大型应用是什么意思?数据不断变化带来什么问题呢? 

react环境搭建

react.js有类似于vue-cli的脚手架 ---- create-react-app 以下是采用了淘宝国内镜像资源去下载的react脚手架图 安装完脚手架后,还必须初始化react应用在cmd键入: create-react-app my-app 到这里,react的脚手架工作已经准备完毕,使用npm start启动react应用 react脚手架启动项目完毕 原文地址:https://www.cnblogs.com/xiyangcai/p/8463545.html

React环境搭建(非脚手架)

逆战班 一.建立一个项目的目录 在目录命令行中 npm init -y会在目录中产生一个文件package.json 二.安装React,react.development.js npm i react --save (或yarn add react) 会在目录中有一个node_modules目录, 找到react目录, 找到这个目录下的umd目录,拷贝umd目录下react.development.js到自己的js目录下 三.react-dom.development.js npm i rea