webpack 2.x配置reactjs基本开发环境详解_网络技术

webpack 2.x配置reactjs基本开发环境详解

发布时间 - 2026-01-11 02:41:46 点击率：次

本文介绍了webpack 2.x配置reactjs基本开发环境详解，分享给大家，具体如下：

当前webpack版本：2.2；react: 15.4.2

webpack从1.x升级到2.x替换了几个接口，包括module.loaders这样的重要接口已被弃用（详细变更）。官网目前已不推荐使用1.x版本，早上折腾一番，根据2.2版本配置了react基本的开发环境，满足不太复杂的web应用开发，后期会逐步优化配置文件。

如果您之前使用过webpack，需要改动的地方并不大。下文假定您没有接触过类似的打包工具（但了解npm、jsx再好不过），以跟我一样一个新手的身份认识这些，如有不妥之处望不吝赐教。

如果您的react项目是引入的以下三个js文件在浏览器端编译jsx，那么不需要用webpack做开发环境。

 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
 <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
 <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

但是在产品上线阶段，我们很不推荐这样做。1，用户需要下载这三个文件，浪费了带宽；2，下载完成后需要在浏览器端编译jsx文件，浪费了时间和资源。

如果将开发阶段的项目代码打包编译为一个js文件，再推上线，那么：1，将HTTP请求减少为1个；2，不需要用户端再浪费时间和资源去编译，直接运行上线前已编译好的js代码。

如果是前者，引入项目js代码的script标签type值为"text/babel"；如果是后者，type值为"text/javascript"。

如何做？

一，安装nodejs，使用它附带的npm包管理工具。为什么要用npm？后期会下载react依赖、babel依赖、webpack工具，使用npm方便很多。不使用npm也可以，但无疑会增加诸多困难。

二，新建一个项目文件夹，在文件夹内打开终端，即Windows下的命令行（Shift+鼠标右键），运行 npm init ，如果没有特殊要求，可一直按回车键到最后一步。

三，在终端内执行如下命令下载需要的所有依赖和工具。

复制代码代码如下:
npm install react react-dom babel-loader babel-core babel-preset-es2015 webpack webpack-dev-server --save-dev

四，配置webpack配置文件。在根目录下，即与package.json同级下新建webpack.config.js文件，在文件内部写入如下内容

// webpack.config.js
var webpack = require("webpack");
var path = require("path");

module.exports = {
  entry: './dev/entry.jsx', // 入口文件
  devtool: 'source-map',　　// 调试时定位到编译前的代码位置，推荐安装react插件
  output: {
    path: path.resolve(__dirname, "./dist/js/"),
    filename: 'bundle.js' // 打包输出的文件
  },
  module: {
    rules: [{
      test: /\.jsx?$/, // test 去判断是否为.js或.jsx,是的话就是进行es6和jsx的编译
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: ['es2015', 'react']
      }
    }]
  },
  resolve: {
    // 现在你import文件的时候可以直接使用import Func from './file'，不用再使用import Func from './file.js'
    extensions: ['.js', '.jsx', '.json', '.coffee']
  }
};

目录结构：

app
  |__dev
  |  |__components
  |  |__entry.jsx
  |__dist
  |  |__css
  |  |__js
  |    |__bundle.js
  |  |__index.html
  |__node_modules
  |__package.json
  |__webpack.config.js

对于这份配置文件有如下说明

1，标红的部分可自定义

2，react项目文件可以用js格式，也可以用jsx格式，但是输出文件为在HTML文件中引用的文件，必须为js格式。

3，本配置入口文件在dev目录下，输出文件在dist目录下，具体可自定义配置。

4，module.rules为2.x新增的接口，代替原先使用的module.loaders

5，去掉query会报错，也可将其规则写入package.json文件，具体写法见参考链接

五，在package.json文件scripts部分添加如下代码

 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --hot --open --content-base ./dist/",
  "deploy": "webpack -p --progress --config webpack.config.js"
 },

注：--content-base参数指定根html文件所在位置。

六，开发阶段在终端使用 npm start 自动编译代码并刷新；使用 npm run build 编译生产环境代码。

注：webpack-dev-server自动编译代码和刷新浏览器并不会将编译后的文件写入磁盘，而是保持在内存中，因此此时在html文件中引入的脚本文件src为"bundle.js"，没有任何路径，如果在webpack.config.js的ouput中指定了"publicPath"，情况又有所不同，详见参考链接第三个。

附：webpack编译过程中常用的参数，可在scripts编译命令中分别配置

webpack 开发环境下编译
webpack -p 产品编译及压缩
webpack --watch 开发环境下持续的监听文件变动来进行编译(非常快!)
webpack -d 引入 source maps

eslint支持：

npm i eslint babel-eslint eslint-plugin-react --save-dev

新建一个.eslintrc文件，写入react支持基本参数

{
  "plugins": ["react"],
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parser": "babel-eslint"
}

推荐安装编辑器对应的eslint插件，可以在界面实时显示错误信息。

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

# webpack2配置react # webpack2 # react # JavaScript webpack5配置及使用基本介绍 # 详解node.js中的npm和webpack配置方法 # webpack教程之webpack.config.js配置文件 # JavaScript自定义Webpack配置实现流程介绍 # 配置文件 # 可以用 # 要用 # 自定义 # 值为 # 新建一个 # 后期 # 您的 # 几个 # 如果您 # 目录下 # 不吝赐教 # 不太 # 不需要 # 如有 # 之处 # 没有任何 # 已被 # 又有 # 推荐使用

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：苹果html5怎么开发_苹果用Safari测试或Xcode

下一篇：海外快速建站工具：一键生成+SEO优化+高效搭建

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：苹果html5怎么开发_苹果用Safari测试或Xcode

下一篇：海外快速建站工具：一键生成+SEO优化+高效搭建