首页 / WEBPACK / webpack搭建react开发环境步骤详解

webpack搭建react开发环境步骤详解

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了webpack搭建react开发环境步骤详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8781字，纯文字阅读大概需要13分钟。

内容图文

这次给大家带来webpack搭建react开发环境步骤详解，webpack搭建react开发环境的注意事项有哪些，下面就是实战案例，一起来看一下。

1.初始化项目

mkdir react-redux && cd react-redux
npm init -y

2.安装webpack

npm i webpack -D

npm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies中，主要在开发环境中的依赖包. 如果使用webpack 4+ 版本，还需要安装 CLI。

npm install -D webpack webpack-cli

3.新建一下项目结构

react-redux
 |- package.json
+ |- /dist
+  |- index.html
 |- /src
  |- index.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<p id="root"></p>
<script src="bundle.js"></script>
</body>
</html>

index.js

document.querySelector('#root').innerHTML = 'webpack使用';

非全局安装下的打包。

node_modules\.bin\webpack src\index.js --output dist\bundle.js --mode development

打开dist目录下的html显示 webpack使用

配置webpack

1.使用配置文件

const path=require('path');
module.exports={
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(dirname,'dist')
  }
};

运行命令: node_modules\.bin\webpack --mode production 可以以进行打包 2.NPM 脚本(NPM Scripts) 在在 package.json 添加一个 npm 脚本(npm script)： "build": "webpack --mode production" 运行 npm run build 即可打包

使用webpack构建本地服务器

webpack-dev-server 提供了一个简单的 web 服务器，并且能够实时重新加载。

1.安装 npm i -D webpack-dev-server 修改配置文件webpack.config.js

const path=require('path');
module.exports={
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(dirname,'dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:3000,
    open:true,//自动打开浏览器
  }
};

运行 webpack-dev-server --progress ,浏览器打开localhost:3000,修改代码会实时显示修改的结果. 添加scripts脚本,运行 npm start 自动打开 http://localhost:8080/

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

启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。因此使用webpack-dev-server进行开发的时候都看不到编译后的文件

2.热更新

配置一个webpack自带的插件并且还要在主要js文件里检查是否有module.hot

plugins:[
    //热更新,不是刷新
    new webpack.HotModuleReplacementPlugin()
  ],

在主要js文件里添加以下代码

if (module.hot){
  //实现热更新
  module.hot.accept();
}

在webpack.config.js中开启热更新

devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:3000,
    open:true,//自动打开浏览器
    hot:true //开启热更新
  },

热更新允许在运行时更新各种模块，而无需进行完全刷新.

配置Html模板

1.安装html-webpack-plugin插件

npm i html-webpack-plugin -D

2.在webpack.config.js里引用插件

const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
  entry:'./src/index.js',
  output:{
    //添加hash可以防止文件缓存,每次都会生成4位hash串
    filename:'bundle.[hash:4].js',
    path:path.resolve('dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:3000,
    open:true,//自动打开浏览器
    hot:true //开启热更新
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      hash:true, //会在打包好的bundle.js后面加上hash串
    })
  ]
};

运行 npm run build 进行打包,这时候每次npm run build的时候都会在dist目录下创建很多打好的包.应该每次打包之前都将dist目录下的文件清空,再把打包好的文件放进去,这里使用clean-webpack-plugin插件.通过 npm i clean-webpack-plugin -D 命令安装.然后在webpack.config.js中引用插件.

const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
let CleanWebpackPlugin=require('clean-webpack-plugin');
module.exports={
  entry:'./src/index.js',
  output:{
    //添加hash可以防止文件缓存,每次都会生成4位hash串
    filename:'bundle.[hash:4].js',
    path:path.resolve('dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:3000,
    open:true,//自动打开浏览器
    hot:true //开启热更新
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      hash:true, //会在打包好的bundle.js后面加上hash串
    }),
     //打包前先清空
    new CleanWebpackPlugin('dist')
  ]
};

之后打包便不会产生多余的文件.

编译es6和jsx

1.安装babel npm i babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 -D babel-loader: babel加载器 babel-preset-env : 根据配置的 env 只编译那些还不支持的特性。 babel-preset-react: jsx 转换成js

2.添加.babelrc配置文件

{
 "presets": ["env", "stage-0","react"] //从左向右解析
}

3.修改webpack.config.js

const path=require('path');
module.exports={
  entry:'./src/index.js',
  output:{
    filename:'bundle.js',
    path:path.resolve(dirname,'dist')
  },
  //以下是新增的配置
  devServer:{
    contentBase: "./dist",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/(node_modules)/, //排除掉nod_modules,优化打包速度
        use:{
          loader:'babel-loader'
        }
      }
    ]
  }
};

开发环境与生产环境分离

