应该如何搭建webpack+react开发环境

ゞ浴缸里的玫瑰 2022-05-16 04:42 350阅读 0赞

这次给大家带来应该如何搭建webpack+react开发环境，搭建webpack+react开发环境的[注意事项][Link 1]有哪些，下面就是实战案例，一起来看一下。

**环境主要依赖版本**

1.  webpack@4.8.1
2.  webpack-cli@2.1.3
3.  webpack-dev-server@3.1.4
4.  react@16.3.2
5.  babel-core@6.26.3
6.  babel-preset-env@1.6.1
7.  bable-preset-react@6.24.1

**webpack安装及配置**

1. 起步

新建项目目录，初始化npm，新建开发源目录

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>mkdir</code> <code>webpack-react &amp;&amp; cd webpack-react</code></p> <p><code>npm init -y</code></p> <p><code>mkdir</code> <code>src</code></p> </td> 
  </tr> 
 </tbody> 
</table>

2.webpack-cli

webpack从4.x版本开始，需要同时安装webpack，webpack-cli(此工具用于在命令行中运行webpack)。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>npm install webpack webpack-cli --save-dev</code></p> </td> 
  </tr> 
 </tbody> 
</table>

3.wepback[配置文件][Link 2]

在项目根目录新建webpack.config.js文件，此文件为webpack运行核心文件。

webpack.config.js 基本配置

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>// webpack.config.js</code></p> <p><code>const</code> <code>path = </code><code>require</code><code>(</code><code>'path'</code><code>);</code></p> <p><code>module.exports = { </code></p> <p><code>&nbsp;&nbsp;</code><code>entry: </code><code>'./src/index.js'</code><code>,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// 入口文件</code></p> <p><code>&nbsp;&nbsp;</code><code>output: {&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// webpack打包后出口文件</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>filename: </code><code>'app.js'</code><code>,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// 打包后js文件名称</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>path: path.resolve(dirname, </code><code>'dist'</code><code>)&nbsp; </code><code>// 打包后自动输出目录</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

package.json 文件 scripts配置

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>"scripts"</code><code>: { </code></p> <p><code>&nbsp;&nbsp;</code><code>"build"</code><code>: </code><code>"webpack"</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

此时在命令行运行npm run build，就能执行webpack了，webpack会自动去找项目根目录里的webpack.config.js文件，执行打包。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>npm run build</code></p> <p><code>// webpack打包后的项目</code></p> <p><code>├── dist</code></p> <p><code>│&nbsp; └── app.js&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// 打包后的app.js</code></p> <p><code>├── package.json</code></p> <p><code>├── src</code></p> <p><code>│&nbsp; └── index.js&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// 源目录入口文件</code></p> <p><code>└── webpack.config.js</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**webpack.config.js module相关配置**

webpack 视所有文件都为模块，图片，css文件，字体等静态资源都会打包进js文件，所以会需要用到loader文件，更多Loaders可以查询网址，接下来我们安装一些必要的Loader文件。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>npm install style-loader css-loader url-loader --save-dev</code></p> </td> 
  </tr> 
 </tbody> 
</table>

webpack.config.js加入module模块

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>module.exports = { </code></p> <p><code>&nbsp;</code><code>entry: </code><code>'./src/index.js'</code><code>,</code></p> <p><code>&nbsp;</code><code>output: { </code></p> <p><code>&nbsp;</code><code>filename: </code><code>'app.js'</code><code>,</code></p> <p><code>&nbsp;</code><code>path: path.resolve(dirname, </code><code>'dist'</code><code>)</code></p> <p><code>&nbsp;</code><code>},</code></p> <p><code>&nbsp;</code><code>module: { </code></p> <p><code>&nbsp;</code><code>rules: [</code></p> <p><code>&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>test: /\.css$/,</code></p> <p><code>&nbsp;&nbsp;</code><code>use</code><code>: [</code><code>'style-loader'</code><code>, </code><code>'css-loader'</code><code>]</code></p> <p><code>&nbsp;&nbsp;</code><code>},</code></p> <p><code>&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>test: /\.(png|svg|jpg|gif)$/,</code></p> <p><code>&nbsp;&nbsp;</code><code>use</code><code>: [</code><code>'url-loader'</code><code>]</code></p> <p><code>&nbsp;&nbsp;</code><code>},</code></p> <p><code>&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>test: /\.(woff|woff2|eot|ttf|otf)$/,</code></p> <p><code>&nbsp;&nbsp;</code><code>use</code><code>: [</code><code>'url-loader'</code><code>]</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;</code><code>]</code></p> <p><code>&nbsp;</code><code>}</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

