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 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
JavaScript中window.showModalDialog()用法详解
Dec 18 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
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获取文件扩展名的4种方法
2015/11/24 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
AngularJS表格添加序号的方法
2017/03/03 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
2019/03/29 Javascript
Javascript基于OOP实实现探测器功能代码实例
2020/08/26 Javascript
python基础教程之字典操作详解
2014/03/25 Python
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
python套接字流重定向实例汇总
2016/03/03 Python
谈谈python中GUI的选择
2018/03/01 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
Python银行系统实战源码
2019/10/25 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
HTML5进度条特效
2014/12/18 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
Three Graces London官网:英国奢侈品牌
2021/03/18 全球购物
超市营业员求职简历的自我评价
2013/10/17 职场文书
优秀毕业生自荐信范文
2014/01/01 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
525心理健康活动总结
2015/05/08 职场文书
施工安全保证书
2015/05/09 职场文书
推销搭讪开场白
2015/05/28 职场文书
历史博物馆观后感
2015/06/05 职场文书
MySQL创建管理LIST分区
2022/04/13 MySQL