1.安装 webpack-merge

npm install --save-dev webpack-merge

2.新建一个名为webpack.common.js文件作为公共配置,写入以下内容：

const path=require('path');
let webpack=require('webpack');
let HtmlWebpackPlugin=require('html-webpack-plugin');
let CleanWebpackPlugin=require('clean-webpack-plugin');
module.exports={
  entry:['babel-polyfill','./src/index.js'],
  output:{
    //添加hash可以防止文件缓存,每次都会生成4位hash串
    filename:'bundle.[hash:4].js',
    path:path.resolve(dirname,'dist')
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./src/index.html',
      hash:true, //会在打包好的bundle.js后面加上hash串
    }),
    //打包前先清空
    new CleanWebpackPlugin('dist'),
    new webpack.HotModuleReplacementPlugin() //查看要修补(patch)的依赖
  ],
  module:{
    rules:[
      {
        test:/\.js$/,
        exclude:/(node_modules)/, //排除掉nod_modules,优化打包速度
        use:{
          loader:'babel-loader'
        }
      }
    ]
  }
};

3.新建一个名为webpack.dev.js文件作为开发环境配置

const merge=require('webpack-merge');
const path=require('path');
let webpack=require('webpack');
const common=require('./webpack.common.js');
module.exports=merge(common,{
  devtool:'inline-soure-map',
  mode:'development',
  devServer:{
    historyApiFallback: true, //在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html
    contentBase:path.resolve(dirname, '../dist'),//本地服务器所加载的页面所在的目录
    inline: true,//实时刷新
    open:true,
    compress: true,
    port:3000,
    hot:true //开启热更新
  },
  plugins:[
    //热更新,不是刷新
    new webpack.HotModuleReplacementPlugin(),
  ],
});

4.新建一个名为webpack.prod.js的文件作为生产环境配置

const merge = require('webpack-merge');
 const path=require('path');
 let webpack=require('webpack');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const common = require('./webpack.common.js');
 module.exports = merge(common, {
   mode:'production',
   plugins: [
     new UglifyJSPlugin()
   ]
 });

配置react

1.安装react、

react-dom npm i react react-dom -S

2.新建App.js,添加以下内容.

import React from 'react';
class App extends React.Component{
  render(){
    return (<p>佳佳加油</p>);
  }
}
export default App;

3.在index.js添加以下内容.

import React from 'react';
import ReactDOM from 'react-dom';
import {AppContainer} from 'react-hot-loader';
import App from './App';
ReactDOM.render(
  <AppContainer>
    <App/>
  </AppContainer>,
  document.getElementById('root')
);
if (module.hot) {
  module.hot.accept();
}

4.安装 react-hot-loader

npm i -D react-hot-loader

5.修改配置文件在 webpack.config.js 的 entry 值里加上 react-hot-loader/patch，一定要写在entry 的最前面，如果有 babel-polyfill 就写在babel-polyfill 的后面

6.在 .babelrc 里添加 plugin, "plugins": ["react-hot-loader/babel"]

处理SASS

1.安装 style-loader css-loader url-loader

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

2.安装 sass-loader node-sass

npm install sass-loader node-sass --save-dev

3.安装 mini-css-extract-plugin ,提取单独打包css文件

npm install --save-dev mini-css-extract-plugin

4.配置webpack配置文件

webpack.common.js

{
  test:/\.(png|jpg|gif)$/,
  use:[
    "url-loader"
  ]
},

webpack.dev.js

{
  test:/\.scss$/,
  use:[
    "style-loader",
    "css-loader",
    "sass-loader"
  ]
}

webpack.prod.js

const merge = require('webpack-merge');
 const path=require('path');
 let webpack=require('webpack');
 const MiniCssExtractPlugin=require("mini-css-extract-plugin");
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 const common = require('./webpack.common.js');
 module.exports = merge(common, {
   mode:'production',
   module:{
     rules:[
       {
         test:/\.scss$/,
         use:[
           // fallback to style-loader in development
           process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader,
           "css-loader",
           "sass-loader"
         ]
       }
     ]
   },
   plugins: [
     new UglifyJSPlugin(),
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       // both options are optional
       filename: "[name].css",
       chunkFilename: "[id].css"
     })
   ]
 });

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

内容总结

以上是互联网集市为您收集整理的webpack搭建react开发环境步骤详解全部内容，希望文章能够帮你解决webpack搭建react开发环境步骤详解所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/290112.html

来源：【匿名】

【上一篇】vue-cli+webpack处理静态资源及webpack打包步骤详解【下一篇】关于extract-text-webpack-plugin的使用及安装

更多 ►

【webpack搭建react开发环境步骤详解】教程文章相关的互联网学习教程文章

webpack4从零配置搭建简单的React16开发环境【代码】【图】