引入loader后，就可以在你的src/index.js文件import你想引入的css文件或者其他静态资源。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>cd src &amp;&amp; touch main.css</code></p> </td> 
  </tr> 
 </tbody> 
</table>

src/index.js 文件引入css

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import </code><code>"./main.css"</code><code>;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**webpack.config.js plugins配置**

主要的js文件和静态文件都能成功打包成一个js文件后，我们需要把这个js文件放到html文件里，webpack插件\*\*\*html-webpack-plugin\*\*\*就是干这个事儿的，它能自动生成一个html文件并把我们打包好的js文件放入html。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>npm install html-webpack-plugin --save-dev</code></p> </td> 
  </tr> 
 </tbody> 
</table>

webpack.config.js 配置plugins

执行npm run build后，我们可以看到dist目录多出一个index.html文件。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html&gt;</code></p> <p><code>&nbsp;</code><code>&lt;head&gt;</code></p> <p><code>&nbsp;&nbsp;</code><code>&lt;meta charset=</code><code>"UTF-8"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;</code><code>&lt;title&gt;name&lt;/title&gt;</code></p> <p><code>&nbsp;</code><code>&lt;/head&gt;</code></p> <p><code>&nbsp;</code><code>&lt;body&gt;</code></p> <p><code>&nbsp;</code><code>// 打包后的app.js已经被自动插入了html文件</code></p> <p><code>&nbsp;</code><code>&lt;script type=</code><code>"text/javascript"</code> <code>src=</code><code>"app.js"</code><code>&gt;&lt;/script&gt;&lt;/body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

到这里，webpack最简单最基本的需求已经配置完毕。 此时项目结构为：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>├── dist&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// 生产目录</code></p> <p><code>│&nbsp; ├── app.js</code></p> <p><code>│&nbsp; └── index.html</code></p> <p><code>├── package.json</code></p> <p><code>├── src&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>// 源目录</code></p> <p><code>│&nbsp; ├── index.js</code></p> <p><code>│&nbsp; └── main.css</code></p> <p><code>└── webpack.config.js</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**React 的webpack配置**

安装react

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>npm install react react-dom --save</code></p> </td> 
  </tr> 
 </tbody> 
</table>

安装react，wepback转换依赖

React组件由JSX组成，浏览器无法识别JSX，需要babel进行转换。

1.  babel-croe 为babel核心文件
2.  babel-preset-env 将ES6转义成ES5
3.  babel-preset-react 将JSX转义成js
4.  babel-loader webpack的babe转换

复制代码 代码如下:

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

**.babelrc配置文件**

在项目根目录下新建.babelrc文件，此文件为bable核心配置，babel会自动在项目根目录下识别。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>// .babelrc</code></p> <p><code>{ </code></p> <p><code>&nbsp;</code><code>"presets"</code><code>: [</code><code>"env"</code><code>, </code><code>"react"</code><code>]</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

webpack babel-loader 配置

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>// 在webpack.config.js 的modules.rules中加入此配置</code></p> <p><code>{ </code></p> <p><code>&nbsp;</code><code>test: /\.(js|jsx)$/,</code></p> <p><code>&nbsp;</code><code>exclude: /node_modules/,</code></p> <p><code>&nbsp;</code><code>use</code><code>: { </code></p> <p><code>&nbsp;</code><code>loader: </code><code>'babel-loader'</code></p> <p><code>&nbsp;</code><code>}</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

**html-webpack-plugin 模板配置**

我们知道react需要获取页面一个根元素，然后render才会生效，我们可以新建一个html文件，让html-webpack-plugin插件基于这个文件来进项打包。

所以我们在根目录下新建一个html文件，以此文件作模板。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>// index.html</code></p> <p><code>&lt;!DOCTYPE html&gt;</code></p> <p><code>&lt;html lang=</code><code>"en"</code><code>&gt;</code></p> <p><code>&lt;head&gt;</code></p> <p><code>&nbsp;</code><code>&lt;meta charset=</code><code>"UTF-8"</code><code>&gt;</code></p> <p><code>&nbsp;</code><code>&lt;title&gt;Document&lt;/title&gt;</code></p> <p><code>&lt;/head&gt;</code></p> <p><code>&lt;body&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// react需要的渲染根元素</code></p> <p><code>&nbsp;</code><code>&lt;p id=</code><code>"root"</code><code>&gt;&lt;/p&gt;</code></p> <p><code>&lt;/body&gt;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

