写在最前面

本文目的致力于提升自己，帮助那些对于想要提升自己的同学。

要做些什么？

从零搭建一个react开发环境，让自己在实际工作中提升开发效率。

能达到什么效果？

只能这样子说：你可以像如数家珍般说出每一行代码的作用，对于不同的场景可以想改就改，达到自己想要的。

需要具备那些知识点？

基础的webpack知识，react会写就行。

这里说明一点，可能你在按照我的步骤一步一步走下去的时候，如果遇见报错，你最好看一下我项目的package.json文件里面各种库的版本号，有时候不同的版本是有一点差别的。当然你可以使用你自己安装的版本，自己来解决报错问题，你也可以按照我的版本来。其实我希望你使用第一种方法。

那我们就开始吧，嗯开始。

1.先搭建一个简单的环境

关于webpack是什么东西，在此不做阐述，在这里我们使用webpack来小试牛刀一下，以便对后面的知识充满信心。

1.1简单的尝试

1.1.1首先新建一个文件夹（名字随意），初始化一个package.json

在命令行里面打开文件夹，输入npm init，里面需要填写的东西根据自己的实际情况填写,当然也可以输入 npm init -y

现在我们看到文件夹里面生成了一个package.json文件，里面有一些基本的描述信息。

我们讲一下其中main字段的作用

main:可选字段。这个字段的值是你程序主入口模块的ID。如果其他用户需要你的包，当用户调用require()方法时，返回的就是这个模块的导出（exports）。

1.1.2安装webpack和webpack-cli

我们来看看官网是怎么做的：webpack基本安装

1.1.3webpack一下

到了这里我相信，你已经会基础的配置了。不出意外的话我们现在的项目结构如下：

 

在这里我对index.js和index.html里面的内容做了一下修改：

 

 

我相信你现在的package.json文件如下：

 

 好的，我们现在来打包一下：

终端输入: npm run build

如果你是正确的步骤的话，你现在的dist目录下应该有了bundle.js文件，现在把index.html运行到浏览器，你会看见hello，world。

2.webpack配置文件的修改

很好，我们现在有了一次简单的尝试，现在我要做一下修改。我们知道使用了webpack，那么就有环境的区别比如开发环境，生产环境。

2.1.修改配置文件名称

现在我把webpack.config.js重命名为webpack.config.dev.js代表的是开发环境的配置。

修改之后，我们在运行npm run build

你应该会发现dist目录下里面多出了一个main.js文件，里面的内容和我们上次打包得到的bundle.js的内容一样。

我们把index.html中引入的js文件换成main.js，看看效果，很好！还是hello world。

这里的操作可以让我们看到了webpack4.0是不需要配置的，但是它还是可以高度配置的。

2.2 修改打包命令

由于默认的配置，导致我们编写的webpack.config.dev.js文件失效（没有执行里面的配置）。我们需要修改一下打包命令

看这里：

 

这个是上面webpack基础配置里面的一些内容，有了它，我们就可以使用我们自己的配置文件了。

现在修改ackage.json里面的配置文件如下:

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build-dev": "webpack --config webpack.config.dev.js" },

我把之前的build修改为build-dev表示开发环境下打包，后面的命令就可以使用我们自己的配置进行项目打包。

2.3 执行新的打包命令

在此之前我们要把index.html中引入的js还是修改为bundle.js（因为我们之前修改成了main.js）

顺便删除掉dist目录下的bundle.js和index.js（方便验证查看是不是执行的我们配置文件的规则，如果产生main.js则失效，产生bundle.js就成功）。

运行npm run buidl-dev

经过测试，结果正确，只生成了bundle.js。

2.4 为什么需要分环境配置不同的打包规则

我相信，你肯定用过第三方脚手架的，比如vue-cli，在你的项目启动的时候，是不是只需要输入一个地址，就可以在本地访问你的项目。

当然，这要归功于webpack的功劳。毫无疑问，要实现这个功能我们需要下载相关的模块依赖。但是我们打包到生成环境的时候是不需要这个模块的，如果我们把所有的东西都写在一个配置文件，那么最后打包的时候，就会把我们不需要的文件打包进去，造成请求的浪费（当然同一个文件中我们可以使用环境变量在解决）。

我们看一下官方的说明：

开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

所以我们需要编写不同环境下的配置文件。

至于如何分环境进行编写，我们先不急，后面会说到。

3.使用webpaack-dev-server

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。这是官方的解释。

简单点说：就是能允许你使用localhost:xxxx的方式，运行你的项目，并且更新代码之后，可以实时重新加载。

3.1 安装并配置webpack-dev-server

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

webpack.config.dev.js中配置如下：

devServer: {
contentBase: './dist'
}

这里的contentBase表示服务启动之后，加载资源的根目录，在这里我们是要访问index.html文件，所以填写./dist。

现在在package.json的scripts中加入如下配置：

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

--open表示服务启动的时候可以自动打开浏览器。

运行npm run start，发现如下页面：

 

我们点击dist，加载index.html文，现在可以看到hello，world。

3.2 修改运行命令

我们现在还需要点击一次dist才能看到我们想要的页面，这是一个糟糕的体验。

现在修改命令如下：

"start": "webpack-dev-server --config webpack.config.dev.js --open"

运行npm run start，直接出现了hello world。嗯，很好的体验。

3.3 webpack-dev-server其他配置

webpack-dev-server是高度可配置的，比如我想自己发财，我可以把自己的服务端口号配置成8888。

 devServer: {
    contentBase: './dist',
    port: 8888
  }

我可以配置color和process选项让我的服务启动过程中多一点美感：

"start": "webpack-dev-server --config webpack.config.dev.js --open --color --progress"（在package.json的scripts中添加）。

现在我们只用这么多，后面我们还会使用的。(此处有坑，本来想在这里讲一下的，但是现在是无关痛痒的，留到react路由那部分一起讲)。

标签：脚踏实地,dev,js,react,webpack,server,config,我们,搭建
来源： https://www.cnblogs.com/jsydb/p/12644864.html