写在最前暑假想要学习React, 发现React官网上的没有说明如何搭建React开发环境, 网上找的很多都是基于webpack3的, 或者直接使用脚手架, 所以趁着放假, 就稍微学了下webpack, 开始搭建自己的React项目. 第一次写博客, 如有错误, 请指出, 谢谢!之后也会继续更新从零搭建React全家桶系列, react+react-router+redux+es6. 希望大家多多支持.说明开发环境是windows 10技术栈版本node 10.3.0npm 6.1.0webpack 4.16.1react 16.4.1babel-co...

react+webpack+redux+router+ant 构架react开发环境（1）【代码】【图】

需要安装的软件　　node.js　　npm推荐使用使用node@6.3.0以上的版本，因为6.3.0版本之后会自带npm的包管理所以不需要单独的安装npm，因为伟大的墙，所以介意大家更换镜像，安装完毕之后，打开终端（mac）window电脑因该是cmd,输入命令 node -v 会看到当前的node版本号，就说明安装成功了，可以下面的步骤了。构建项目新建一个文件夹使用webstorm编辑该文件夹，之后打开控制台，输入 npm init 来生成一个 package.json 的文件夹（...

如何通过webpack和node来实现多个静态页面html,多个入口，能打包能热加载开发环境调试

demo已经传到了github,地址： https://github.com/13476075014/04.node-vue-project/tree/master/03.singlewebpack原文：https://www.cnblogs.com/chun321/p/11996410.html

React如何配置开发环境？React+webpack开发环境配置步骤（附配置实例）

本篇文章主要的向大家介绍了关于React+webpack开发环境配置步骤的详情。有兴趣的同学可以互相讨论关于react方面的知识，现在就让我们一起来看这篇文章吧这里先分解每一步的做法和原因，后面的其他文章会讲怎么快速的搭建webpack。目录：一基础篇 1.环境需求 2.NODE_PATH的配置 3.创建项目文件夹 4.安装webpack全局包 5.创建package.json 文档 6.webpack.config.js 配置二升级篇 1. 引入自动生成html的插件 2. webpack-dev-serve...

react如何配置开发环境？React+webpack的开发环境配置步骤（深入篇）

本篇文章主要的讲述了关于react+webpack的开发环境配置步骤的深入了解，现在我们来一起阅读本篇文章吧这里先讲每一步的原因和做法，其他文章会讲怎么快速搭建webpack，不用这么繁琐。配置基础文章链接：http://www.gxlcms.com/js-tutorial-409770.html 转接上文目录：目录二、webpack 升级篇 6. ES6 转ES5模块 7. url和file模块三、 webpack 高级篇 1.语法检查器eslint 2.uglify 源代码加密压缩 3.moduleconcatenationPlugin 4.d...

react如何配置开发环境？React+webpack的开发环境配置步骤（结果篇）【图】

本篇文章主要讲述了关于react+webpack的开发环境配置步骤最后结果篇。下面让我们一起来看这篇文章吧配置步骤（一）：React如何配置开发环境？React+webpack开发环境配置步骤（附配置实例）配置步骤（二）: react如何配置开发环境？React+webpack 的开发环境配置步骤（深入篇）这里先讲每一步的原因和做法。配置步骤（四）会讲怎么快速搭建webpack，同时会把整个项目包分享到git上。目录四、React 配置 1. React 组件 2. React ...

怎样利用webpack搭建react开发环境

这次给大家带来怎样利用webpack搭建react开发环境，利用webpack搭建react开发环境的注意事项有哪些，下面就是实战案例，一起来看一下。1.初始化项目mkdir react-redux && cd react-redux npm init -y2.安装webpacknpm i webpack -Dnpm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies中，主要在开发环境中的依赖包. 如果使用webpack 4+ 版本，还需要安装 CLI。npm install -D webpa...

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

这次给大家带来应该如何搭建webpack+react开发环境，搭建webpack+react开发环境的注意事项有哪些，下面就是实战案例，一起来看一下。环境主要依赖版本webpack@4.8.1webpack-cli@2.1.3webpack-dev-server@3.1.4react@16.3.2babel-core@6.26.3babel-preset-env@1.6.1bable-preset-react@6.24.1webpack安装及配置1. 起步新建项目目录，初始化npm，新建开发源目录mkdir webpack-react && cd webpack-react npm init -y mkdir src2.webp...

webpackvue项目开发环境局域网访问方法

下面我就为大家分享一篇webpack vue项目开发环境局域网访问方法，具有很好的参考价值，希望对大家有所帮助思路：将自己的项目启动ip与端口固定，当然端口也可以为默认的8080步骤：1.查看自己在局域网内的ip命令行 ipconfig2.回到自己的开发目录，在根目录找到comfig/index.js修改 host: 自己的局域网ip修改 port: 自定义端口-最好不要用80或者其他常用端口示例：comfig/index.jshost:http://192.168.2.153,//一定要加上 http port...