此时webpack.config.js配置:

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>const</code> <code>path = </code><code>require</code><code>(</code><code>'path'</code><code>);</code></p> <p><code>const</code> <code>HtmlWebpackPlugin = </code><code>require</code><code>(</code><code>'html-webpack-plugin'</code><code>);</code></p> <p><code>module.exports = { </code></p> <p><code>&nbsp;</code><code>entry: </code><code>'./src/index.js'</code><code>,</code></p> <p><code>&nbsp;</code><code>output: { </code></p> <p><code>&nbsp;</code><code>filename: </code><code>'app.js'</code><code>,</code></p> <p><code>&nbsp;</code><code>path: path.resolve(dirname, </code><code>'dist'</code><code>)</code></p> <p><code>&nbsp;</code><code>},</code></p> <p><code>&nbsp;</code><code>module: { </code></p> <p><code>&nbsp;</code><code>rules: [</code></p> <p><code>&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>test: /\.(js|jsx)$/,</code></p> <p><code>&nbsp;&nbsp;</code><code>exclude: /node_modules/,</code></p> <p><code>&nbsp;&nbsp;</code><code>use</code><code>: { </code></p> <p><code>&nbsp;&nbsp;&nbsp;</code><code>loader: </code><code>'babel-loader'</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;</code><code>},</code></p> <p><code>&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>test: /\.css$/,</code></p> <p><code>&nbsp;&nbsp;</code><code>use</code><code>: [</code><code>'style-loader'</code><code>, </code><code>'css-loader'</code><code>]</code></p> <p><code>&nbsp;&nbsp;</code><code>},</code></p> <p><code>&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>test: /\.(png|svg|jpg|gif)$/,</code></p> <p><code>&nbsp;&nbsp;</code><code>use</code><code>: [</code><code>'url-loader'</code><code>]</code></p> <p><code>&nbsp;&nbsp;</code><code>},</code></p> <p><code>&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>test: /\.(woff|woff2|eot|ttf|otf)$/,</code></p> <p><code>&nbsp;&nbsp;</code><code>use</code><code>: [</code><code>'url-loader'</code><code>]</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;</code><code>]</code></p> <p><code>&nbsp;</code><code>},</code></p> <p><code>&nbsp;</code><code>plugins: [</code></p> <p><code>&nbsp;</code><code>new</code> <code>HtmlWebpackPlugin({ </code></p> <p><code>&nbsp;&nbsp;</code><code>title: </code><code>'production'</code><code>,</code></p> <p><code>&nbsp;&nbsp;</code><code>template: </code><code>'./index.html'</code>&nbsp; <code>// 模板文件位置</code></p> <p><code>&nbsp;</code><code>}) </code></p> <p><code>&nbsp;</code><code>]</code></p> <p><code>};</code></p> </td> 
  </tr> 
 </tbody> 
</table>

书写React，运行webpack

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>// src/index.js</code></p> <p><code>import React from </code><code>'react'</code><code>;</code></p> <p><code>import ReactDom from </code><code>'react-dom'</code><code>;</code></p> <p><code>import </code><code>'./main.css'</code></p> <p><code>ReactDom.render(</code></p> <p><code>&nbsp;</code><code>&lt;h1&gt;hello world&lt;/h1&gt;,</code></p> <p><code>&nbsp;</code><code>document.getElementById(</code><code>'root'</code><code>)</code></p> <p><code>);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

运行npm run build，生成dist目录，打开dist目录中的index.html文件，可以发现浏览器已正常渲染"hello world"。

**dev环境热更新配置**

react的wepack完成以后，是不是发现每修改一次代码，想看到效果，得重新打包一次才行。webpack-dev-server配置可以帮助我们实现热更新，在开发环境解放我们的生产力。

安装webpack-dev-server

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>npm install webpack-dev-server --save-dev</code></p> </td> 
  </tr> 
 </tbody> 
</table>

webpack.config.js 配置

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>const</code> <code>path = </code><code>require</code><code>(</code><code>'path'</code><code>);</code></p> <p><code>const</code> <code>HtmlWebpackPlugin = </code><code>require</code><code>(</code><code>'html-webpack-plugin'</code><code>);</code></p> <p><code>const</code> <code>webpack = </code><code>require</code><code>(</code><code>'webpack'</code><code>);</code></p> <p><code>module.exports = { </code></p> <p><code>&nbsp;</code><code>entry: </code><code>'./src/index.js'</code><code>,</code></p> <p><code>&nbsp;</code><code>output: { </code></p> <p><code>&nbsp;</code><code>filename: </code><code>'app.js'</code><code>,</code></p> <p><code>&nbsp;</code><code>path: path.resolve(dirname, </code><code>'dist'</code><code>)</code></p> <p><code>&nbsp;</code><code>},</code></p> <p><code>&nbsp;</code><code>module: { </code></p> <p><code>&nbsp;</code><code>rules: [</code></p> <p><code>&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>test: /\.(js|jsx)$/,</code></p> <p><code>&nbsp;&nbsp;</code><code>exclude: /node_modules/,</code></p> <p><code>&nbsp;&nbsp;</code><code>use</code><code>: { </code></p> <p><code>&nbsp;&nbsp;&nbsp;</code><code>loader: </code><code>'babel-loader'</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;</code><code>},</code></p> <p><code>&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>test: /\.css$/,</code></p> <p><code>&nbsp;&nbsp;</code><code>use</code><code>: [</code><code>'style-loader'</code><code>, </code><code>'css-loader'</code><code>]</code></p> <p><code>&nbsp;&nbsp;</code><code>},</code></p> <p><code>&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>test: /\.(png|svg|jpg|gif)$/,</code></p> <p><code>&nbsp;&nbsp;</code><code>use</code><code>: [</code><code>'url-loader'</code><code>]</code></p> <p><code>&nbsp;&nbsp;</code><code>},</code></p> <p><code>&nbsp;&nbsp;</code><code>{ </code></p> <p><code>&nbsp;&nbsp;</code><code>test: /\.(woff|woff2|eot|ttf|otf)$/,</code></p> <p><code>&nbsp;&nbsp;</code><code>use</code><code>: [</code><code>'url-loader'</code><code>]</code></p> <p><code>&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;</code><code>]</code></p> <p><code>&nbsp;</code><code>},</code></p> <p><code>&nbsp;</code><code>plugins: [</code></p> <p><code>&nbsp;</code><code>new</code> <code>HtmlWebpackPlugin({ </code></p> <p><code>&nbsp;&nbsp;</code><code>title: </code><code>'production'</code><code>,</code></p> <p><code>&nbsp;&nbsp;</code><code>template: </code><code>'./index.html'</code>&nbsp;</p> <p><code>&nbsp;</code><code>}),</code></p> <p><code>&nbsp;</code><code>// hot 检测文件改动替换plugin</code></p> <p><code>&nbsp;</code><code>new</code> <code>webpack.NamedModulesPlugin(),&nbsp;&nbsp; </code></p> <p><code>&nbsp;</code><code>new</code> <code>webpack.HotModuleReplacementPlugin() </code></p> <p><code>&nbsp;</code><code>],</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// webpack-dev-server 配置</code></p> <p><code>&nbsp;</code><code>devServer: { </code></p> <p><code>&nbsp;</code><code>contentBase: </code><code>'./dist'</code><code>,</code></p> <p><code>&nbsp;</code><code>hot: true</code></p> <p><code>&nbsp;</code><code>},</code></p> <p><code>};</code></p> </td> 
  </tr> 
 </tbody> 
</table>

运行webpack-dev-server

在 package.json 文件 加入 scripts 配置：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>"scripts"</code><code>: { </code></p> <p><code>&nbsp;</code><code>"build"</code><code>: </code><code>"webpack"</code><code>,</code></p> <p><code>&nbsp;</code><code>"dev"</code><code>: </code><code>"webpack-dev-server --open --mode development"</code> <code>// webpack-dev-server</code></p> <p><code>},</code></p> </td> 
  </tr> 
 </tbody> 
</table>

命令行运行`npm run dev`

可以在浏览器中输入localhost:8080 内容即为dist目录下的index.html内容。修改src/index.js中的内容或者依赖，即实时在浏览器热更新看到。

至此，react的webpack的基础开发环境已全部配置完毕。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！