当前位置：Gxlcms > JavaScript > 从零开始搭建webpack+react开发环境的详细步骤

从零开始搭建webpack+react开发环境的详细步骤

时间：2021-07-01 10:21:17 帮助过：35人阅读

环境主要依赖版本

  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，新建开发源目录

  1. mkdir webpack-react && cd webpack-react
  2. npm init -y
  3. mkdir src

2.webpack-cli

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

  1. npm install webpack webpack-cli --save-dev

3.wepback配置文件

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

webpack.config.js 基本配置

  1. // webpack.config.js
  2. const path = require('path');
  3. module.exports = {
  4.   entry: './src/index.js',              // 入口文件
  5.   output: {                       // webpack打包后出口文件
  6.     filename: 'app.js',               // 打包后js文件名称
  7.     path: path.resolve(__dirname, 'dist')  // 打包后自动
输出目录 } }

package.json 文件 scripts配置

  1. "scripts": {
  2.   "build": "webpack"
  3. }

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

  1. npm run build
  2. // webpack打包后的项目
  3. ├── dist
  4. │  └── app.js       // 打包后的app.js
  5. ├── package.json
  6. ├── src
  7. │  └── index.js      // 源目录入口文件
  8. └── webpack.config.js

webpack.config.js module相关配置

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

  1. npm install style-loader css-loader url-loader --save-dev

webpack.config.js加入module模块

  1. module.exports = {
  2.  entry: './src/index.js',
  3.  output: {
  4.  filename: 'app.js',
  5.  path: path.resolve(__dirname, 'dist')
  6.  },
  7.  module: {
  8.  rules: [
  9.   {
  10.   test: /\.css$/,
  11.   use: ['style-loader', 'css-loader']
  12.   },
  13.   {
  14.   test: /\.(png|svg|jpg|gif)$/,
  15.   use: ['url-loader']
  16.   },
  17.   {
  18.   test: /\.(woff|woff2|eot|ttf|otf)$/,
  19.   use: ['url-loader']
  20.   }
  21.  ]
  22.  }
  23. }

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

  1. cd src && touch main.css

src/index.js 文件引入css

  1. import "./main.css";

webpack.config.js plugins配置

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

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

webpack.config.js 配置plugins

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入插件
  3. module.exports = {
  4.  entry: './src/index.js',
  5.  output: {
  6.  filename: 'app.js',
  7.  path: path.resolve(__dirname, 'dist')
  8.  },
  9.  module: {
  10.  rules: [
  11.   {
  12.   test: /\.css$/,
  13.   use: ['style-loader', 'css-loader']
  14.   },
  15.   {
  16.   test: /\.(png|svg|jpg|gif)$/,
  17.   use: ['url-loader']
  18.   },
  19.   {
  20.   test: /\.(woff|woff2|eot|ttf|otf)$/,
  21.   use: ['url-loader']
  22.   }
  23.  ]
  24.  },
  25.  plugins: [
  26.  new HtmlWebpackPlugin({title: 'production'}) // 配置plugin
  27.  ]
  28. };

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

  1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>name</title>
  6.  </head>
  7.  <body>
  8.  // 打包后的app.js已经被自动插入了html文件
  9.  <script type="text/javascript" src="app.js"></script></body>
  10. </html>

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

  1. ├── dist            // 生产目录
  2. │  ├── app.js
  3. │  └── index.html
  4. ├── package.json
  5. ├── src            // 源目录
  6. │  ├── index.js
  7. │  └── main.css
  8. └── webpack.config.js

React 的webpack配置

安装react

  1. npm install react react-dom --save

安装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会自动在项目根目录下识别。

  1. // .babelrc
  2. {
  3.  "presets": ["env", "react"]
  4. }

webpack babel-loader 配置

  1. // 在webpack.config.js 的modules.rules中加入此配置
  2. {
  3.  test: /\.(js|jsx)$/,
  4.  exclude: /node_modules/,
  5.  use: {
  6.  loader: 'babel-loader'
  7.  }
  8. }

html-webpack-plugin 模板配置

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

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

  1. // index.html
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.  <meta charset="UTF-8">
  6.  <title>Document</title>
  7. </head>
  8. <body>
  9.     // react需要的渲染根元素
  10.  <div id="root"></div>
  11. </body>
  12. </html>

此时webpack.config.js配置:

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. module.exports = {
  4.  entry: './src/index.js',
  5.  output: {
  6.  filename: 'app.js',
  7.  path: path.resolve(__dirname, 'dist')
  8.  },
  9.  module: {
  10.  rules: [
  11.   {
  12.   test: /\.(js|jsx)$/,
  13.   exclude: /node_modules/,
  14.   use: {
  15.    loader: 'babel-loader'
  16.   }
  17.   },
  18.   {
  19.   test: /\.css$/,
  20.   use: ['style-loader', 'css-loader']
  21.   },
  22.   {
  23.   test: /\.(png|svg|jpg|gif)$/,
  24.   use: ['url-loader']
  25.   },
  26.   {
  27.   test: /\.(woff|woff2|eot|ttf|otf)$/,
  28.   use: ['url-loader']
  29.   }
  30.  ]
  31.  },
  32.  plugins: [
  33.  new HtmlWebpackPlugin({
  34.   title: 'production',
  35.   template: './index.html'  // 模板文件位置
  36.  }) 
  37.  ]
  38. };

书写React，运行webpack

  1. // src/index.js
  2. import React from 'react';
  3. import ReactDom from 'react-dom';
  4. import './main.css'
  5. ReactDom.render(
  6.  <h1>hello world</h1>,
  7.  document.getElementById('root')
  8. );

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

dev环境热更新配置

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

安装webpack-dev-server

  1. npm install webpack-dev-server --save-dev

webpack.config.js 配置

  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const webpack = require('webpack');
  4. module.exports = {
  5.  entry: './src/index.js',
  6.  output: {
  7.  filename: 'app.js',
  8.  path: path.resolve(__dirname, 'dist')
  9.  },
  10.  module: {
  11.  rules: [
  12.   {
  13.   test: /\.(js|jsx)$/,
  14.   exclude: /node_modules/,
  15.   use: {
  16.    loader: 'babel-loader'
  17.   }
  18.   },
  19.   {
  20.   test: /\.css$/,
  21.   use: ['style-loader', 'css-loader']
  22.   },
  23.   {
  24.   test: /\.(png|svg|jpg|gif)$/,
  25.   use: ['url-loader']
  26.   },
  27.   {
  28.   test: /\.(woff|woff2|eot|ttf|otf)$/,
  29.   use: ['url-loader']
  30.   }
  31.  ]
  32.  },
  33.  plugins: [
  34.  new HtmlWebpackPlugin({
  35.   title: 'production',
  36.   template: './index.html'  
  37.  }),
  38.  // hot 检测文件改动替换plugin
  39.  new webpack.NamedModulesPlugin(),   
  40.  new webpack.HotModuleReplacementPlugin() 
  41.  ],
  42.     // webpack-dev-server 配置
  43.  devServer: {
  44.  contentBase: './dist',
  45.  hot: true
  46.  },
  47. };

运行webpack-dev-server

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

  1. "scripts": {
  2.  "build": "webpack",
  3.  "dev": "webpack-dev-server --open --mode development" // webpack-dev-server
  4. },

命令行运行 npm run dev

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！