webpack本地开发环境无法用IP访问的解决方法【图】

下面我就为大家分享一篇webpack本地开发环境无法用IP访问的解决方法，具有很好的参考价值，希望对大家有所帮助。问题描述：只能用http://localhost:8080访问项目,不能用http://本机IP:8080访问解决方案：webpack dev配置文件中加上host:0.0.0.0上面是我整理给大家的，希望今后会对大家有帮助。相关文章：Ajax验证用户的唯一性如何使用AJAX实现按需加载无限分级和tree结构数据增删改以上就是webpack本地开发环境无法用IP访问的解决方...

webpack搭建react开发环境步骤详解

这次给大家带来webpack搭建react开发环境步骤详解，webpack搭建react开发环境的注意事项有哪些，下面就是实战案例，一起来看一下。1.初始化项目mkdir react-redux && cd react-redux npm init -y2.安装webpacknpm i webpack -Dnpm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies中，主要在开发环境中的依赖包. 如果使用webpack 4+ 版本，还需要安装 CLI。npm install -D webpack w...

webpackvue项目开发环境局域网绑定IP方法

这次给大家带来webpack vue项目开发环境局域网绑定IP方法，webpack vue项目开发环境局域网绑定IP的注意事项有哪些，下面就是实战案例，一起来看一下。思路：将自己的项目启动ip与端口固定，当然端口也可以为默认的8080步骤：1.查看自己在局域网内的ip命令行 ipconfig2.回到自己的开发目录，在根目录找到comfig/index.js修改 host: 自己的局域网ip修改 port: 自定义端口-最好不要用80或者其他常用端口示例：comfig/index.jshost:htt...

为什么不能用ip访问webpack本地开发环境【图】

这次给大家带来为什么不能用ip访问webpack本地开发环境，解决ip无法访问webpack本地开发环境的注意事项有哪些，下面就是实战案例，一起来看一下。问题描述：只能用http://localhost:8080访问项目,不能用http://本机IP:8080访问解决方案：webpack dev配置文件中加上host:0.0.0.0相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！推荐阅读：Vue.js+Flask来构建单页的App（附代码）怎样自定义设置vue项目打开关闭...

vue-cli+webpack怎样搭建vue开发环境

这次给大家带来vue-cli+webpack怎样搭建vue开发环境，vue-cli+webpack搭建vue开发环境的注意事项有哪些，下面就是实战案例，一起来看一下。在这里我们需要首先下载node，因为我们要用到npm包下载，是基于node的废话不多说，我们直接进入正题下载node，同时需要下载git，以后我们就在git上输入命令来搭建我们的vue环境git用的是linux命令不要问为什么，能用就行，你说是不是？windows系统，下载完git以后我们再桌面右击鼠标会看到gi...

webpack开发环境跨域的实例教程

本篇文章主要介绍了vue-cli webpack 开发环境跨域详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧edit dev.proxyTable option in config/index.js. The dev server is using http-proxy-middleware for proxying为了解决跨域问题，通常会使用Jsonp，但是jsonp只能是get请求。或者使用CORS支持，设置Access-Control-Allow-Origin: *0 前置技能熟悉vue-loader 和 webpack 1 基本配置编辑confix/i...

首页 / WEBPACK / webpack搭建react开发环境步骤详解

webpack搭建react开发环境步骤详解

内容导读

内容图文

内容总结

内容备注

内容手机端

【webpack搭建react开发环境步骤详解】教程文章相关的互联网学习教程文章

webpack4从零配置搭建简单的React16开发环境【代码】【图】

react+webpack+redux+router+ant 构架react开发环境（1）【代码】【图】

如何通过webpack和node来实现多个静态页面html,多个入口，能打包能热加载开发环境调试

React如何配置开发环境？React+webpack开发环境配置步骤（附配置实例）

react如何配置开发环境？React+webpack的开发环境配置步骤（深入篇）

react如何配置开发环境？React+webpack的开发环境配置步骤（结果篇）【图】

怎样利用webpack搭建react开发环境

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

webpackvue项目开发环境局域网访问方法

webpack本地开发环境无法用IP访问的解决方法【图】

webpack搭建react开发环境步骤详解

webpackvue项目开发环境局域网绑定IP方法

为什么不能用ip访问webpack本地开发环境【图】

vue-cli+webpack怎样搭建vue开发环境

webpack开发环境跨域的实例教程

WEBPACK - 相关标签

REACT - 相关标签

环境 - 相关标签

WEBPACK - 最新教程

WEBPACK - 最热教程