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


Posted in Javascript onAugust 08, 2017

本文介绍了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插件,可以在界面实时显示错误信息。

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

Javascript 相关文章推荐
jQuery简单实现banner图片切换
Jan 02 Javascript
用js一次改变多个input的readonly属性值的方法
Jun 11 Javascript
javascript复制粘贴与clipboardData的使用
Oct 16 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
Element Backtop回到顶部的具体使用
Jul 27 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 Javascript
vue-quill-editor实现图片上传功能
Aug 08 #Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 #Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 #Javascript
基于Vue实现支持按周切换的日历
Sep 24 #Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 #Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 #Javascript
React Native如何消除启动时白屏的方法
Aug 08 #Javascript
You might like
PHP 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
jquery.post用法示例代码
2014/01/03 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
Python上下文管理器和with块详解
2017/09/09 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
安全目标管理责任书
2014/07/25 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
布达拉宫的导游词
2015/02/02 职场文书
单位计划生育责任书
2015/05/09 职场文书
2019求职信大礼包
2019/05/15 职场文书
导游词之神仙居景区
2019/11/15 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers