首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 18, 2018

环境主要依赖版本

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

mkdir webpack-react && cd webpack-react
npm init -y
mkdir src

2.webpack-cli

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

npm install webpack webpack-cli --save-dev

3.wepback配置文件

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

webpack.config.js 基本配置

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',              // 入口文件
  output: {                       // webpack打包后出口文件
    filename: 'app.js',               // 打包后js文件名称
    path: path.resolve(__dirname, 'dist')  // 打包后自动输出目录
  }
}

package.json 文件 scripts配置

"scripts": {
  "build": "webpack"
}

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

npm run build
// webpack打包后的项目
├── dist
│  └── app.js       // 打包后的app.js
├── package.json
├── src
│  └── index.js      // 源目录入口文件
└── webpack.config.js

webpack.config.js module相关配置

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

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

webpack.config.js加入module模块

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 }
}

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

cd src && touch main.css

src/index.js 文件引入css

import "./main.css";

webpack.config.js plugins配置

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

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

webpack.config.js 配置plugins

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入插件

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({title: 'production'}) // 配置plugin
 ]
};

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

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

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

├── dist            // 生产目录
│  ├── app.js
│  └── index.html
├── package.json
├── src            // 源目录
│  ├── index.js
│  └── main.css
└── webpack.config.js

React 的webpack配置

安装react

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

// .babelrc
{
 "presets": ["env", "react"]
}

webpack babel-loader 配置

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

html-webpack-plugin 模板配置

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

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

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
    // react需要的渲染根元素
 <div id="root"></div>
</body>
</html>

此时webpack.config.js配置:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'app.js',
 path: path.resolve(__dirname, 'dist')
 },
 module: {
 rules: [
  {
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
   loader: 'babel-loader'
  }
  },
  {
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
  },
  {
  test: /\.(png|svg|jpg|gif)$/,
  use: ['url-loader']
  },
  {
  test: /\.(woff|woff2|eot|ttf|otf)$/,
  use: ['url-loader']
  }
 ]
 },
 plugins: [
 new HtmlWebpackPlugin({
  title: 'production',
  template: './index.html'  // 模板文件位置
 }) 
 ]
};

书写React，运行webpack

// src/index.js
import React from 'react';
import ReactDom from 'react-dom';

import './main.css'

ReactDom.render(
 <h1>hello world</h1>,
 document.getElementById('root')
);

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

dev环境热更新配置

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

安装webpack-dev-server

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

webpack.config.js 配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

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

运行webpack-dev-server

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

"scripts": {
 "build": "webpack",
 "dev": "webpack-dev-server --open --mode development" // webpack-dev-server
},

命令行运行 npm run dev

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

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

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

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

- Author -

会写代码的husky

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js实现简单模态窗口，背景灰显
Nov 14 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
vue如何进行动画的封装
Sep 26 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 #Javascript
webpack4 css打包压缩问题的解决
May 18 #Javascript
微信小程序实现长按删除图片的示例
May 18 #Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 #Javascript
Vue数据双向绑定原理及简单实现方法
May 18 #Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
May 17 #Javascript
Vue中对比scoped css和css module的区别
May 17 #Javascript
geoserver(1) props(1) 相对定位(1) 全表扫描(1) 匹配(1) lua(3) ref(1) postcss-px2rem(1) 索引树扫描(1) 绝对定位(1)
You might like
php smarty的预保留变量总结
2008/12/04 PHP
php 伪造本地文件包含漏洞的代码
2011/11/03 PHP
从零开始学YII2框架（四）扩展插件yii2-kartikgii
2014/08/20 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
React Native验证码倒计时工具类分享
2017/10/24 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览（敏捷英雄篇）
2019/05/28 DOTA
python获取list下标及其值的简单方法
2016/09/12 Python
将python代码和注释分离的方法
2018/04/21 Python
Python之循环结构
2019/01/15 Python
Django之提交表单与前后端交互的方法
2019/07/19 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
Python新手学习raise用法
2020/06/03 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
python中time包实例详解
2021/02/02 Python
在HTML5 Canvas中放入图片和保存为图片的方法
2014/05/03 HTML / CSS
施华洛世奇水晶荷兰官方网站：SWAROVSKI荷兰
2017/05/12 全球购物
Hotels.com香港酒店网：你的自由行酒店订房专家
2018/01/22 全球购物
德国最大的网上足球商店：11teamsports
2019/09/11 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
电大物流学生的自我评价
2013/10/25 职场文书
教师实习自我鉴定
2013/12/13 职场文书
离婚协议书标准格式
2014/10/04 职场文书
任命书怎么写
2015/03/02 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书